162 |
163 | Then add this block to the `package.json` file of your project:
164 |
165 | ```js
166 | {
167 | // ...
168 | "eslintConfig": {
169 | "extends": "react-app"
170 | }
171 | }
172 | ```
173 |
174 | Finally, you will need to install some packages *globally*:
175 |
176 | ```sh
177 | npm install -g eslint-config-react-app@0.3.0 eslint@3.8.1 babel-eslint@7.0.0 eslint-plugin-react@6.4.1 eslint-plugin-import@2.0.1 eslint-plugin-jsx-a11y@2.2.3 eslint-plugin-flowtype@2.21.0
178 | ```
179 |
180 | 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](https://github.com/eslint/eslint/issues/3458) so this may become unnecessary in a couple of months.
181 |
182 | ## Installing a Dependency
183 |
184 | 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`:
185 |
186 | ```
187 | npm install --save 193 | While you can still use `require()` and `module.exports`, we encourage you to use [`import` and `export`](http://exploringjs.com/es6/ch_modules.html) instead. 194 | 195 | For example: 196 | 197 | ### `Button.js` 198 | 199 | ```js 200 | import React, { Component } from 'react'; 201 | 202 | class Button extends Component { 203 | render() { 204 | // ... 205 | } 206 | } 207 | 208 | export default Button; // Don’t forget to use export default! 209 | ``` 210 | 211 | ### `DangerButton.js` 212 | 213 | 214 | ```js 215 | import React, { Component } from 'react'; 216 | import Button from './Button'; // Import a component from another file 217 | 218 | class DangerButton extends Component { 219 | render() { 220 | return ; 221 | } 222 | } 223 | 224 | export default DangerButton; 225 | ``` 226 | 227 | Be aware of the [difference between default and named exports](http://stackoverflow.com/questions/36795819/react-native-es-6-when-should-i-use-curly-braces-for-import/36796281#36796281). It is a common source of mistakes. 228 | 229 | 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'`. 230 | 231 | 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. 232 | 233 | Learn more about ES6 modules: 234 | 235 | * [When to use the curly braces?](http://stackoverflow.com/questions/36795819/react-native-es-6-when-should-i-use-curly-braces-for-import/36796281#36796281) 236 | * [Exploring ES6: Modules](http://exploringjs.com/es6/ch_modules.html) 237 | * [Understanding ES6: Modules](https://leanpub.com/understandinges6/read#leanpub-auto-encapsulating-code-with-modules) 238 | 239 | ## Adding a Stylesheet 240 | 241 | This project setup uses [Webpack](https://webpack.github.io/) 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**: 242 | 243 | ### `Button.css` 244 | 245 | ```css 246 | .Button { 247 | padding: 20px; 248 | } 249 | ``` 250 | 251 | ### `Button.js` 252 | 253 | ```js 254 | import React, { Component } from 'react'; 255 | import './Button.css'; // Tell Webpack that Button.js uses these styles 256 | 257 | class Button extends Component { 258 | render() { 259 | // You can use them as regular CSS styles 260 | return ; 261 | } 262 | } 263 | ``` 264 | 265 | **This is not required for React** but many people find this feature convenient. You can read about the benefits of this approach [here](https://medium.com/seek-ui-engineering/block-element-modifying-your-javascript-components-d7f99fcab52b). However you should be aware that this makes your code less portable to other build tools and environments than Webpack. 266 | 267 | 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. 268 | 269 | 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. 270 | 271 | ## Post-Processing CSS 272 | 273 | This project setup minifies your CSS and adds vendor prefixes to it automatically through [Autoprefixer](https://github.com/postcss/autoprefixer) so you don’t need to worry about it. 274 | 275 | For example, this: 276 | 277 | ```css 278 | .App { 279 | display: flex; 280 | flex-direction: row; 281 | align-items: center; 282 | } 283 | ``` 284 | 285 | becomes this: 286 | 287 | ```css 288 | .App { 289 | display: -webkit-box; 290 | display: -ms-flexbox; 291 | display: flex; 292 | -webkit-box-orient: horizontal; 293 | -webkit-box-direction: normal; 294 | -ms-flex-direction: row; 295 | flex-direction: row; 296 | -webkit-box-align: center; 297 | -ms-flex-align: center; 298 | align-items: center; 299 | } 300 | ``` 301 | 302 | There is currently no support for preprocessors such as Less, or for sharing variables across CSS files. 303 | 304 | ## Adding Images and Fonts 305 | 306 | With Webpack, using static assets like images and fonts works similarly to CSS. 307 | 308 | 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. 309 | 310 | Here is an example: 311 | 312 | ```js 313 | import React from 'react'; 314 | import logo from './logo.png'; // Tell Webpack this JS file uses this image 315 | 316 | console.log(logo); // /logo.84287d09.png 317 | 318 | function Header() { 319 | // Import result is the URL of your image 320 | return
341 | An alternative way of handling static assets is described in the next section. 342 | 343 | ## Using the `public` Folder 344 | 345 | >Note: this feature is available with `react-scripts@0.5.0` and higher. 346 | 347 | Normally we encourage you to `import` assets in JavaScript files as described above. This mechanism provides a number of benefits: 348 | 349 | * Scripts and stylesheets get minified and bundled together to avoid extra network requests. 350 | * Missing files cause compilation errors instead of 404 errors for your users. 351 | * Result filenames include content hashes so you don’t need to worry about browsers caching their old versions. 352 | 353 | However there is an **escape hatch** that you can use to add an asset outside of the module system. 354 | 355 | 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`. 356 | 357 | Inside `index.html`, you can use it like this: 358 | 359 | ```html 360 | 361 | ``` 362 | 363 | 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. 364 | 365 | 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. 366 | 367 | In JavaScript code, you can use `process.env.PUBLIC_URL` for similar purposes: 368 | 369 | ```js 370 | render() { 371 | // Note: this is an escape hatch and should be used sparingly! 372 | // Normally we recommend using `import` for getting asset URLs 373 | // as described in “Adding Images and Fonts” above this section. 374 | return