How to create a React App

Create React App is one of the best ways to start building a new single-page application in React.

I. How to create a React App

Firstly, you’ll need to have Node >= 8.10 and npm >= 5.6 on the computer. To install Node, follow this link.

To check Node version, run this command:

node -v

To create a project, navigate to the directory where you want to store the project and run:

npx create-react-app my-app

Inside my-app directory, we can run several commands:

npm start
    Starts the development server.

npm build
    Bundles the app into static files for production.

npm test
    Starts the test runner.

npm eject
    Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!

Start the app by:

cd my-app
npm start

II. React App structure

Once we’ve change directories into the app, run ls -a to list the content including hidden files:

.		.git		README.md	package.json	src
..		.gitignore	node_modules	public		yarn.lock

Important files in React app:

  • /node_modules folder contains dependencies and sub-dependencies of packages used by the current React app

    If a /node_modules folder doesn’t exist when we download a repository from Github, we can run npm install to get it.

  • /public folder contains all our public files that will be served directly to the browser including index.html file

  • .gitignore: standard git file to determine which files and directories to ignore when committing code

  • /src folder contains all our React components.

    • App.js: a component

    • index.js: render App component to the DOM

      import React from "react";
      import ReactDOM from "react-dom";
      import "./index.css";
      import App from "./App";
      
      ReactDOM.render(
        <React.StrictMode>
          <App />
        </React.StrictMode>,
        document.getElementById("root")
      );
      

    <React.StrictMode/> means React does an additional check during development and will give warnings in the console if there’s anything wrong.

  • package.json: lists all the dependencies of the application and outlines all the settings for the React app

    • name: name of your app

    • version: the current version

    • "private": true: a setting to avoid accidentally publishing your app as a public package within the npm ecosystem.

    • dependencies: all the required node modules and versions required for the application.

    • scripts specifies aliases we can use to access some of the react-scripts commands

      {
        "name": "my-app",
        "version": "0.1.0",
        "private": true,
        "dependencies": {
          "@testing-library/jest-dom": "^4.2.4",
          "@testing-library/react": "^9.3.2",
          "@testing-library/user-event": "^7.1.2",
          "react": "^16.13.1",
          "react-dom": "^16.13.1",
          "react-scripts": "3.4.3"
        },
        "scripts": {
          "start": "react-scripts start",
          "build": "react-scripts build",
          "test": "react-scripts test",
          "eject": "react-scripts eject"
        }
      }
      

III. Starting a React App

Inside the project, run npm start or yarn start to begin the development server

Open http://localhost:3000 to view it in the browser. The page will automatically reload if we make any changes to the code.

We can edit src/App.js to make any changes. Save to reload.

For example, return “Hello World!” to the browser:

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <div className="content">
        <h1>Hello World!</h1>
      </div>
    </div>
  );
}

export default App;

Some other commands:

  • npm test or yarn test: Runs the test watcher in an interactive mode. By default, runs tests related to files changed since the last commit. -npm run build or yarn build: Builds the app for production to the build folder.

IV. React Developer Tools

Facebook created a Chrome extension called React Developer Tools to help with debugging React Apps

To open the React Developer Tools, first open Chrome DevTools (View > Developer > Developer Tools) and then select the “React” tab on the right.

You can modify rendered React components such as changing component values, calling methods, and testing interaction between components.