Web Programming TutorialsLearn How To Style & Animate Elements in React Native

Learn How To Style & Animate Elements in React Native

Style & Animate Elements in React Native
ReactJS is a popular front-end JavaScript framework which is powered by Facebook. In the last article, we created our workspace in order to build a React JS based web application where we discussed the concept of React JS state in detail. In this chapter, we are to discuss the styling and animation of elements using React JS.

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).

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -