How to add wowjs in reactjs?

Hello to all, welcome to therichpost.com. In this post, I will tell you, How to add wowjs in reactjs?

Post Working:

Friends in this post, I am showing you wowjs working into my reactjs application and I have added bootstrap for application good looks. For working you can check the above video.

For reactjs new comers, please check the below link:

Reactjs Basic Tutorials

Friends here is the code snippet and please use carefully:

1. Firstly, we need fresh reactjs setup and for this, we need to run below commands into our terminal and also we should have latest node version installed on our system:

You can avoid this if you already have react project

npx create-react-app therichpost

cd therichpost

npm start

2. Now we need to run below commands into our project terminal to get wowjs and bootstrap libraries:

npm install bootstrap --save

npm install wowjs

3. After all above set, now we need to add below code inside our src/App.js file or we can replace src/App.js code with below code if you are doing fresh project:

import React from 'react';

import './App.css';

//Calling bootstrap
import 'bootstrap/dist/css/bootstrap.min.css';

//Calling WOWjs
import WOW from 'wowjs';


class App extends React.Component {

// Defining WOW 
componentDidMount() {
  new WOW.WOW({
    live: false
}).init();
}
  
render() {
  return (

    //Wow js animation in HTML
    <div className="container text-center">
      <div className="jumbotron bg-sky">
      <h1>ReactJs</h1>
      <p>Animmations with WOWjs</p> 
    </div>
      <div className="row">
        <div className="col-sm-4 wow bounceInDown center" data-wow-delay="0.5s">
        <p className="circle bg-yellow">very ES	</p>
        </div>
        <div className="col-sm-4">
          <img className="wow fadeInDown img-thumbnail" data-wow-delay="0.5s" src="https://wowjs.uk/img/wow-logo.jpg" />  
        </div>
        <div className="col-sm-4 wow bounceInDown center" data-wow-delay="0.5s">
        <p className="circle bg-yellow">very ES	</p>
        </div>  
        <div className="col-sm-4 wow bounceInUp center" data-wow-delay="0.5s">
        <p class="circle bg-green">3 KiB only	</p>
        </div>
        <div className="col-sm-4">
          <img className="wow fadeInDown img-thumbnail" data-wow-delay="0.5s" src="https://wowjs.uk/img/wow-logo.jpg" />  
        </div>
        <div className="col-sm-4 wow bounceInUp center" data-wow-delay="0.5s">
        <p class="circle bg-green">3 KiB only	</p>
        </div>  
        <div className="col-sm-4 wow bounceInRight" data-wow-delay="0.5s">
        <p class="circle bg-red">so impress</p>
        </div>
        <div className="col-sm-4">
          <img className="wow fadeInDown img-thumbnail" data-wow-delay="0.5s" src="https://wowjs.uk/img/wow-logo.jpg" />  
        </div>
        <div className="col-sm-4 wow bounceInRight" data-wow-delay="0.5s">
        <p class="circle bg-red">so impress</p>
        </div>  
      </div>
  </div>
  );
  
}

}
export default App;

4. Now we need to add below css code into our src/App.css file:

.circle {
  margin: 25px 10px;
  width: 200px;
  color: #fff;
  font-size: 32px;
  line-height: 200px;
  text-align: center;
  height: 200px;
  border-radius: 100px;
}
.bg-yellow {
  background: #ffcc35;
}
.bg-green {
  background: #5bd5a0;
}
.bg-red {
  background: #eb3980;
}
.bg-sky{
  background-color: skyblue!important;
}

5. Now we need to call below style CDN into our projectname/public/index.html file inside head tag:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">

This is it friends and if you have any kind of query or issue then please do comment below.

Friends, I make post to help other and easy to understand.

Jassa

Thanks