React Web App - Some initial notes

Create React App is an officially supported way to create single-page React applications.

There are three methods to create a new react app

1. npx create-react-app my-app
2. npm init react-app my-app
3. yarn create react-app my-app

Once the project is built, can do the following to get it running

yarn start

To build the product,
yarn build

Folder structure is like below

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

For the project to build, these files must exist with exact filenames:

public/index.html is the page template;
src/index.js is the JavaScript entry point.
You can delete or rename the other files.


You may create subdirectories inside src. For faster rebuilds, only files inside src are processed by Webpack. You need to put any JS and CSS files inside src, otherwise Webpack won’t see them.

You can, however, create more top-level directories. They will not be included in the production build so you can use them for things like documentation.

Updating to new release

Create React App is divided into two packages:

create-react-app is a global command-line utility that you use to create new projects.
react-scripts is a development dependency in the generated projects (including this one).

When you run npx create-react-app my-app it automatically installs the latest version of Create React App.

Create React App creates the project with the latest version of react-scripts so you’ll get all the new features and improvements in newly created apps automatically.

In most cases bumping the react-scripts version in package.json and running npm install (or yarn install) in this folder should be enough, but it’s good to consult the changelog for potential breaking changes.



References:
https://facebook.github.io/create-react-app/docs/getting-started