How to run and build a React app?

In this article, you will learn about running and building a react application locally.

Running react application

Creating a react project using create-react-app, the command for starting the application development server is as given below:

npm start

We need to run the command in the root directory of the project.

Let’s see what will be viewed when we run a default project. For now, we would be having an App component with the code as shown in the image below:

The JSX returned by the App component would be the landing page of the default project created. Running the npm start command would open the browser automatically with the URL http://localhost:3000/. If this URL doesn’t open automatically then try to visit the URL manually.

Visiting the URL, a page similar to the image below will be seen which indicates the successful running of the development server. The page will automatically reload if you make changes to the code.

The page that we are currently seeing is the JSX that’s returned by the App.js component. Leaving the project running and opening the App.js file in the editor of your choice that we are using (recommended editor VS Code) make some of the changes in JSX following by saving the file. Now open the browser window, the page will refresh and we will be able to see our changes.

We will see the build errors and lint warnings in the console if we have them in any of our files. For example, I have intentionally added “/” in the paragraph tag, which in turn should give us the error.

So, build errors and lint warnings will be printed there in the console. Let’s have a look at the error for our changes.

Building react application

The size of the development code wouldn’t be feasible to deploy due to its size, it would take a lot of time to render on the client side. To deploy the application, we would require the code to be minified to reduce the download times on the client’s browser.

The command to generate the production build directory is

npm run build

As this command runs successfully, you will be able to see a build folder in the project directory. Now you can deploy the contents of the build folder to any web server. the build command transpiles our source code into code that the browser can understand. It uses Babel for this and files are optimized for best performance. The build is minified and the filenames include the hashes.

As the command runs successfully, it gives the details about the size of files after optimization.

The structure of the build folder includes various folders that include the styles, js files and the assets required used our project.

Now our application is ready to be deployed.

Summary

In this article, you learned about running a react application and checking for errors and lint warnings in our console. We also learned about building our application for deployment. We also had a look at the directory created after building the application.