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.
- 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.