For now React is the second most used web development framework globally, with 42.62% usage.
- Dropbox (HelloSign)
- It makes the development more easier and more easier to understand the code .
- It has a massive developer tools that could help you throw you’re journey.
- Easier to learn , simple to understand and it has a good documentation in the internet.
- It has the biggest community that could help you and answer you’re question.
- It is search engine friendly.
- His updates are not friendly, some time react updates may broke codes written in previous version .
- His official documentation are not very clear .
- Doesn’t support routing which force you to use a library like react-router-dom to solve this problem.
React has cool features to end-up with a great UI for your application, which make sense that it the most used Front-End tool, let see some of those features:
- Virtual Dom
- Component-Based Architecture
- Data binding
Virtual DOM is one of the amazing features in React.js.
After rendering the original DOM, React.js can recreate a virtual DOM that has the updated version of the UI. A virtual DOM is a reflection of an initial DOM in this way. it will compare the original DOM with the Virtual DOM to render only the changes instead of rendering all the page. Which make it faster.
React project could be split into small pieces, each pieces will contain his own logic, which mean each part of the project could be created in separate file, making debugging more accessible, and each component has its own set of properties and functions.
- Re-usability: react component could be used more than once in all the project.
- Nested Components — A component can contain several other components.
- Passing properties — A component can also receive props. These are properties passed by its parent to specify values.
Hooks introduce themself in the React 16.8 version. With hooks we don’t need to use classes component anymore. Hooks are the functions which “hook into” React state and lifecycle features from function components. It does not work inside classes.
When we use Hooks, inside your components you need some state to render a text, so in this case you need to use the useState hooks, it’s similar to this.state in react
- Only call Hooks at the top level. Do not call Hooks inside loops, conditions, or nested functions. Hooks should always be used at the top level of the React functions. This rule ensures that Hooks are called in the same order each time a component render.
You got so far so you are interested in React, so let me help how to create a react project. In order to do this, we need to have **npm **installed in our machine.
if you don’t have npm you could download node.js and it will download both npm and node.js.
to verify that you have npm installed press the following command in the terminal, if it show you the version of npm then it’s all setup.
after downloading npm, and in order to create an empty project run this command in the terminal
npx create-react-app@latest my_app
Change my_app with the name of your project. Make sure that the name contains only simple letters otherwise, you might get an error. After running the command, it will take few times to finish, after that you will have a folder with the name you mention, and it has all the files needed.
Now go inside that folder and run the following command in terminal
Now you have your project running under http://localhost:3000, open your favorite browser and hit the link you should see something like below, if not make sure that you followed the steps above correctly.
Congratulations! you have created your first React app. You can open the project folder in your favorite IDE and start editing.
So, didn’t you find this amazing and fun to learn, so what do you wait for to start learning react?