Start your first React application using ‘create-react-app’

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.

2. Run  npm --v and npx --v

npm (Node Package Manager) and npx (Node Package Executer)  with --v command will print version numbers. It indicates that you have installed NodeJs successfully.

reacttJs_1

3. Download Visual Studio Code from here and install.

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

reacttJs_3

reacttJs_4

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.

reacttJs_5

This is how your first react application looks like,

reacttJs_6

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.

reacttJs_7

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.

reacttJs_8

reacttJs_9

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!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s