Why is React so popular among developers these days? If you are familiar with front-end development, by any chance, you have probably heard about React and seen dozens of tutorials that explain why with justification. As this tutorial aims for hands-on practice, I will try to make this as simple as possible to encourage you to start coding right away in React by giving core reasons.
Before getting hands-on experience, let’s understand some facts about React.
- React is a free and open-source JavaScript library for building fast and interactive user interfaces which are designed & maintained by Facebook and a community of developers.
- React is one of the fastest JavaScript libraries & frameworks out there. It has excellent performance at runtime and uses Virtual Dom to improve rendering performance. In addition, virtual DOM helps the library to detect the components that require re-rendering. You can find benchmark results for various libraries, frameworks here.
- React has an optional feature, JSX, which lets you create JavaScript objects with HTML syntax. In addition, it simplifies the creation of React tree nodes with attributes.
- Easy to learn and has an excellent documentation
- One-way data binding
- React is used for web applications development, and React Native framework is used for mobile applications.
How to start playing with React?
Online playgrounds for React
If you don’t want to bother with installations but only challenge yourself, then you are at the right place! Online playgrounds such as CodePen, CodeSandbox, or Stackblitz are great choices for you. They provide a simple Hello World template. Then, you can hack it as you wish.
Coding in your text editor
If you prefer to use your own text editor, you can also download this HTML file, edit it, and open it from the local filesystem in your browser.
Create your first React application
Make sure you have a recent version of node.js installed. Once installation is done, create a react app;
$ npx create-react-app my-first-react-app
#tip: Using npx instead of npm not to install packages globally!
Run “npm start” in the project folder to start the application;
$ cd my-first-react-app
$ npm start
Compiled successfully!
You can now view my-first-react-app in the browser.
Local: http://localhost:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
Congratulations! You can enjoy your first user interface from http://localhost:3000 in the browser. Feel free to add some interactivity or start a more complex application. Reactjs.org has an excellent practical tutorial that builds a small game for beginners who does not have any previous knowledge. If you are interested in concepts, then I will take you to the details page.
As Exceptionly, we have a series of “how to start coding … in 60 minutes” for various languages and frameworks. Find out how you can start Java or Python in 60 minutes!
English 
Arabic
5 Responses