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:

Node https://nodejs.org/en/download/

VS Code https://code.visualstudio.com/

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.

VS Code

  1. At the top of the screen in the toolbar, click ‘Terminal’ and then click ‘New Terminal’

New Terminal

  1. A terminal pane will show up on the bottom of your window.

terminal pane

  1. Type in the following command: npm install -g create-react-app

create-react-app

  1. Type in the following command: npx create-react-app mytestapp

mytestapp

  1. This will take some time. Please wait until this process finishes

creating project process

  1. Once the process is complete, type in the following command: cd mytestapp

cd mytestapp

  1. Then type: ‘code -r .’ This will open the project you just created in your Visual Studio code window.

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!

Visual Studio window

  1. From the top ribbon menu, click on ‘Terminal’ and then click on ‘New Terminal’ from the drop-down menu.

New Terminal drop down menu

  1. A terminal window will appear at the bottom of the screen. Type in the command ‘npm start’

npm start

  1. In a few seconds a browser window will pop up, showing the following:

visual studio window popup

  1. This is your project running on your browser!!

react project running

  1. Go back to your Visual Studio Code window and from the left side of the screen click ‘src’.

Visual Studio Code window src

  1. Now click on ‘App.js’

app js

  1. Find the line shown in the screenshot below:

app js code

  1. Delete the content of this line.

app js delete line

  1. Now type the following in the space created when you deleted the content:

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

app js code 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.

save visual studio

  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.

react app

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!

Leave a Reply

Your email address will not be published. Required fields are marked *