Hello viewers this tutorial is about using jQuery in react component.
For building large-scale application in react.js sometimes we need to use some
kind of jQuery functionality or we may need to use jQuery plugins. There is a
way out we can use jQuery in React JS.
Let's start from scratch.
Firstly, Create React App is the best way to start building a new react single page application.
This is introduced by Reactjs, Facebook.
Simply run this command "npm install create-react-app" in your terminal.
After the installation of create-react-app
we can just start building our application
so anywhere in our document structure we
can install the act application now. Let's name our application jquery-react.
Simply putting after create-react-app our application jquery-react will be ready to run
So it's done
We can change our directory to jQuery react. To start the application, we just
type "npm start" our application will be running in localhost 3000.
So this is our react application. Let's open the application folder in sublime
Our "jquery-react" application is in document we just installed it by create react app
Let's open the folder
As we want to use jQuery in our application so obviously we need to
download jQuery.
To download jQuery in the application we first move to the directory.
We just run the command "yarn add jquery".
jQuery we will be downloaded in a moment
Let's import "$" from jQuery.
To use jQuery in our project you must import
"$" from jQuery.
Another thing is needed as we will manipulate our Dom with jQuery
That is findDomNode. findDomNode is available in "react-dom".
"react-dom" was automating download by create-reac-app.
So we need not to download it we just need to import findDOMNode from react-dom.
Let's check what is going in a browser.
Let's think we will slide toggle this "welcome to react" banner by a button.
Let's create that button
Let's call it hide banner . This is our Hide Banner button
The header we want to
hide let's put a reference on here. Let's call the reference "Toggle".
We need to create a function that will handle the toggle functionality.
Let's call the function handle toggle .
Let's declare a constant "element" .
"this.refs.toggle" So we are just targeting the header with this reference "toggle".
As we have imported "$" from jQuery so we can just use it and we can
use like slideToggle function from jQuery
So we have created a function handleToggle and
it has jQuery functionality slideToggle on this hide banner button.
We want to add the functionality onclick on "hide banner".
We will hide the header and for the second click it will show over
So we are done.
Let's check the code. Well it's done.
So clicking on the hide banner we are hiding and showing the banner.
And this total part is done by jQuery
That's all for today.
Good Bye :)