This project was bootstrapped with Create React App.
To update an existing project to a new version of react-scripts
, open the changelog, find the version you’re currently on (check package.json
in this folder if you’re not sure), and apply the migration instructions for the newer versions.
In most cases bumping the react-scripts
version in package.json
and running npm install
in this folder should be enough, but it’s good to consult the changelog for potential breaking changes.
We commit to keeping the breaking changes minimal so you can upgrade react-scripts
painlessly.
We are always open to your feedback.
After creation, your project should look like this:
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
, or Webpack won’t see them.
Only files inside public
can be used from public/index.html
.
Read instructions below for using assets from JavaScript and HTML.
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.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
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!
Note: this is a one-way operation. Once you eject
, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject
at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject
will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject
. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
Note: this feature is available with
react-scripts@0.2.0
and higher.
Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plugins for ESLint.
They are not required for linting. You should see the linter output right in your terminal as well as the browser console. However, if you prefer the lint results to appear right in your editor, there are some extra steps you can do.
You would need to install an ESLint plugin for your editor first.
A note for Atom
linter-eslint
users
If you are using the Atom
linter-eslint
plugin, make sure that Use global ESLint installation option is checked:
Then add this block to the package.json
file of your project:
{
// ...
"eslintConfig": {
"extends": "react-app"
}
}
Finally, you will need to install some packages globally:
npm install -g eslint-config-react-app@0.2.1 eslint@3.5.0 babel-eslint@6.1.2 eslint-plugin-react@6.3.0 eslint-plugin-import@1.12.0 eslint-plugin-jsx-a11y@2.2.2 eslint-plugin-flowtype@2.18.1
We recognize that this is suboptimal, but it is currently required due to the way we hide the ESLint dependency. The ESLint team is already working on a solution to this so this may become unnecessary in a couple of months.
The generated project includes React and ReactDOM as dependencies. It also includes a set of scripts used by Create React App as a development dependency. You may install other dependencies (for example, React Router) with npm
:
npm install --save <library-name>
This project setup supports ES6 modules thanks to Babel.
While you can still use require()
and module.exports
, we encourage you to use import
and export
instead.
For example:
import React, { Component } from 'react';
class Button extends Component {
render() {
// ...
}
}
export default Button; // Don’t forget to use export default!
import React, { Component } from 'react';
import Button from './Button'; // Import a component from another file
class DangerButton extends Component {
render() {
return <Button color="red" />;
}
}
export default DangerButton;
Be aware of the difference between default and named exports. It is a common source of mistakes.
We suggest that you stick to using default imports and exports when a module only exports a single thing (for example, a component). That’s what you get when you use export default Button
and import Button from './Button'
.
Named exports are useful for utility modules that export several functions. A module may have at most one default export and as many named exports as you like.
This project setup uses Webpack for handling all assets. Webpack offers a custom way of “extending” the concept of import
beyond JavaScript. To express that a JavaScript file depends on a CSS file, you need to import the CSS from the JavaScript file:
This is not required for React but many people find this feature convenient. You can read about the benefits of this approach here. However you should be aware that this makes your code less portable to other build tools and environments than Webpack.
In development, expressing dependencies this way allows your styles to be reloaded on the fly as you edit them. In production, all CSS files will be concatenated into a single minified .css
file in the build output.
If you are concerned about using Webpack-specific semantics, you can put all your CSS right into src/index.css
. It would still be imported from src/index.js
, but you could always remove that import if you later migrate to a different build tool.
There is currently no support for preprocessors such as Less, or for sharing variables across CSS files.
With Webpack, using static assets like images and fonts works similarly to CSS.
You can import
an image right in a JavaScript module. This tells Webpack to include that image in the bundle. Unlike CSS imports, importing an image or a font gives you a string value. This value is the final image path you can reference in your code.
Here is an example:
import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png
function Header() {
// Import result is the URL of your image
return <img src={logo} alt="Logo" />;
}
export default function Header;
This ensures that when the project is built, webpack will correctly move the images into the build folder, and provide us with correct paths.
This works in CSS too:
.Logo {
background-image: url(./logo.png);
}
Webpack finds all relative module references in CSS (they start with ./
) and replaces them with the final paths from the compiled bundle. If you make a typo or accidentally delete an important file, you will see a compilation error, just like when you import a non-existent JavaScript module. The final filenames in the compiled bundle are generated by Webpack from content hashes. If the file content changes in the future, Webpack will give it a different name in production so you don’t need to worry about long-term caching of assets.
Please be advised that this is also a custom feature of Webpack.
It is not required for React but many people enjoy it (and React Native uses a similar mechanism for images).
An alternative way of handling static assets is described in the next section.
Note: this feature is available with
react-scripts@0.5.0
and higher.
Normally we encourage you to import
assets in JavaScript files as described above. This mechanism provides a number of benefits:
- Scripts and stylesheets get minified and bundled together to avoid extra network requests.
- Missing files cause compilation errors instead of 404 errors for your users.
- Result filenames include content hashes so you don’t need to worry about browsers caching their old versions.
However there is an escape hatch that you can use to add an asset outside of the module system.
If you put a file into the public
folder, it will not be processed by Webpack. Instead it will be copied into the build folder untouched. To reference assets in the public
folder, you need to use a special variable called PUBLIC_URL
.
Inside index.html
, you can use it like this:
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
Only files inside the public
folder will be accessible by %PUBLIC_URL%
prefix. If you need to use a file from src
or node_modules
, you’ll have to copy it there to explicitly specify your intention to make this file a part of the build.
When you run npm run build
, Create React App will substitute %PUBLIC_URL%
with a correct absolute path so your project works even if you use client-side routing or host it at a non-root URL.
In JavaScript code, you can use process.env.PUBLIC_URL
for similar purposes:
render() {
// Note: this is an escape hatch and should be used sparingly!
// Normally we recommend using `import` for getting asset URLs
// as described in “Adding Images and Fonts” above this section.
return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}
Keep in mind the downsides of this approach:
- None of the files in
public
folder get post-processed or minified. - Missing files will not be called at compilation time, and will cause 404 errors for your users.
- Result filenames won’t include content hashes so you’ll need to add query arguments or rename them every time they change.
However, it can be handy for referencing assets like manifest.webmanifest
from HTML, or including small scripts like pace.js
outside of the bundled code.