React is an open-source JavaScript library that is used for building user interfaces specifically for single page applications.
React allows developers to create large web applications that can change data without reloading the page.
The main purpose of React is to be fast, scalable, and simple. It works only on user interfaces in the application. This corresponds to the view in the MVC template. It can be used with a combination of other JavaScript libraries or frameworks, such as Angular JS in MVC.
React JS is also called simply to React or React.js.
This article doesn’t teach you react, but it does give you the benefits on working with React.js as software engineer
simplicity
You can split up the code into files. You export code from one file. You basically export the function from one file since react uses ES6. you can reuse the code wherever you want. Before you react.js you couldn’t do something, and you needed to link your script at the end of your html.
React is a component base
Everything in react is a component. You might be wondering what does component means? Well, component is nothing but code that has your html, CSS and Js encapsulated. In the real world, it is just a code that you can use wherever you want within your application. There is a class component and functional component. With a functional component, it is a function that is easy and awesome to write.
React keeps the UI in sync in the state
This is the most important feature. The thing is that the state is the data belonging to your application. Whenever that data changes, the UI, which is visible for our eyes, will be automatically updated by react.js. The beautiful thing about react.js is the fact that we don't have to deal with the DOM anymore. In the typical JavaScript project, you need to grab the object using document.querySelector(class) and from there do whatever you want to update the UI. React just tells you to give him the state and how the state will look like when the state changes. Everything else related to the DOM (document object model) is handled by React.js. This is the most important feature you will get using React.js. It is helpful for large scale applications.
Hot reloading
Whenever you save and change the code in react, the server will automatically change and update the UI. you don't have to refresh the browser manually.
Single page application
With react, you can build an app that has a single app. Whenever you click a link, the page won’t refresh like in normal html, CSS and Js projects. We use the React-Router-Dom library to handle links within the React application.
Create-react-app cli quick and fast.
If you have built a large application using regular html CSS and JavaScript, you know the struggle when it comes to optimize your CSS, Js, images and so on. Most developers used to build their own started kit, which is just a tool using webpack and gulp to optimize your application before deployment. Today, there is no need to do all the complexity since the React Team has incorporated that tool into react-app. You can literally create a react app less than 5 mins just by installing the create-react-app without dealing with all the complexities behind. When it comes to the deployment, you just run the script ‘Npm run build ‘and everything is ready for deployment. Even if you are an angular or Vue developer, I will recommend people learn React.js in 2021 because most companies are using that library.
React is widely supported and it has lots of plugins.
The React Team constantly works on adding new features into React.js. They keep other features updated. Since React is an open source, there are tons of plugins people constantly write to make developer’s lifestyles easier. For instance, let’s say you want to add a slider in your application. Instead of building this slider from scratch. You can just download that package from react library using NPM or YARN.
Ability to import code between files.
You can split up the code into files. You export code from one file. You basically export the function from one file since react uses ES6. you can reuse the code wherever you want. Before you react.js you couldn’t do something, and you needed to link your script at the end of your html.
Thanks for reading this article, I hope you have enjoyed it.
if you like this content, please feel free to share.
If you are looking for collaboration, you can email me at fonoandy@gmail.com