213 |
214 | Then add this block to the `package.json` file of your project:
215 |
216 | ```js
217 | {
218 | // ...
219 | "eslintConfig": {
220 | "extends": "react-app"
221 | }
222 | }
223 | ```
224 |
225 | Finally, you will need to install some packages *globally*:
226 |
227 | ```sh
228 | 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
229 | ```
230 |
231 | 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.
232 |
233 | ## Installing a Dependency
234 |
235 | 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`:
236 |
237 | ```
238 | npm install --save 244 | 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. 245 | 246 | For example: 247 | 248 | ### `Button.js` 249 | 250 | ```js 251 | import React, { Component } from 'react'; 252 | 253 | class Button extends Component { 254 | render() { 255 | // ... 256 | } 257 | } 258 | 259 | export default Button; // Don’t forget to use export default! 260 | ``` 261 | 262 | ### `DangerButton.js` 263 | 264 | 265 | ```js 266 | import React, { Component } from 'react'; 267 | import Button from './Button'; // Import a component from another file 268 | 269 | class DangerButton extends Component { 270 | render() { 271 | return ; 272 | } 273 | } 274 | 275 | export default DangerButton; 276 | ``` 277 | 278 | 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. 279 | 280 | 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'`. 281 | 282 | 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. 283 | 284 | Learn more about ES6 modules: 285 | 286 | * [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) 287 | * [Exploring ES6: Modules](http://exploringjs.com/es6/ch_modules.html) 288 | * [Understanding ES6: Modules](https://leanpub.com/understandinges6/read#leanpub-auto-encapsulating-code-with-modules) 289 | 290 | ## Adding a Stylesheet 291 | 292 | 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**: 293 | 294 | ### `Button.css` 295 | 296 | ```css 297 | .Button { 298 | padding: 20px; 299 | } 300 | ``` 301 | 302 | ### `Button.js` 303 | 304 | ```js 305 | import React, { Component } from 'react'; 306 | import './Button.css'; // Tell Webpack that Button.js uses these styles 307 | 308 | class Button extends Component { 309 | render() { 310 | // You can use them as regular CSS styles 311 | return ; 312 | } 313 | } 314 | ``` 315 | 316 | **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. 317 | 318 | 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. 319 | 320 | 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. 321 | 322 | ## Post-Processing CSS 323 | 324 | 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. 325 | 326 | For example, this: 327 | 328 | ```css 329 | .App { 330 | display: flex; 331 | flex-direction: row; 332 | align-items: center; 333 | } 334 | ``` 335 | 336 | becomes this: 337 | 338 | ```css 339 | .App { 340 | display: -webkit-box; 341 | display: -ms-flexbox; 342 | display: flex; 343 | -webkit-box-orient: horizontal; 344 | -webkit-box-direction: normal; 345 | -ms-flex-direction: row; 346 | flex-direction: row; 347 | -webkit-box-align: center; 348 | -ms-flex-align: center; 349 | align-items: center; 350 | } 351 | ``` 352 | 353 | There is currently no support for preprocessors such as Less, or for sharing variables across CSS files. 354 | 355 | ## Adding Images and Fonts 356 | 357 | With Webpack, using static assets like images and fonts works similarly to CSS. 358 | 359 | 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. 360 | 361 | Here is an example: 362 | 363 | ```js 364 | import React from 'react'; 365 | import logo from './logo.png'; // Tell Webpack this JS file uses this image 366 | 367 | console.log(logo); // /logo.84287d09.png 368 | 369 | function Header() { 370 | // Import result is the URL of your image 371 | return
392 | An alternative way of handling static assets is described in the next section. 393 | 394 | ## Using the `public` Folder 395 | 396 | >Note: this feature is available with `react-scripts@0.5.0` and higher. 397 | 398 | Normally we encourage you to `import` assets in JavaScript files as described above. This mechanism provides a number of benefits: 399 | 400 | * Scripts and stylesheets get minified and bundled together to avoid extra network requests. 401 | * Missing files cause compilation errors instead of 404 errors for your users. 402 | * Result filenames include content hashes so you don’t need to worry about browsers caching their old versions. 403 | 404 | However there is an **escape hatch** that you can use to add an asset outside of the module system. 405 | 406 | 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`. 407 | 408 | Inside `index.html`, you can use it like this: 409 | 410 | ```html 411 | 412 | ``` 413 | 414 | 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. 415 | 416 | 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. 417 | 418 | In JavaScript code, you can use `process.env.PUBLIC_URL` for similar purposes: 419 | 420 | ```js 421 | render() { 422 | // Note: this is an escape hatch and should be used sparingly! 423 | // Normally we recommend using `import` for getting asset URLs 424 | // as described in “Adding Images and Fonts” above this section. 425 | return