Create React App
This is the batteries included way to create a new React project.
The simplest way to get started on a new React project is to use create-react-app to scaffold out a standard project folder structure. The other build tools that you will need like Webpack and Babel are automatically installed and configured with sane default settings.
It is a very popular tool with over 147,000 weekly downloads on NPM.
Read the full documentation on the project's official website.
# Lets try it out
Using CRA, initialize a new React project called "my-sample-app".
# Use `npx` to get the latest version of `create-react-app`
npx create-react-app my-sample-app
cd my-sample-app
yarn start
TIP
Using npx to run create-react-app means that you will always be getting the latest version of React and the whole dependency tool-chain.
This wil create a new folder called "my-sample-app" in the current working directory. This new project folder will have a structure similar to this:
my-sample-app
├── .gitignore
├── README.md
├── package.json
├── yarn.lock
├── node_modules
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js
All of the build tools and related configuration are tucked out of the way in the node_modules folder. They are invoked via the "scripts" defined in package.json.
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!
# Start the dev server
cd my-sample-app
yarn start
You should now see confirmation in the terminal ...
Compiled successfully!
You can now view my-sample-app in the browser.
Local: http://localhost:3000
On Your Network: http://172.16.1.101:3000
Note that the development build is not optimized.
To create a production build, use yarn build.
Webpack's node.js development environment web server is now running with hot-module-replacement (HMR) activated. If it did not open automatically (permissions are required), open http://localhost:3000 in your browser to see the sample content.
Remember
Press CTRL c in the terminal to stop the web server.
# The Production Version
The development webserver includes lots of things to help streamline the development process, like hot-module-replacement and source maps for debugging. You do not want to include these in production.
For a production deployment, we need to have Webpack optimize the code by stripping out anything that is not absolutely needed and compile the JavaScript down to an older (more broadly compatible) version. Lets try this out by running the build script from the terminal / command prompt.
yarn build
This will compile the project and place the output files into the build folder.
You can then copy the build folder to your production server. We will cover more about production deployment best practices in a later module. For now, you can test the production build by changing into the build folder and running a local node webserver.
cd build
npx serve
The production build can be now be tested in your browser @ http://localhost:5000
# Demo notes
- index.js
- App.js
- import images
- import CSS
- @import-normalize
- PostCSS: preset-env, autoprefixer
- co-located tests
- component composition
- HTTPS dev server