M04 - Create React App

Introduction

You should use an integrated toolchain for the best user and developer experience. Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React.

It works on macOS, Windows, and Linux. You’ll need to have Node 8.16.0 or Node 10.16.0 or later version on your local development machine (but it’s not required on the server).

It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. Create React App doesn’t handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want.

To create a new project, give a below command to your command prompt:

npx create-react-app my-app
cd my-app
npm start

It will install a needed packages (react, react-dom, and react-scripts with cra-template) for react based project, which might take a couple of minutes.

Then open http://localhost:3000/ to see your gereated default app in running.

Generated project

Running above command will create a directory called my-app inside the current folder. Inside that directory, it will generate the initial project structure and install the transitive dependencies.

build is the location of your final, production-ready build. This directory won’t exist until you run npm run build.
node_modules is where packages installed by NPM will reside
package.json is used to store the metadata associated with the project as well as to store the list of dependency packages.
public is where your static files are. Files in the public directory will maintain the same file name in production, they will be cached by your client and never downloaded again.
src is where your dynamic files reside. Client downloads the most updated version of your file automatically. Production/Webpack will give a new unique name in production build.

Generated source codes

A few JavaScript files will be generated by default: index.js and App.js. index.js will be the main file where all the app loading begins. It will define React rendering and uses App component.

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Note

StrictMode is a tool for highlighting potential problems in an application. Strict mode checks are run in development mode only - they do not impact the production build.

App component is normal function based component in React. It has a few HTML based elements and styles to generate React animation and text.

App.js

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Now this App.js defines App as a ES6 module (line 25) and it can be imported in other JavaScript files (now inside index.js).

Note

You can modify App.js source code, save and web page is updated automatically. Nice!

Create production build

After you have finished your coding, you need to generate a production build of your project.

1	`npm run build`

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes. Your app is ready to be deployed to your web server.

Selecting a template

You can optionally start a new app from a template by appending --template [template-name] to the creation command. If you don't select a template, project will be created with a base template.

You can find a list of available templates by searching for cra-template-*≈ on npm.

To use our provided TypeScript template, append --template typescript to the creation command.

1	`npx create-react-app my-app --template typescript`