Whats is ReactJS?
React is a JS library that is used to design or build the interface of web and mobile applications. It builds a faster and interactive user interface. ReactJs has components that divide or page divisions into multiple layers or parts.
The development framework is designed on the basis of MVC. Also, it makes our HTML code reusable. there are more many features are available in reactJS. If you are new let’s have the look at the reactJS tutorial.
- The whole React Js works on the principle of the component-based front end.
- It has a great community over the internet.
Why learn React JS?
Now, the question is when we have HTML, CSS, and JS at the UI layer. So, why one should learn React JS. The answer we will see here.
- The main reason for learning lies in the fact that React JS allows us to create reusable UI components.
- It helps us to create big application can change data without having to reload the web page. (for eg, go to youtube and navigate to different links and check whether the page is getting loaded or not)
- You can integrate React JS with Spring Boot Application also. (this we will see in the coming article :-))
- It has a smooth and faster performance due to virtual DOM(Document Object Model is the logical structure of the document).
- There are lots of websites such as Netflix, Facebook, Dropbox, Yahoo mail and etc. using React JS.
Create the first ReactJS application.
- Create a folder “REACTJS TUTORIAL”.
- Open your ide VsCode.
- Open the newly created folder into VsCode.
- Open the terminal and Enter the command
npx create-react-appto create a new react application
npx create-react-app reactexampl
- It will create a sample application with all the required folders and structures.
Run ReactJS application.
Move to terminal and enter a command and move to application folder
cd app_name and enter
You can now view reactloginexample in the browser. Local: http://localhost:3000 On Your Network: http://192.168.0.107:3000 Note that the development build is not optimized. To create a production build, use npm run build.
Open any web browser in your machine and navigate to the URL http://localhost:3000 It will launch the application.
ReactJs Project architecture
If you see the above ReactJS application architecture image. There are many autogenerated folders. Let’s understand the use of them one by one.
node_modules folder into ReactJS application
node_modules is a folder that contains all the npm libraries that are required for the application. when we enter
npm install _lib_name. All the local installations will store in the node_modules folder.
public folder into ReactJS application
This is an optional folder that is created automatically when we create a new react app. public folder contains HTML, images, and other external resources of the application.
src folder into ReactJS application
src is the main playground for the ReactJs developer where we design MVC architecture and start the development it contains many files by default when we create a first react app.
package.json is the most important file that contains dependencies of the applications. if you know java development it is the same as pom.xml in the java maven project. it has some command dependencies like
"react", "react-dom", "react-scripts"
History of React JS
Before getting started with React JS in-depth, first, let us see the history of the development of React JS library. The man behind the awesome React JS library is none other than Jordan Walke who was a Software Engineer at Facebook.
- React JS was first deployed on Facebook’s News Feed in 2011.
- Later, Instagram deployed React JS in 2012.
- With time, Facebook decided to make it an Open Source in May 2013.
- Later many versions came of React JS such as React 16.0, 16.8. The current version is React v17.0.
To know more about the advancement in the version of React Js you can check the GitHub link https://github.com/reactjs
Features of React JS
Now, let us see the features of React JS due to which it has become a popular framework nowadays.
- It uses a virtual DOM structure instead of real DOM in the memory, which again increases the performance of an application.
- It consists of components that are reusable, nested, and so on.