Skip to content

Starting with React.js

To be able to start working on our client application we will need to open it inside Visual Studio Code.

To do that, we can open Visual Studio Code, click "Open folder", navigate to our "C:/todo_project/client-app" directory and click "Select Folder". This should open your project inside VS Code. On the left side you will see the opened directory with the list of all files and folders it contains.

How to start our application in browser?

Simple, you need to execute start command using npm. In Visual Studio Code in the Toolbar menu you navigate to "Terminal" tab and click "New Terminal". This should open you a new terminal inside VS Code at the bottom and point to your current directory "C:/todo_project/client-app", you will see it.

React Development Environment

Now, lets start our application by executing the following command in your opened terminal

npm run start

You should wait a moment and your app will be up and ready. By default React app use port 3000 but if that port is already used, your application might run on a different one. No worries, you will be able to see where it runs in the Terminal. Something like this should be written after it runs successfully:

You can now view my-app in the browser.

  Local:            http://localhost:3000        
  On Your Network:  http://192.168.0.18:3000

In most cases, it will automatically open your app in default browser. If not, you can just open http://localhost:3000 in your browser and you will be able to see default React web application running there.

Awesome, you successfully run your React application.

Info

React uses hot reloading to keep the app running and to inject new versions of the files that you edited at runtime. So any file we edit and save, it should reload our application and show the newest version in our browser.

Cool, right?

React.js Application Cleanup

There are some files that we will not need from the React setup so we can delete them.

Feel free to delete the following files from the ./src folder:

  • remove App.test.tsx

  • remove all content from App.css

  • remove content from App.tsx

  • remove React logo - logo.svg

Last update: March 28, 2022