Learn How To Style & Animate Elements in React Native

0
179
Style & Animate Elements

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.

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

File: “/css/style.css” is the stylesheet used by our web application for styling and automation.

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

File: “main.js”

Step 4: – Our “package. json” file will look as shown below.
File: “package. json”

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”

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/”.

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