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.
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.
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
remove all content from App.css
remove content from App.tsx
remove React logo - logo.svg