Perform the following steps to learn how to create a React project:

1. Similarly to the Angular CLI, React has its own application scaffold generator, Create React App. You can generate a new project by running the following command:

npx create-react-app integrate-react

2. You should see the following output:

Success! Created integrate-react at <path>/integrate-react
Inside that directory, you can run several commands:

 yarn start
 Starts the development server.

 yarn build
 Bundles the app into static files for production.

 yarn test
 Starts the test runner.

 yarn 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!

We suggest that you begin by typing:

 cd integrate-react
 yarn start

Note that create-react-app uses the Yarn package manager. However, you can still use the same commands with npm run if you wish; for example, npm run build instead of yarn build, and so on. Alternatively, you can install Yarn and use its commands. You can find out more about Yarn at https://yarnpkg.com.

3. Run the application with the start command to see if it's working:

cd integrate-react/
npm start

4. Run your preferred browser and navigate to http://localhost:3000. You should see the following screen with the animated React logo:

5. Press Ctrl + C to stop the server. I always recommend checking the package.json scripts after generating a project. They provide us with a clear understanding of what actions the project supports out of the box.

When generated with the Create React App application, the scripts section of the package.json file looks as follows:

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
}

6. The next step is to install the electron library as a development dependency. The following command should be familiar to you from the previous chapters:

npm i -D electron

7. Now, we need to make modifications to the package.json file. First of all, add the main entry so that it's pointing to the main.js file:

{
  "main": "main.js"
}

8. Next, we need to set the base path of the application so that it's relative to the index.html file. In Angular projects, you did this by modifying the index.html file. React, however, supports the homepage field in the package.json file.

9. This will make sure that all asset paths are relative to index.html. Now, you will be able to move your app from http://mywebsite.com to http://mywebsite.com/relativepath or even http://mywebsite.com/relative/path without having to rebuild it.
10. Modify the package.json file according to the following code:

{
  "homepage": ".",
  "scripts": {
    "serve": "react-scripts start",
    "start": "electron .",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
}

As you can see, we have added a homepage attribute, renamed the start script to serve, and introduced a new start one to launch the Electron shell.

11. The content of a minimal main.js file implementation is pretty much standard for every framework:

const { app, BrowserWindow } = require('electron');

let win;

function createWindow() {
  win = new BrowserWindow({ width: 800, height: 600 });

  win.loadFile('index.html');

  win.on('closed', () => {
    win = null;
  });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (win === null) {
    createWindow();
  }
});

12. When you build a React application, the production output goes into the build folder. This is why we need to load the index.html file from there:

function createWindow() {
  win = new BrowserWindow({ width: 800, height: 600 });

  // win.loadFile('index.html');
  win.loadURL(`file://${__dirname}/build/index.html`);

  win.on('closed', () => {
    win = null;
  });
}

13. Before we move on, let's verify that the application builds and runs fine. In the Terminal window, run the following commands, one by one:

npm run build
npm start

14. You should see the default application up and running on your desktop inside an Electron shell, as shown in the following screenshot:

You have successfully created an initial React-based Electron application. Feel free to make a backup so that you can use it as a template for future applications with the same stack.

Now, we need to wire the Electron shell with the locally running web server so that we can test our application while we develop it. This is called live reloading, and we are going to configure it in the next section.