Nowadays, React is one of the popular libraries to develop user interfaces (UI) . It had developed by the Facebook couple of years back although they open-sourced the codebase for the enterprise use. A lot of brands such as Netflix, the New York Times, Pluralsight, Facebook, Instagram, TikTok, Snapchat, Uber, Reddit, Flipboard, Onedrive, DropBox, AirBnb, WordPress etc. is using greater advantages of ReactJs completely or partially.
If you’re very new to React, you may wonder where to start. Hence this article describes small steps you can follow to start your first React application.
1. Download NodeJs from here and install.
npm --v and
npm (Node Package Manager) and
npx (Node Package Executer) with
--v command will print version numbers. It indicates that you have installed NodeJs successfully.
3. Download Visual Studio Code from here and install.
npx create-react-app my-react-app in the Command Prompt.
You can create the react application using above command. ‘my-react-app’ is the name of the directory which is used to store related files. Give it a moment to load all the necessary packages. Later you will see the successful message as the second image.
5. Run your application.
First, go inside your newly created directory (my-react-app) using
cd my-react-app and then run
npm start. It will automatically start and run your react web application on the web browser. Otherwise, you can use the URL which is inside the green colour square in the below image.
This is how your first react application looks like,
6. Stop your application using Command Prompt
To stop the application you can press
Ctrl + C and it will ask you, whether to terminate or not. Type
Y and press enter to stop the session.
7. Explore the code
Since you have already installed the Visual Studio Code, you can use
code . to open your application in the Visual Studio Code to explore the code. Now it is time for you to go through the application files and try to understand how the application has written in React.
Yes! you’ve already done something with React. Though these are tiny steps, this would be the first step for a great journey.
‘create-react-app’ is a boilerplate with all the necessary libraries, packages and configurations that help you to start your React development easily. You don’t have to think about any configurations or environment setup because the boilerplate does everything for you.
Don’t stop here. Just walk through code files, try to change something and see the results. Happy coding guys!