If you're new to React and have been wondering how to get started, this tutorial is for you. We'll be showing you how to create a React app in just a couple of minutes using a handy tool called "create-react-app." By the end of this guide, you'll have a basic React app up and running, and you'll have a better understanding of the key concepts and components that make up a React app. Let's dive in!

Creating our Folder

1. To begin, navigate to the directory where you want to create your React app and create a new folder. You can name the folder whatever you like.

   

2. Right-click and select open with visual studio code

   

   Opening a new terminal

3. Click on the "Terminal" menu located at the top of the screen

4. Select "New Terminal" from the drop-down menu.

5. This will open a new terminal window at the bottom of the screen, where you can enter commands

   

6. We will be creating our react app from the terminal

7. To create a new React app, use the command npx create-react-app [app name], where [app name] is the name of your app. For example, if you want to create an app called navbar, the command will be npx create-react-app navbar.

     npx create-react-app (name of your app)
     //npm create-react-app navbar
   

   your terminal will look like this

   

   And the final result after installation

   

8. After creating a new React app using the command npx create-react-app [app_name], you will need to navigate to the new app's folder in your terminal.

   You can navigate to the new app's folder by running the command cd [app_name]. For example, if you named your app "navbar", the command would be cd navbar.

   This will change the current directory in the terminal to the new React app's folder.

9. Once you are inside your app folder, you can start the development server by running npm start

   

10. The command will compile the code and launch a development server when you run it. It could take a few seconds to finish this process.

    Your default browser will launch automatically after the server is running and show the app at http://localhost:3000. By manually entering this address in the browser, you can also launch the app.

    You should see "Welcome to React" or something similar on the default react page. This indicates that your React application is active. From this point, you can begin developing your app and modifying the project's files. You can see the results of your work right away because the changes will be reflected in the browser in real-time.

    

11. Now that your app is running, you can begin editing it to suit your tastes.

    You might want to start by changing the text that is shown on the browser. Editing the code in the "src" folder will allow you to do this.

12. In your project structure, you have /public and /src directories, along with the regular node_modules, .gitignore, README.md, and package.json.

    

    In /public, our important file is index.html. The /src directory will contain all our React code.

    You can delete all the files out of the /src directory, and we'll create our own boilerplate. We'll just keep index.css , index.js , app.js .

13. Edit your index.js to look just like this.

    

14. Edit your app.js to look just like this

    

15. After making the required changes to your React app's code, you should be able to see the updated text "MY FIRST REACT APP" on the browser.

    If you do not see the changes, try refreshing the browser page

    It's important to note that any changes made to the code while the development server is active will automatically be reflected in the browser, allowing you to see the outcomes of your work in real-time.

    

Conclusion

After successfully developing and customizing your first React application, you can now move on to learning about additional React features and functionalities. You can find a wealth of online tools, including guides, forums, and documentation, to support you as you continue working with React.

Keep experimenting and happy coding!

I'd love to connect with you via Twitter | LinkedIn | GitHub |