The following are the steps to do styling using react JS in a web application.
Step 1: – First of all, we need to install React CSS Transitions Group in order to create the basic CSS transitions and animations. We can install it by using the “npm install react-addons-css-transition-group” command on the command prompt window as shown below.
C:\Upwork\Abhishek - Eduonix\ReactJS\Workspace\react-js-style-demo>npm install react-addons-css-transition-group npm WARN [email protected] requires a peer of react@^15.4.2 but none is installed. You must install peer dependencies yourself. npm WARN [email protected] No repository field. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) + [email protected] updated 1 package in 32.481s
Step 2: – Next, we need to create a new folder, CSS and place a file style.css inside that folder. Once created, we can use it in our app by writing the following link of code in the head element in index.html as shown below.
index.html
<!DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <link rel = "stylesheet" type = "text/css" href = "/css/style.css"> <title>React App</title> </head> <body> <div id = "app"></div> <script src = "index.js"></script> </body> </html>
File: “/css/style.css” is the stylesheet used by our web application for styling and automation.
body { font-family: sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; font-size: calc(10px + 2vmin); background:#ffffff; background:linear-gradient(to bottom, #3636c1 0%, #161658 100%); } section { display: flex; align-items: center; justify-content: center; } section > *+* { margin-left: 2rem; } h1 { font-size: calc(20px + 6vmin); margin-top: 0; margin-bottom: 1rem; text-align: center; color: white; font-weight:300; } h2 { font-size: calc(8px + 5vmin); margin-top: 0; margin-bottom: 1rem; text-align: center; color: pink; font-weight:150; } h3 { font-size: calc(6px + 4vmin); margin-top: 0; margin-bottom: 1rem; text-align: center; color: green; font-weight:100; } .animate-appear { opacity: 0.01; } .animate-appear.animate-appear-active { opacity: 1; transition: opacity 2000ms ease-in; }
Step 3: – Next, we need to create a basic React component where we are going to use the ReactCSSTransitionGroup element as a wrapper of the component which we want to animate. This element is going to use the transitionAppear and transitionAppearTimeout, while transitionEnter and transitionLeave are false.
Application.jsx
import React from 'react'; var ReactCSSTransitionGroup = require('react-addons-css-transition-group'); class App extends React.Component { constructor(props) { super(props); this.state = { message: "Here is the message!", details: "Hello React JS state", conclusion: "Thank You!" } } render() { return ( <div> <ReactCSSTransitionGroup transitionName = "animate" transitionAppear = {true} transitionAppearTimeout = {2000} transitionEnter = {false} transitionLeave = {false}> <h1>Here is the message!</h1> <h2>Welcome to React JS Styling and Animation</h2> <h3>Thank You!</h3> </ReactCSSTransitionGroup> </div> ); } } export default App;
File: “main.js”
import React from 'react'; import ReactDOM from 'react-dom'; import App from './Application.jsx'; ReactDOM.render(<App />, document.getElementById('app'));
Step 4: – Our “package. json” file will look as shown below.
File: “package. json”
{ "name": "react-js-style-demo", "version": "1.0.0", "description": "react js style demo", "main": "index.js", "scripts": { "start": "webpack-dev-server --hot --mode development" }, "author": "", "license": "ISC", "dependencies": {}, "devDependencies": { "babel": "^6.23.0", "babel-cli": "^6.26.0", "babel-core": "^6.26.0", "babel-loader": "^7.1.3", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "react": "^16.2.0", "react-addons-css-transition-group": "^15.6.2", "react-dom": "^16.2.0", "webpack": "^4.0.0", "webpack-cli": "^2.0.9", "webpack-dev-server": "^3.0.0" } }
Step 5: – Next, we need to create the “webpack.config.js” file with the following configuration content in it as shown below.
File: “webpack.config.js”
var config = { entry: './main.js', output: { path:'/', filename: 'index.js', }, devServer: { inline: true, port: 8080 }, module: { rules: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] } } ] } } module.exports = config;
Step 6: – Next, we need to create the following files with the given content in them at project root “react-js-style-demo” directory as shown below.
Application Execution
At the project root, execute the command “npm start”, the system will show below logs with compilation successful and application can be assessed from this URL “http://localhost:8080/”.
C:\Upwork\Abhishek - Eduonix\ReactJS\Workspace\react-js-style-demo>npm start > [email protected] start C:\Upwork\Abhishek - Eduonix\ReactJS\Workspace\react-js-style-demo > webpack-dev-server --hot --mode development (node:10824) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead Project is running at http://localhost:8080/ webpack output is served from / i 「wdm」: Hash: 5f43d36ed1baf88629a6 Version: webpack 4.0.0 Time: 20214ms Built at: 2018-3-17 14:21:12 Asset Size Chunks Chunk Names index.js 1.04 MiB main [emitted] [big] main Entrypoint main [big] = index.js [./Application.jsx] 3.16 KiB {main} [built] [./main.js] 510 bytes {main} [built] [./node_modules/react-dom/index.js] 1.33 KiB {main} [built] [./node_modules/react/index.js] 190 bytes {main} [built] [./node_modules/strip-ansi/index.js] 161 bytes {main} [built] [./node_modules/url/url.js] 22.8 KiB {main} [built] [./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 7.75 KiB {main} [built] [./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.58 KiB {main} [built] [./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built] [./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built] [./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.66 KiB {main} [built] [./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 77 bytes {main} [built] [./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.31 KiB {main} [built] [0] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./main.js 52 bytes {main} [built] [./node_modules/webpack/hot/log.js] (webpack)/hot/log.js 1.03 KiB {main} [built] + 53 hidden modules i 「wdm」: Compiled successfully.
Our React JS Web application at http://localhost:8080/ will look as shown below (notice the animation effect).