React Js
In this blog you are able to learn what is react and how we can use it in projects.
What means by React?
ReactJS is a JavaScript package that allows you to make declarative, helpful, and adaptable user interface components. It’s a free and open-source front-end library that simply manages the view layer of an application. Facebook designed and maintains it, and it’s later used in Facebook products like Instagram and WhatsApp.
Why We Use React JS
Because of follow-up reasons we use this React Js
· Faster than DOM
· Use virtual DOM
· Improve Speed of the App
· Easy to maintains long code snippets
· Readability (Because of components)
· Can be utilized on both the client and server side, as well as in conjunction with other frameworks.
Features of Reacts
ReactJS is quickly becoming the most popular JavaScript framework among web developers. It is an important part of the front-end ecology. The key characteristics of ReactJS are depicted in the diagram below.
Lets See How to create New Project Using React
There are two approaches to build up an effective ReactJS application.
1. Using “create-react-app” command.
2. Using the npm Commands
We’ll use the create-react-app command to make a project here. You’ll need Visual Studio Code for that, which I find to be really user-friendly. NodeJS and NPM are the platforms required for developing any ReactJS application before we begin. NodeJS and the NPM package manager must be installed.
Create a folder called “MY_REACT_APP”
Open the folder in VS code and then start the terminal.
Then type following command and execute in terminal.
npx create-react-app jtp-reactapp
After that you will be able to see following folder and file structure was created
After you’ve finished the installation, enter the following command to start the server.
To begin, use the cd command to get to the folder where we were created. (For example, cd MY_REACT_APP)
Then run the following command: npm start
You will be able to see following window by following above commands.
The root directory of a React application contains various files and directories. Here are a few examples:
Get Dilini Navodya’s stories in your inbox
Join Medium for free to get updates from this writer.
1. SRC :
App.css, App.js, App.test.js, index.css, index.js, and serviceWorker.js are all included. The App.js file is always in charge of showing the React output screen.
2. Node_modules :
This includes the React library as well as any additional third-party libraries required.
3. Public:
This contains the application’s public assets. It includes the index.html file, which React will mount by default on the div id=”root”>/div> element.
4. package.json :
This contains various metadata for the project. It provides information to npm, which enables it to detect and manage the project’s dependencies.
5. package-lock.json :
This is generated automatically whenever the node modules tree or package.json are modified by npm package. It isn’t possible to publish it. If it is found somewhere other than the top-level package, it will be disregarded.
6. README.md :
This provides documentation on React subjects to read.
Let’s See what the advantages and disadvantages are using ReactJs
React Components
Components are the fundamental building pieces of a React application. It simplifies the process of creating user interfaces. Each component occupies the same physical space, but they operate independently of one another before merging into a parent component that will serve as your application’s final user interface.
React components each have their own structure, methods, and APIs. They can be used again if necessary.
There are two sorts of components in ReactJS. They are,
1. Class Components
2. Functional Components
Conclusion
So far, we’ve covered the fundamentals of React Js, as well as their applications, advantages, and disadvantages. You’ve also learned how to start a new React Js project.
Thank you for taking the time to read my essay; I hope you now have a better understanding of React Js.
Thank You!
