Get acquainted with ReactJS for beginners. If you want to know and learn React, of course, you have to understand what ReactJS is? Why do you have to learn React? Is ReactJS Frontend or Backend? And preparation for creating simple applications using React. Let us learn together, so what I have learned and understood enough, I write here. It may be useful.
Table of Contents
What is ReactJS?
ReactJS became the most popular framework and was widely used in 2020. At the time this article was written (2020), ReactJS was ranked highest among other Javascript Frameworks.
ReactJS is a library created by Facebook to make the UI (user interface) on the Web (and also mobile). So we can say that ReactJS is used to develop web application interfaces.
Many people call it a Framework but technically, React is not a framework, but rather a Library for making UI.
ReactJS is the composable user interface library, which means we can create various UI that divide into several components.
ReactJS was initially created by Jordan Walke, who is a Facebook employee. He released the first prototype of ReactJS under the name “FaxJS” and was inspired by XHP.
Facebook realizes, their applications are increasingly complex. Just imagine, many parts must be continuously updated, such as news feeds, chat lists, chat boxes, etc. in realtime.
Because manipulating the DOM requires an abundant resource and ReactJS also present to provide solutions with VirtualDOM, which is claimed to be faster.
React began to be used on Facebook to create a News Feed page in 2011 and then on Instagram in 2012. And in 2013, React was going to the public.
Why do you need to learn ReactJS?
You need to know the benefits of using ReactJS before learning more.
1. Fast and Efficient
React has a component-based concept, so React only needs to render resources related to data changes, no need to render all resources.
ReactJS creates a Virtual DOM to speed up changes to the DOM. All operations are carried out in the Virtual DOM; after the process is complete, ReactJS writes the changes in the DOM.
2. JSX
JSX is a Javascript extension that React uses to write HTML in Javascript.
3. Reusable
This is one of the advantages of React. We have made components that we can use many times when needed. This can shorten the time and drain existing resources.
4. Scalable
ReactJS can handle very well a large scale program that can display very complex data changes.
5. Flexible
By learning just one library, we can create Web, Mobile, and Desktop applications
6. Following the latest programming trends.
This is my main reason for learning ReactJS. I have been using JQuery for more than 10 years, and in the future, JQuery will be left behind with Modern Javascript frameworks.
If you need to compete with younger developers (When this article was written, I am 34), we must be brave enough to learn something new 🙂
How does React work?
React works based on components. for example like the following picture
[react component image]
The advantage is we can focus more on each Component in an involved web page. And each Component can be given logic so that the Components can work in realtime without waiting for reloading / refreshing web pages.
Preparations for Learning ReactJS
As usual, there are several things that we must prepare to create the ReactJs application.
1. Browser
I recommend the Chrome browser.
2. Text editor
I recommend Visual Studio Code.
3. The latest version of Nodejs and NPM (I use NodeJS version
12.16.2 and NPM version 6.14.4)
Note: if you want to learn React, then you must understand Javascript, please determine the Javascript tutorial for beginners here.
Creating ReactJS Applications
Install the Create React App
After all the initial preparation is complete, the next step is to install create-react-app using the following npm command:
1 | npm i -g create-react-app |
Next, you can check whether it is installed on the node using the following command:
1 | create-react-app -v |
Creating new ReactJS project
1 | create-react-app react-hello-world |
The above command will create a ReactJS project called react-hello-world.
Run the ReactJS Project
After completing the project, the next step is to run the project to see the results. Run the following command :
1 2 | cd react-hello-world npm start |
A browser tab will open containing the project that has been run with the address https://localhost:3000
Until this step, we successfully created a new ReactJS project
Before learning more about React, we will try to make simple components to quickly understand how reacts work. See the following playground.
Explanation:
– In the example above, I created a container component in which there are an element name and description.
– Then I create an App component that is used to render as many container components as we want.
– To fill container components dynamically, we can use the props function (we will discuss in another article)
Conclusion
To successfully master React, you must understand very well about:
1. ES6
JavaScript foundation before learning React is essential, especially ES6. Get free Javascript tutorial here
2. Learn Fundamental React.
Understand the workings of components, communication between components, lifecycle & data fetching and writing components in JSX
3. Learn the Route
The route is used to navigate pages in the application.
4. Learning Data Management
As applications become more complex, there are more components. Maybe this is the right time to use data management. At the moment, the best data management is Redux.
5. Mastering modern development tools
Learn development tools that are more modern and ready to be used for production, such as:
- Package Manager.
- Bundler.
- Editor.
- Browser extensions like React dev tools & Redux devTools
React provides all the conveniences a programmer needs in developing an application that is lightweight, fast, and easy to use. There is a React Native framework that we can use to develop Android and IOS applications at the same time by using the JavaScript language. Happy learning ReactJS
Leave a Reply