Initializing a React App

Whenever a new visual project is begun, a graphic designer sits down and chooses a palette of colors that will be used for headings, backgrounds, buttons, and so on. You decide to make a React app for assembling such palettes. Pal sounds like a good name for your app.

You first install Node.js on your local machine, preferably using NVM, as described earlier. A React app starts its life as a Node.js project. This should sound like a strange idea, because the Node.js projects you made earlier did not run in the browser. A React app will. When you are ready to deploy a React app to a web server, you will run a build command that turns the app into a standalone website made only of HTML, CSS, and JavaScript. It will have no dependencies on Node.js.

The easiest way to begin a new React app for Pal is to run this command in your terminal:

npx create-react-app pal

You run this in the terminal of your local machine, not your remote web server. All the designing of a front-end React app takes place on your development machine. The npx utility reports that it doesn't know the script create-react-app. You agree to install it.

You inspect the contents of your new directory by running these commands:

cd pal
ls

The public directory contains the starting index.html that will load in your React-powered content. You probably won't add much to this directory for the time being. Instead you will put scripts, stylesheets, and images in the src directory. Everything in src gets compiled down to a compact and optimized form when you build your React project. Everything in public stays uncompiled.

In package.json, what commands have shortcuts defined in the scripts object? To view a React app in your browser, you run this command:

npm start

This opens a live preview. If you edit a file and save it, the browser will automatically reload the project in the browser. Open src/App.js and make some changes. Do you see the page change?

The sample project has too much code in it. You decide to strip out some things to reduce the number of moving parts. The first step is to remove some files from src:

cd pal/src
rm setupTests.js reportWebVitals.js logo.svg App.test.js

The live preview will break when you remove these files. You remove the dependencies on reportWebVitals from index.js, leaving just these lines:

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')
);

You remove all the rulesets from App.css, leaving just an empty file.

You remove most of the content defined in App.js, leaving just these lines:

import './App.css';

function App() {
  return (
    <div className="App">
      Hi.
    </div>
  );
}

export default App;

With the dependencies removed, you have a simpler project and the preview works again.

You notice that the title of the web page says React App. You change this in public/index.html to the name of your app:

<title>Pal</title>

As a last touch, you decide to replace the stock React favicon with something more fitting for a palette designer. You add this SVG icon as a new file named public/favicon.svg:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" id="svg" viewBox="0 0 100 100">
  <rect fill="rgb(255, 127, 0)" width="47" height="47" x="1.5" y="51.5" />
  <rect fill="rgb(99, 148, 236)" width="47" height="47" x="51.5" y="51.5" />
  <rect fill="rgb(220, 19, 59)" width="47" height="47" x="51.5" y="1.5" />
</svg>

In index.html, you change the link tag to load favicon.svg instead of favicon.ico. SVG favicons are not as widely supported as ICO. Safari, in particular, doesn't support them. But you decide to worry about the proliferation of favicon formats later.