From Zero to a React App in 5 Minutes

A quick and efficient guide for users who want to get their first application running locally with minimal effort and time using create-react-app

What is React?

React is a powerful front-end library developed by Facebook to accelerate web development with powerful new capabilities such as Virtual DOM and JSX.

Problem Overview:

Despite the overwhelming popularity of React, users are often facing a common problem. Users often find the task of creating a  new application using the React app to be cumbersome.

In this blog, we will go over how you can get your first application running locally within minutes without any hassle at all. This will allow you to quickly spin up all the tedious boilerplate and focus on learning this awesome tool.

Prerequisites:

The following are the prerequisites for successfully creating a new application with React:

 

 

Steps to Get the Application Running

 

  1. Bring up the VS Code. Your window might look a little different but that is okay. All my instructions will work regardless.
  1. At the top of the screen in the toolbar, click ‘Terminal’ and then click ‘New Terminal’
  1. A terminal pane will show up on the bottom of your window.
  1. Type in the following command: npm install -g create-react-app
  1. Type in the following command: npx create-react-app mytestapp
  1. This will take some time. Please wait until this process finishes
  1. Once the process is complete, type in the following command: cd mytestapp
  1. Then type: ‘code -r .’ This will open the project you just created in your Visual Studio code window.
  1. You will see a similar screen like the one shown in the screenshot below. Stay strong. We are almost done!
  1. From the top ribbon menu, click on ‘Terminal’ and then click on ‘New Terminal’ from the drop-down menu.
  1. A terminal window will appear at the bottom of the screen. Type in the command ‘npm start’
  1. In a few seconds a browser window will pop up, showing the following:
  1. This is your project running on your browser!!
  1. Go back to your Visual Studio Code window and from the left side of the screen click ‘src’.
  1. Now click on ‘App.js’
  1. Find the line shown in the screenshot below:
  1. Delete the content of this line.
  1. Now type the following in the space created when you deleted the content:

‘I created my first app! Hello World!!!’

  1. After this, navigate to the left top of the screen and click ‘File’ and then click on ‘Save’ from the drop-down menu.
  1. Go back to your browser window, you should see your change refresh live! Congrats – you created and edited your first react app! This is a huge accomplishment.

Conclusion

There you have it. You have created and edited your first react application and got it running locally. You are now prepared to develop and code a full-fledged react application using this tutorial and continue your journey. If you have any confusion or questions about the process, leave a comment below!

Go forth and React!

If you have any question or queries, do not hesitate to reach out to us!