├── .eslintrc ├── .gitignore ├── .travis.yml ├── CHANGELOG.md ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE.md ├── LICENSE ├── PATENTS ├── README.md ├── lerna.json ├── package.json ├── packages ├── babel-preset-react-app │ ├── README.md │ ├── index.js │ └── package.json ├── create-react-app │ ├── README.md │ ├── index.js │ └── package.json ├── eslint-config-react-app │ ├── README.md │ ├── index.js │ └── package.json ├── react-dev-utils │ ├── InterpolateHtmlPlugin.js │ ├── README.md │ ├── WatchMissingNodeModulesPlugin.js │ ├── checkRequiredFiles.js │ ├── clearConsole.js │ ├── formatWebpackMessages.js │ ├── getProcessForPort.js │ ├── openBrowser.js │ ├── openChrome.applescript │ ├── package.json │ ├── prompt.js │ └── webpackHotDevClient.js └── react-scripts │ ├── .babelrc │ ├── .eslintrc │ ├── README.md │ ├── bin │ └── react-scripts.js │ ├── config │ ├── env.js │ ├── jest │ │ ├── babelTransform.js │ │ ├── cssTransform.js │ │ └── fileTransform.js │ ├── paths.js │ ├── polyfills.js │ ├── webpack.config.dev.js │ └── webpack.config.prod.js │ ├── package.json │ ├── scripts │ ├── build.js │ ├── eject.js │ ├── init.js │ ├── start.js │ └── test.js │ ├── template │ ├── README.md │ ├── gitignore │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── index.css │ │ ├── index.js │ │ └── logo.svg │ └── utils │ └── createJestConfig.js ├── tasks ├── cra.sh ├── e2e.sh ├── release.sh └── replace-own-deps.js └── template └── README.md /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "react-app" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | build 3 | .DS_Store 4 | *.tgz 5 | my-app* 6 | template/src/__tests__/__snapshots__/ 7 | lerna-debug.log 8 | npm-debug.log 9 | /.changelog 10 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | --- 2 | language: node_js 3 | node_js: 4 | - 4 5 | - 6 6 | cache: 7 | directories: 8 | - node_modules 9 | - packages/create-react-app/node_modules 10 | - packages/react-scripts/node_modules 11 | script: tasks/e2e.sh 12 | env: 13 | - USE_YARN=no 14 | - USE_YARN=yes 15 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Create React App 2 | 3 | Loving Create React App and want to get involved? Thanks! There are plenty of ways you can help. 4 | 5 | Please take a moment to review this document in order to make the contribution process easy and effective for everyone involved. 6 | 7 | Following these guidelines helps to communicate that you respect the time of the developers managing and developing this open source project. In return, they should reciprocate that respect in addressing your issue or assessing patches and features. 8 | 9 | ## Core Ideas 10 | 11 | As much as possible, we try to avoid adding configuration and flags. The purpose of this tool is to provide the best experience for people getting started with React, and this will always be our first priority. This means that sometimes we [sacrifice additional functionality](https://gettingreal.37signals.com/ch05_Half_Not_Half_Assed.php) (such as server rendering) because it is too hard to solve it in a way that wouldn’t require any configuration. 12 | 13 | We prefer **convention, heuristics, or interactivity** over configuration. 14 | Here’s a few examples of them in action. 15 | 16 | ### Convention 17 | 18 | Instead of letting the user specify the entry filename, we always assume it to be `src/index.js`. Rather than letting the user specify the output bundle name, we generate it, but make sure to include the content hash in it. Whenever possible, we want to leverage convention to make good choices for the user, especially in cases where it’s easy to misconfigure something. 19 | 20 | ### Heuristics 21 | 22 | Normally, `npm start` runs on port `3000`, and this is not explicitly configurable. However some environments like cloud IDEs want the programs to run on a specific port to serve their output. We want to play well with different environments, so Create React App reads `PORT` environment variable and prefers it when it is specified. The trick is that we know cloud IDEs already specify it automatically so there is no need for the user to do anything. Create React App relies on heuristics to do the right thing depending on environment. 23 | 24 | Another example of this is how `npm test` normally launches the watcher, but if the `CI` environment variable is set, it will run tests once. We know that popular CI environments set this variable so the user doesn’t need to do anything. It just works. 25 | 26 | ### Interactivity 27 | 28 | We prefer to add interactivity to the command line interface rather than add configuration flags. For example, `npm start` will attempt to run with port `3000` by default but it may be busy. Many other tools just fail in this case and ask that you pass a different port, but Create React App will display a prompt asking if you’d like to run the app on the next available port. 29 | 30 | Another example of interactivity is `npm test` watcher interface. Instead of asking people to pass command line flags for switching between test runner modes or search patterns, we print a hint with keys that you can press during the test session to instruct watcher what to do. Jest supports both flags and interactive CLI but Create React App prefers long-running sessions to keep user immersed in the flow over short-running sessions with different flags. 31 | 32 | ### Breaking the Rules 33 | 34 | No rules are perfect. Sometimes we may introduce flags or configuration if we believe the value is high enough to justify the mental cost. For example, we know that apps may be hosted paths different from the root, and we need to support this use case. However we still try to fall back to heuristics when possible. In this example, we ask that you specify `homepage` in `package.json`, and infer the correct path based on it. We also nudge the user to fill out the `homepage` after the build so the user becomes aware that the feature exists. 35 | 36 | ## Submitting a Pull Request 37 | 38 | Good pull requests, such as patches, improvements, and new features, are a fantastic help. They should remain focused in scope and avoid containing unrelated commits. 39 | 40 | Please **ask first** if somebody else is already working on this or the core developers think your feature is in-scope for Create React App. Generally always have a related issue with discussions for whatever you are including. 41 | 42 | Please also provide a **test plan**, i.e. specify how you verified that your addition works. 43 | 44 | ## Setting Up a Local Copy 45 | 46 | 1. Clone the repo with `git clone https://github.com/facebookincubator/create-react-app` 47 | 48 | 2. Run `npm install` in the root `create-react-app` folder. 49 | 50 | Once it is done, you can modify any file locally and run `npm start`, `npm test` or `npm run build` just like in a generated project. 51 | 52 | If you want to try out the end-to-end flow with the global CLI, you can do this too: 53 | 54 | ``` 55 | npm run create-react-app my-app 56 | cd my-app 57 | ``` 58 | 59 | and then run `npm start` or `npm run build`. 60 | 61 | ## Cutting a Release 62 | 63 | 1. Tag all merged PRs that go into the release with the relevant milestone. 64 | 2. Close the milestone. 65 | 3. In most releases, only `react-scripts` needs to be released. If you don’t have any changes to the `packages/create-react-app` folder, you don’t need to bump its version or publish it (the publish script will publish only changed packages). 66 | 4. Note that files in `packages/create-react-app` should be modified with extreme caution. Since it’s a global CLI, any version of `create-react-app` (global CLI) including very old ones should work with the latest version of `react-scripts`. 67 | 5. Add an entry to `CHANGELOG.md` detailing what has changed with links to PRs and their authors. Use previous entries for inspiration. Group changes to `react-scripts` and `create-react-app` separately in the notes, for example like in `0.2.0` release notes. 68 | 6. Make sure to include “Migrating from ...” instructions for the previous release. Often you can copy and paste them. 69 | 7. After merging the changelog update, create a GitHub Release with the same text. See previous Releases for inspiration. 70 | 8. **Do not run `npm publish`. Instead, run `npm run publish`.** 71 | 9. Wait for a long time, and it will get published. Don’t worry that it’s stuck. In the end the publish script will prompt for versions before publishing the packages. 72 | 73 | Make sure to test the released version! If you want to be extra careful, you can publish a prerelease by running `npm run publish -- --tag next` instead of `npm run publish`. 74 | 75 | ------------ 76 | 77 | *Many thanks to [h5bp](https://github.com/h5bp/html5-boilerplate/blob/master/CONTRIBUTING.md) for the inspiration with this contributing guide* 78 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | If you are reporting a bug, please fill in below. Otherwise feel free to remove this template entirely. 2 | 3 | ### Can you reproduce the problem with latest npm? 4 | 5 | Many errors, especially related to "missing modules", are due to npm bugs. 6 | 7 | If you're using Windows, [follow these instructions to update npm](https://github.com/npm/npm/wiki/Troubleshooting#upgrading-on-windows). 8 | 9 | If you're using OS X or Linux, run this to update npm: 10 | 11 | ``` 12 | npm install -g npm@latest 13 | 14 | cd your_project_directory 15 | rm -rf node_modules 16 | npm install 17 | ``` 18 | 19 | Then try to reproduce the issue again. 20 | 21 | Can you still reproduce it? 22 | 23 | ### Description 24 | 25 | What are you reporting? 26 | 27 | ### Expected behavior 28 | 29 | Tell us what you think should happen. 30 | 31 | ### Actual behavior 32 | 33 | Tell us what actually happens. 34 | 35 | ### Environment 36 | 37 | Run these commands in the project folder and fill in their results: 38 | 39 | 1. `npm ls react-scripts` (if you haven’t ejected): 40 | 2. `node -v`: 41 | 3. `npm -v`: 42 | 43 | Then, specify: 44 | 45 | 1. Operating system: 46 | 2. Browser and version: 47 | 48 | ### Reproducible Demo 49 | 50 | Please take the time to create a new app that reproduces the issue. 51 | 52 | Alternatively, you could copy your app that experiences the problem and start removing things until you’re left with the minimal reproducible demo. 53 | 54 | (Accidentally, you might get to the root of your problem during that process.) 55 | 56 | Push to GitHub and paste the link here. 57 | 58 | By doing this, you're helping the Create React App contributors a big time! 59 | Demonstrable issues gets fixed faster. 60 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | BSD License 2 | 3 | For create-react-app software 4 | 5 | Copyright (c) 2016-present, Facebook, Inc. All rights reserved. 6 | 7 | Redistribution and use in source and binary forms, with or without modification, 8 | are permitted provided that the following conditions are met: 9 | 10 | * Redistributions of source code must retain the above copyright notice, this 11 | list of conditions and the following disclaimer. 12 | 13 | * Redistributions in binary form must reproduce the above copyright notice, 14 | this list of conditions and the following disclaimer in the documentation 15 | and/or other materials provided with the distribution. 16 | 17 | * Neither the name Facebook nor the names of its contributors may be used to 18 | endorse or promote products derived from this software without specific 19 | prior written permission. 20 | 21 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 22 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 23 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 24 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 25 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 26 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 27 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 28 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 29 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 30 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 31 | -------------------------------------------------------------------------------- /PATENTS: -------------------------------------------------------------------------------- 1 | Additional Grant of Patent Rights Version 2 2 | 3 | "Software" means the create-react-app software distributed by Facebook, Inc. 4 | 5 | Facebook, Inc. ("Facebook") hereby grants to each recipient of the Software 6 | ("you") a perpetual, worldwide, royalty-free, non-exclusive, irrevocable 7 | (subject to the termination provision below) license under any Necessary 8 | Claims, to make, have made, use, sell, offer to sell, import, and otherwise 9 | transfer the Software. For avoidance of doubt, no license is granted under 10 | Facebook’s rights in any patent claims that are infringed by (i) modifications 11 | to the Software made by you or any third party or (ii) the Software in 12 | combination with any software or other technology. 13 | 14 | The license granted hereunder will terminate, automatically and without notice, 15 | if you (or any of your subsidiaries, corporate affiliates or agents) initiate 16 | directly or indirectly, or take a direct financial interest in, any Patent 17 | Assertion: (i) against Facebook or any of its subsidiaries or corporate 18 | affiliates, (ii) against any party if such Patent Assertion arises in whole or 19 | in part from any software, technology, product or service of Facebook or any of 20 | its subsidiaries or corporate affiliates, or (iii) against any party relating 21 | to the Software. Notwithstanding the foregoing, if Facebook or any of its 22 | subsidiaries or corporate affiliates files a lawsuit alleging patent 23 | infringement against you in the first instance, and you respond by filing a 24 | patent infringement counterclaim in that lawsuit against that party that is 25 | unrelated to the Software, the license granted hereunder will not terminate 26 | under section (i) of this paragraph due to such counterclaim. 27 | 28 | A "Necessary Claim" is a claim of a patent owned by Facebook that is 29 | necessarily infringed by the Software standing alone. 30 | 31 | A "Patent Assertion" is any lawsuit or other action alleging direct, indirect, 32 | or contributory infringement or inducement to infringe any patent, including a 33 | cross-claim or counterclaim. 34 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Create React App [![Build Status](https://travis-ci.org/facebookincubator/create-react-app.svg?branch=master)](https://travis-ci.org/facebookincubator/create-react-app) 2 | 3 | Create React apps with no build configuration. 4 | 5 | * [Getting Started](#getting-started) – How to create a new app. 6 | * [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App. 7 | 8 | ## tl;dr 9 | 10 | ```sh 11 | npm install -g create-react-app 12 | 13 | create-react-app my-app 14 | cd my-app/ 15 | npm start 16 | 17 | ``` 18 | 19 | Then open [http://localhost:3000/](http://localhost:3000/) to see your app.
20 | When you’re ready to deploy to production, create a minified bundle with `npm run build`. 21 | 22 | npm start 23 | 24 | ## Getting Started 25 | 26 | ### Installation 27 | 28 | Install it once globally: 29 | 30 | ```sh 31 | npm install -g create-react-app 32 | ``` 33 | 34 | **You’ll need to have Node >= 4 on your machine**. 35 | 36 | **We strongly recommend to use Node >= 6 and npm >= 3 for faster installation speed and better disk usage.** You can use [nvm](https://github.com/creationix/nvm#usage) to easily switch Node versions between different projects. 37 | 38 | **This tool doesn’t assume a Node backend**. The Node installation is only required for the build tools that rely on it locally, such as Webpack and Babel. 39 | 40 | ### Creating an App 41 | 42 | To create a new app, run: 43 | 44 | ```sh 45 | create-react-app my-app 46 | cd my-app 47 | ``` 48 | 49 | It will create a directory called `my-app` inside the current folder.
50 | Inside that directory, it will generate the initial project structure and install the transitive dependencies: 51 | 52 | ``` 53 | my-app/ 54 | README.md 55 | node_modules/ 56 | package.json 57 | .gitignore 58 | public/ 59 | favicon.ico 60 | index.html 61 | src/ 62 | App.css 63 | App.js 64 | App.test.js 65 | index.css 66 | index.js 67 | logo.svg 68 | ``` 69 | 70 | No configuration or complicated folder structures, just the files you need to build your app.
71 | Once the installation is done, you can run some commands inside the project folder: 72 | 73 | ### `npm start` 74 | 75 | Runs the app in development mode.
76 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 77 | 78 | The page will reload if you make edits.
79 | You will see the build errors and lint warnings in the console. 80 | 81 | Build errors 82 | 83 | ### `npm test` 84 | 85 | Runs the test watcher in an interactive mode. 86 | By default, runs tests related to files changes since the last commit. 87 | 88 | [Read more about testing.](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) 89 | 90 | ### `npm run build` 91 | 92 | Builds the app for production to the `build` folder.
93 | It correctly bundles React in production mode and optimizes the build for the best performance. 94 | 95 | The build is minified and the filenames include the hashes.
96 | Your app is ready to be deployed! 97 | 98 | ## User Guide 99 | 100 | The [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) includes information on different topics, such as: 101 | 102 | - [Updating to New Releases](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) 103 | - [Folder Structure](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#folder-structure) 104 | - [Available Scripts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#available-scripts) 105 | - [Displaying Lint Output in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor) 106 | - [Installing a Dependency](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency) 107 | - [Importing a Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#importing-a-component) 108 | - [Adding a Stylesheet](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet) 109 | - [Post-Processing CSS](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#post-processing-css) 110 | - [Adding Images and Fonts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-and-fonts) 111 | - [Using the `public` Folder](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder) 112 | - [Using Global Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-global-variables) 113 | - [Adding Bootstrap](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap) 114 | - [Adding Flow](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-flow) 115 | - [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) 116 | - [Can I Use Decorators?](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#can-i-use-decorators) 117 | - [Integrating with a Node Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-a-node-backend) 118 | - [Proxying API Requests in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development) 119 | - [Using HTTPS in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development) 120 | - [Generating Dynamic `` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server) 121 | - [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) 122 | - [Developing Components in Isolation](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#developing-components-in-isolation) 123 | - [Making a Progressive Web App](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app) 124 | - [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment) 125 | - [Troubleshooting](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#troubleshooting) 126 | 127 | A copy of the user guide will be created as `README.md` in your project folder. 128 | 129 | ## How to Update to New Versions? 130 | 131 | Please refer to the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) for this and other information. 132 | 133 | ## Philosophy 134 | 135 | * **One Dependency:** There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them. 136 | 137 | * **Convention over Configuration:** You don't need to configure anything by default. Reasonably good configuration of both development and production builds is handled for you so you can focus on writing code. 138 | 139 | * **No Lock-In:** You can “eject” to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off. 140 | 141 | ## Why Use This? 142 | 143 | **If you’re getting started** with React, use `create-react-app` to automate the build of your app. There is no configuration file, and `react-scripts` is the only extra build dependency in your `package.json`. Your environment will have everything you need to build a modern React app: 144 | 145 | * React, JSX, and ES6 support. 146 | * Language extras beyond ES6 like the object spread operator. 147 | * A dev server that lints for common errors. 148 | * Import CSS and image files directly from JavaScript. 149 | * Autoprefixed CSS, so you don’t need `-webkit` or other prefixes. 150 | * A `build` script to bundle JS, CSS, and images for production, with sourcemaps. 151 | 152 | **The feature set is intentionally limited**. It doesn’t support advanced features such as server rendering or CSS modules. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything. 153 | 154 | **You don’t have to use this.** Historically it has been easy to [gradually adopt](https://www.youtube.com/watch?v=BF58ZJ1ZQxY) React. However many people create new single-page React apps from scratch every day. We’ve heard [loud](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4) and [clear](https://twitter.com/thomasfuchs/status/708675139253174273) that this process can be error-prone and tedious, especially if this is your first JavaScript build stack. This project is an attempt to figure out a good way to start developing React apps. 155 | 156 | ### Converting to a Custom Setup 157 | 158 | **If you’re a power user** and you aren’t happy with the default configuration, you can “eject” from the tool and use it as a boilerplate generator. 159 | 160 | Running `npm run eject` copies all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. Commands like `npm start` and `npm run build` will still work, but they will point to the copied scripts so you can tweak them. At this point, you’re on your own. 161 | 162 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 163 | 164 | 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. 165 | 166 | ## Limitations 167 | 168 | Some features are currently **not supported**: 169 | 170 | * Server rendering. 171 | * Some experimental syntax extensions (e.g. decorators). 172 | * CSS Modules. 173 | * LESS or Sass. 174 | * Hot reloading of components. 175 | 176 | Some of them might get added in the future if they are stable, are useful to majority of React apps, don’t conflict with existing tools, and don’t introduce additional configuration. 177 | 178 | ## What’s Inside? 179 | 180 | The tools used by Create React App are subject to change. 181 | Currently it is a thin layer on top of many amazing community projects, such as: 182 | 183 | * [webpack](https://webpack.github.io/) with [webpack-dev-server](https://github.com/webpack/webpack-dev-server), [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) and [style-loader](https://github.com/webpack/style-loader) 184 | * [Babel](http://babeljs.io/) with ES6 and extensions used by Facebook (JSX, [object spread](https://github.com/sebmarkbage/ecmascript-rest-spread/commits/master), [class properties](https://github.com/jeffmo/es-class-public-fields)) 185 | * [Autoprefixer](https://github.com/postcss/autoprefixer) 186 | * [ESLint](http://eslint.org/) 187 | * [Jest](http://facebook.github.io/jest) 188 | * and others. 189 | 190 | All of them are transitive dependencies of the provided npm package. 191 | 192 | ## Contributing 193 | 194 | We'd love to have your helping hand on `create-react-app`! See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on what we're looking for and how to get started. 195 | 196 | ## Acknowledgements 197 | 198 | We are grateful to the authors of existing related projects for their ideas and collaboration: 199 | 200 | * [@eanplatter](https://github.com/eanplatter) 201 | * [@insin](https://github.com/insin) 202 | * [@mxstbr](https://github.com/mxstbr) 203 | 204 | ## Alternatives 205 | 206 | If you don’t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs. 207 | Some of the more popular and actively maintained ones are: 208 | 209 | * [insin/nwb](https://github.com/insin/nwb) 210 | * [mozilla/neo](https://github.com/mozilla/neo) 211 | * [NYTimes/kyt](https://github.com/NYTimes/kyt) 212 | * [zeit/next.js](https://github.com/zeit/next.js) 213 | * [gatsbyjs/gatsby](https://github.com/gatsbyjs/gatsby) 214 | 215 | Notable alternatives also include: 216 | 217 | * [enclave](https://github.com/eanplatter/enclave) 218 | * [motion](https://github.com/motion/motion) 219 | * [quik](https://github.com/satya164/quik) 220 | * [sagui](https://github.com/saguijs/sagui) 221 | * [roc](https://github.com/rocjs/roc) 222 | * [aik](https://github.com/d4rkr00t/aik) 223 | * [react-app](https://github.com/kriasoft/react-app) 224 | * [dev-toolkit](https://github.com/stoikerty/dev-toolkit) 225 | * [tarec](https://github.com/geowarin/tarec) 226 | 227 | You can also use module bundlers like [webpack](http://webpack.github.io) and [Browserify](http://browserify.org/) directly.
228 | React documentation includes [a walkthrough](https://facebook.github.io/react/docs/package-management.html) on this topic. 229 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "lerna": "2.0.0-beta.30", 3 | "version": "independent", 4 | "changelog": { 5 | "repo": "facebookincubator/create-react-app", 6 | "labels": { 7 | "tag: new feature": ":rocket: New Feature", 8 | "tag: breaking change": ":boom: Breaking Change", 9 | "tag: bug fix": ":bug: Bug Fix", 10 | "tag: enhancement": ":nail_care: Enhancement", 11 | "tag: documentation": ":memo: Documentation", 12 | "tag: internal": ":house: Internal" 13 | }, 14 | "cacheDir": ".changelog" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "build": "node packages/react-scripts/scripts/build.js", 5 | "changelog": "lerna-changelog", 6 | "create-react-app": "tasks/cra.sh", 7 | "e2e": "tasks/e2e.sh", 8 | "postinstall": "lerna bootstrap", 9 | "publish": "tasks/release.sh", 10 | "start": "node packages/react-scripts/scripts/start.js", 11 | "test": "node packages/react-scripts/scripts/test.js --env=jsdom" 12 | }, 13 | "devDependencies": { 14 | "babel-eslint": "6.1.2", 15 | "eslint": "3.5.0", 16 | "eslint-config-react-app": "0.2.1", 17 | "eslint-plugin-flowtype": "2.18.1", 18 | "eslint-plugin-import": "1.12.0", 19 | "eslint-plugin-jsx-a11y": "2.2.2", 20 | "eslint-plugin-react": "6.3.0", 21 | "lerna": "2.0.0-beta.30", 22 | "lerna-changelog": "^0.2.3" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/babel-preset-react-app/README.md: -------------------------------------------------------------------------------- 1 | # babel-preset-react-app 2 | 3 | This package includes the Babel preset used by [Create React App](https://github.com/facebookincubator/create-react-app). 4 | Please refer to its documentation: 5 | 6 | * [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) – How to create a new app. 7 | * [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App. 8 | 9 | ## Usage in Create React App Projects 10 | 11 | The easiest way to use this configuration is with [Create React App](https://github.com/facebookincubator/create-react-app), which includes it by default. **You don’t need to install it separately in Create React App projects.** 12 | 13 | ## Usage Outside of Create React App 14 | 15 | If you want to use this Babel preset in a project not built with Create React App, you can install it with following steps. 16 | 17 | First, [install Babel](https://babeljs.io/docs/setup/). 18 | 19 | Then create a file named `.babelrc` with following contents in the root folder of your project: 20 | 21 | ```js 22 | { 23 | "presets": ["react-app"] 24 | } 25 | ``` 26 | 27 | This preset uses the `useBuiltIns` option with [transform-object-rest-spread](http://babeljs.io/docs/plugins/transform-object-rest-spread/) and [transform-react-jsx](http://babeljs.io/docs/plugins/transform-react-jsx/), which assumes that `Object.assign` is available or polyfilled. 28 | -------------------------------------------------------------------------------- /packages/babel-preset-react-app/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 'use strict'; 10 | 11 | var path = require('path'); 12 | 13 | const plugins = [ 14 | // class { handleClick = () => { } } 15 | require.resolve('babel-plugin-transform-class-properties'), 16 | // The following two plugins use Object.assign directly, instead of Babel's 17 | // extends helper. Note that this assumes `Object.assign` is available. 18 | // { ...todo, completed: true } 19 | [require.resolve('babel-plugin-transform-object-rest-spread'), { 20 | useBuiltIns: true 21 | }], 22 | // Transforms JSX 23 | [require.resolve('babel-plugin-transform-react-jsx'), { 24 | useBuiltIns: true 25 | }], 26 | // Polyfills the runtime needed for async/await and generators 27 | [require.resolve('babel-plugin-transform-runtime'), { 28 | helpers: false, 29 | polyfill: false, 30 | regenerator: true, 31 | // Resolve the Babel runtime relative to the config. 32 | moduleName: path.dirname(require.resolve('babel-runtime/package')) 33 | }] 34 | ]; 35 | 36 | // This is similar to how `env` works in Babel: 37 | // https://babeljs.io/docs/usage/babelrc/#env-option 38 | // We are not using `env` because it’s ignored in versions > babel-core@6.10.4: 39 | // https://github.com/babel/babel/issues/4539 40 | // https://github.com/facebookincubator/create-react-app/issues/720 41 | // It’s also nice that we can enforce `NODE_ENV` being specified. 42 | var env = process.env.BABEL_ENV || process.env.NODE_ENV; 43 | if (env !== 'development' && env !== 'test' && env !== 'production') { 44 | throw new Error( 45 | 'Using `babel-preset-react-app` requires that you specify `NODE_ENV` or '+ 46 | '`BABEL_ENV` environment variables. Valid values are "development", ' + 47 | '"test", and "production". Instead, received: ' + JSON.stringify(env) + '.' 48 | ); 49 | } 50 | 51 | if (env === 'development' || env === 'test') { 52 | // The following two plugins are currently necessary to make React warnings 53 | // include more valuable information. They are included here because they are 54 | // currently not enabled in babel-preset-react. See the below threads for more info: 55 | // https://github.com/babel/babel/issues/4702 56 | // https://github.com/babel/babel/pull/3540#issuecomment-228673661 57 | // https://github.com/facebookincubator/create-react-app/issues/989 58 | plugins.push.apply(plugins, [ 59 | // Adds component stack to warning messages 60 | require.resolve('babel-plugin-transform-react-jsx-source'), 61 | // Adds __self attribute to JSX which React will use for some warnings 62 | require.resolve('babel-plugin-transform-react-jsx-self') 63 | ]); 64 | } 65 | 66 | if (env === 'test') { 67 | plugins.push.apply(plugins, [ 68 | // We always include this plugin regardless of environment 69 | // because of a Babel bug that breaks object rest/spread without it: 70 | // https://github.com/babel/babel/issues/4851 71 | require.resolve('babel-plugin-transform-es2015-parameters') 72 | ]); 73 | 74 | module.exports = { 75 | presets: [ 76 | // ES features necessary for user's Node version 77 | [require('babel-preset-env').default, { 78 | targets: { 79 | node: 'current', 80 | }, 81 | }], 82 | // JSX, Flow 83 | require.resolve('babel-preset-react') 84 | ], 85 | plugins: plugins 86 | }; 87 | } else { 88 | module.exports = { 89 | presets: [ 90 | // Latest stable ECMAScript features 91 | require.resolve('babel-preset-latest'), 92 | // JSX, Flow 93 | require.resolve('babel-preset-react') 94 | ], 95 | plugins: plugins.concat([ 96 | // function* () { yield 42; yield 43; } 97 | [require.resolve('babel-plugin-transform-regenerator'), { 98 | // Async functions are converted to generators by babel-preset-latest 99 | async: false 100 | }], 101 | ]) 102 | }; 103 | 104 | if (env === 'production') { 105 | // Optimization: hoist JSX that never changes out of render() 106 | // Disabled because of issues: 107 | // * https://github.com/facebookincubator/create-react-app/issues/525 108 | // * https://phabricator.babeljs.io/search/query/pCNlnC2xzwzx/ 109 | // * https://github.com/babel/babel/issues/4516 110 | // TODO: Enable again when these issues are resolved. 111 | // plugins.push.apply(plugins, [ 112 | // require.resolve('babel-plugin-transform-react-constant-elements') 113 | // ]); 114 | } 115 | } 116 | -------------------------------------------------------------------------------- /packages/babel-preset-react-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "babel-preset-react-app", 3 | "version": "2.0.1", 4 | "description": "Babel preset used by Create React App", 5 | "repository": "facebookincubator/create-react-app", 6 | "license": "BSD-3-Clause", 7 | "bugs": { 8 | "url": "https://github.com/facebookincubator/create-react-app/issues" 9 | }, 10 | "files": [ 11 | "index.js" 12 | ], 13 | "dependencies": { 14 | "babel-plugin-transform-class-properties": "6.16.0", 15 | "babel-plugin-transform-es2015-parameters": "6.18.0", 16 | "babel-plugin-transform-object-rest-spread": "6.19.0", 17 | "babel-plugin-transform-react-constant-elements": "6.9.1", 18 | "babel-plugin-transform-react-jsx": "6.8.0", 19 | "babel-plugin-transform-react-jsx-self": "6.11.0", 20 | "babel-plugin-transform-react-jsx-source": "6.9.0", 21 | "babel-plugin-transform-regenerator": "6.16.1", 22 | "babel-plugin-transform-runtime": "6.15.0", 23 | "babel-preset-env": "0.0.8", 24 | "babel-preset-latest": "6.16.0", 25 | "babel-preset-react": "6.16.0", 26 | "babel-runtime": "6.11.6" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/create-react-app/README.md: -------------------------------------------------------------------------------- 1 | # create-react-app 2 | 3 | This package includes the global command for [Create React App](https://github.com/facebookincubator/create-react-app). 4 | Please refer to its documentation: 5 | 6 | * [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) – How to create a new app. 7 | * [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App. 8 | -------------------------------------------------------------------------------- /packages/create-react-app/index.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | /** 4 | * Copyright (c) 2015-present, Facebook, Inc. 5 | * All rights reserved. 6 | * 7 | * This source code is licensed under the BSD-style license found in the 8 | * LICENSE file in the root directory of this source tree. An additional grant 9 | * of patent rights can be found in the PATENTS file in the same directory. 10 | */ 11 | 12 | // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 13 | // /!\ DO NOT MODIFY THIS FILE /!\ 14 | // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 15 | // 16 | // create-react-app is installed globally on people's computers. This means 17 | // that it is extremely difficult to have them upgrade the version and 18 | // because there's only one global version installed, it is very prone to 19 | // breaking changes. 20 | // 21 | // The only job of create-react-app is to init the repository and then 22 | // forward all the commands to the local version of create-react-app. 23 | // 24 | // If you need to add a new command, please add it to the scripts/ folder. 25 | // 26 | // The only reason to modify this file is to add more warnings and 27 | // troubleshooting information for the `create-react-app` command. 28 | // 29 | // Do not make breaking changes! We absolutely don't want to have to 30 | // tell people to update their global version of create-react-app. 31 | // 32 | // Also be careful with new language features. 33 | // This file must work on Node 0.10+. 34 | // 35 | // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 36 | // /!\ DO NOT MODIFY THIS FILE /!\ 37 | // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 38 | 39 | 'use strict'; 40 | 41 | var fs = require('fs'); 42 | var path = require('path'); 43 | var spawn = require('cross-spawn'); 44 | var chalk = require('chalk'); 45 | var semver = require('semver'); 46 | var argv = require('minimist')(process.argv.slice(2)); 47 | var pathExists = require('path-exists'); 48 | 49 | /** 50 | * Arguments: 51 | * --version - to print current version 52 | * --verbose - to print logs while init 53 | * --scripts-version 54 | * Example of valid values: 55 | * - a specific npm version: "0.22.0-rc1" 56 | * - a .tgz archive from any npm repo: "https://registry.npmjs.org/react-scripts/-/react-scripts-0.20.0.tgz" 57 | * - a package prepared with `tasks/clean_pack.sh`: "/Users/home/vjeux/create-react-app/react-scripts-0.22.0.tgz" 58 | */ 59 | var commands = argv._; 60 | if (commands.length === 0) { 61 | if (argv.version) { 62 | console.log('create-react-app version: ' + require('./package.json').version); 63 | process.exit(); 64 | } 65 | console.error( 66 | 'Usage: create-react-app [--verbose]' 67 | ); 68 | process.exit(1); 69 | } 70 | 71 | createApp(commands[0], argv.verbose, argv['scripts-version']); 72 | 73 | function createApp(name, verbose, version) { 74 | var root = path.resolve(name); 75 | var appName = path.basename(root); 76 | 77 | checkAppName(appName); 78 | 79 | if (!pathExists.sync(name)) { 80 | fs.mkdirSync(root); 81 | } else if (!isSafeToCreateProjectIn(root)) { 82 | console.log('The directory `' + name + '` contains file(s) that could conflict. Aborting.'); 83 | process.exit(1); 84 | } 85 | 86 | console.log( 87 | 'Creating a new React app in ' + root + '.' 88 | ); 89 | console.log(); 90 | 91 | var packageJson = { 92 | name: appName, 93 | version: '0.1.0', 94 | private: true, 95 | }; 96 | fs.writeFileSync( 97 | path.join(root, 'package.json'), 98 | JSON.stringify(packageJson, null, 2) 99 | ); 100 | var originalDirectory = process.cwd(); 101 | process.chdir(root); 102 | 103 | console.log('Installing packages. This might take a couple minutes.'); 104 | console.log('Installing react-scripts...'); 105 | console.log(); 106 | 107 | run(root, appName, version, verbose, originalDirectory); 108 | } 109 | 110 | function install(packageToInstall, verbose, callback) { 111 | function fallbackToNpm() { 112 | var npmArgs = [ 113 | 'install', 114 | verbose && '--verbose', 115 | '--save-dev', 116 | '--save-exact', 117 | packageToInstall, 118 | ].filter(function(e) { return e; }); 119 | var npmProc = spawn('npm', npmArgs, {stdio: 'inherit'}); 120 | npmProc.on('close', function (code) { 121 | callback(code, 'npm', npmArgs); 122 | }); 123 | } 124 | 125 | var yarnArgs = [ 126 | 'add', 127 | '--dev', 128 | '--exact', 129 | packageToInstall, 130 | ]; 131 | var yarnProc; 132 | var yarnExists = true; 133 | try { 134 | yarnProc = spawn('yarn', yarnArgs, {stdio: 'inherit'}); 135 | yarnProc.on('error', function (err) { 136 | if (err.code === 'ENOENT') { 137 | yarnExists = false; 138 | } 139 | }); 140 | yarnProc.on('close', function (code) { 141 | if (yarnExists) { 142 | callback(code, 'yarn', yarnArgs); 143 | return; 144 | } 145 | }); 146 | } catch (err) { 147 | // It's not clear why we end up here in some cases but we need this. 148 | // https://github.com/facebookincubator/create-react-app/issues/1200 149 | yarnExists = false; 150 | fallbackToNpm(); 151 | } 152 | } 153 | 154 | function run(root, appName, version, verbose, originalDirectory) { 155 | var packageToInstall = getInstallPackage(version); 156 | var packageName = getPackageName(packageToInstall); 157 | 158 | install(packageToInstall, verbose, function (code, command, args) { 159 | if (code !== 0) { 160 | console.error('`' + command + ' ' + args.join(' ') + '` failed'); 161 | return; 162 | } 163 | 164 | checkNodeVersion(packageName); 165 | 166 | var scriptsPath = path.resolve( 167 | process.cwd(), 168 | 'node_modules', 169 | packageName, 170 | 'scripts', 171 | 'init.js' 172 | ); 173 | var init = require(scriptsPath); 174 | init(root, appName, verbose, originalDirectory); 175 | }); 176 | } 177 | 178 | function getInstallPackage(version) { 179 | var packageToInstall = 'react-scripts'; 180 | var validSemver = semver.valid(version); 181 | if (validSemver) { 182 | packageToInstall += '@' + validSemver; 183 | } else if (version) { 184 | // for tar.gz or alternative paths 185 | packageToInstall = version; 186 | } 187 | return packageToInstall; 188 | } 189 | 190 | // Extract package name from tarball url or path. 191 | function getPackageName(installPackage) { 192 | if (installPackage.indexOf('.tgz') > -1) { 193 | // The package name could be with or without semver version, e.g. react-scripts-0.2.0-alpha.1.tgz 194 | // However, this function returns package name only wihout semver version. 195 | return installPackage.match(/^.+\/(.+?)(?:-\d+.+)?\.tgz$/)[1]; 196 | } else if (installPackage.indexOf('@') > 0) { 197 | // Do not match @scope/ when stripping off @version or @tag 198 | return installPackage.charAt(0) + installPackage.substr(1).split('@')[0]; 199 | } 200 | return installPackage; 201 | } 202 | 203 | function checkNodeVersion(packageName) { 204 | var packageJsonPath = path.resolve( 205 | process.cwd(), 206 | 'node_modules', 207 | packageName, 208 | 'package.json' 209 | ); 210 | var packageJson = require(packageJsonPath); 211 | if (!packageJson.engines || !packageJson.engines.node) { 212 | return; 213 | } 214 | 215 | if (!semver.satisfies(process.version, packageJson.engines.node)) { 216 | console.error( 217 | chalk.red( 218 | 'You are currently running Node %s but create-react-app requires %s.' + 219 | ' Please use a supported version of Node.\n' 220 | ), 221 | process.version, 222 | packageJson.engines.node 223 | ); 224 | process.exit(1); 225 | } 226 | } 227 | 228 | function checkAppName(appName) { 229 | // TODO: there should be a single place that holds the dependencies 230 | var dependencies = ['react', 'react-dom']; 231 | var devDependencies = ['react-scripts']; 232 | var allDependencies = dependencies.concat(devDependencies).sort(); 233 | 234 | if (allDependencies.indexOf(appName) >= 0) { 235 | console.error( 236 | chalk.red( 237 | 'We cannot create a project called `' + appName + '` because a dependency with the same name exists.\n' + 238 | 'Due to the way npm works, the following names are not allowed:\n\n' 239 | ) + 240 | chalk.cyan( 241 | allDependencies.map(function(depName) { 242 | return ' ' + depName; 243 | }).join('\n') 244 | ) + 245 | chalk.red('\n\nPlease choose a different project name.') 246 | ); 247 | process.exit(1); 248 | } 249 | } 250 | 251 | // If project only contains files generated by GH, it’s safe. 252 | // We also special case IJ-based products .idea because it integrates with CRA: 253 | // https://github.com/facebookincubator/create-react-app/pull/368#issuecomment-243446094 254 | function isSafeToCreateProjectIn(root) { 255 | var validFiles = [ 256 | '.DS_Store', 'Thumbs.db', '.git', '.gitignore', '.idea', 'README.md', 'LICENSE' 257 | ]; 258 | return fs.readdirSync(root) 259 | .every(function(file) { 260 | return validFiles.indexOf(file) >= 0; 261 | }); 262 | } 263 | -------------------------------------------------------------------------------- /packages/create-react-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "create-react-app", 3 | "version": "1.0.0", 4 | "keywords": [ 5 | "react" 6 | ], 7 | "description": "Create React apps with no build configuration.", 8 | "repository": "facebookincubator/create-react-app", 9 | "license": "BSD-3-Clause", 10 | "engines": { 11 | "node": ">=4" 12 | }, 13 | "bugs": { 14 | "url": "https://github.com/facebookincubator/create-react-app/issues" 15 | }, 16 | "files": [ 17 | "index.js" 18 | ], 19 | "bin": { 20 | "create-react-app": "./index.js" 21 | }, 22 | "dependencies": { 23 | "chalk": "^1.1.1", 24 | "cross-spawn": "^4.0.0", 25 | "minimist": "^1.2.0", 26 | "path-exists": "^2.1.0", 27 | "semver": "^5.0.3" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /packages/eslint-config-react-app/README.md: -------------------------------------------------------------------------------- 1 | # eslint-config-react-app 2 | 3 | This package includes the shareable ESLint configuration used by [Create React App](https://github.com/facebookincubator/create-react-app). 4 | Please refer to its documentation: 5 | 6 | * [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) – How to create a new app. 7 | * [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App. 8 | 9 | ## Usage in Create React App Projects 10 | 11 | The easiest way to use this configuration is with [Create React App](https://github.com/facebookincubator/create-react-app), which includes it by default. **You don’t need to install it separately in Create React App projects.** 12 | 13 | ## Usage Outside of Create React App 14 | 15 | If you want to use this ESLint configuration in a project not built with Create React App, you can install it with following steps. 16 | 17 | First, install this package, ESLint and the necessary plugins. 18 | 19 | ```sh 20 | npm install --save-dev eslint-config-react-app babel-eslint@7.0.0 eslint@3.8.1 eslint-plugin-flowtype@2.21.0 eslint-plugin-import@2.0.1 eslint-plugin-jsx-a11y@2.2.3 eslint-plugin-react@6.4.1 21 | ``` 22 | 23 | Then create a file named `.eslintrc` with following contents in the root folder of your project: 24 | 25 | ```js 26 | { 27 | "extends": "react-app" 28 | } 29 | ``` 30 | 31 | That's it! You can override the settings from `eslint-config-react-app` by editing the `.eslintrc` file. Learn more about [configuring ESLint](http://eslint.org/docs/user-guide/configuring) on the ESLint website. 32 | -------------------------------------------------------------------------------- /packages/eslint-config-react-app/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | // Inspired by https://github.com/airbnb/javascript but less opinionated. 11 | 12 | // We use eslint-loader so even warnings are very visible. 13 | // This is why we only use "WARNING" level for potential errors, 14 | // and we don't use "ERROR" level at all. 15 | 16 | // In the future, we might create a separate list of rules for production. 17 | // It would probably be more strict. 18 | 19 | module.exports = { 20 | root: true, 21 | 22 | parser: 'babel-eslint', 23 | 24 | plugins: ['import', 'flowtype', 'jsx-a11y', 'react'], 25 | 26 | env: { 27 | browser: true, 28 | commonjs: true, 29 | es6: true, 30 | jest: true, 31 | node: true 32 | }, 33 | 34 | parserOptions: { 35 | ecmaVersion: 6, 36 | sourceType: 'module', 37 | ecmaFeatures: { 38 | jsx: true, 39 | generators: true, 40 | experimentalObjectRestSpread: true 41 | } 42 | }, 43 | 44 | settings: { 45 | 'import/ignore': [ 46 | 'node_modules' 47 | ], 48 | 'import/extensions': ['.js'], 49 | 'import/resolver': { 50 | node: { 51 | extensions: ['.js', '.json'] 52 | } 53 | } 54 | }, 55 | 56 | rules: { 57 | // http://eslint.org/docs/rules/ 58 | 'array-callback-return': 'warn', 59 | 'default-case': ['warn', { commentPattern: '^no default$' }], 60 | 'dot-location': ['warn', 'property'], 61 | eqeqeq: ['warn', 'allow-null'], 62 | 'guard-for-in': 'warn', 63 | 'new-parens': 'warn', 64 | 'no-array-constructor': 'warn', 65 | 'no-caller': 'warn', 66 | 'no-cond-assign': ['warn', 'always'], 67 | 'no-const-assign': 'warn', 68 | 'no-control-regex': 'warn', 69 | 'no-delete-var': 'warn', 70 | 'no-dupe-args': 'warn', 71 | 'no-dupe-class-members': 'warn', 72 | 'no-dupe-keys': 'warn', 73 | 'no-duplicate-case': 'warn', 74 | 'no-empty-character-class': 'warn', 75 | 'no-empty-pattern': 'warn', 76 | 'no-eval': 'warn', 77 | 'no-ex-assign': 'warn', 78 | 'no-extend-native': 'warn', 79 | 'no-extra-bind': 'warn', 80 | 'no-extra-label': 'warn', 81 | 'no-fallthrough': 'warn', 82 | 'no-func-assign': 'warn', 83 | 'no-implied-eval': 'warn', 84 | 'no-invalid-regexp': 'warn', 85 | 'no-iterator': 'warn', 86 | 'no-label-var': 'warn', 87 | 'no-labels': ['warn', { allowLoop: false, allowSwitch: false }], 88 | 'no-lone-blocks': 'warn', 89 | 'no-loop-func': 'warn', 90 | 'no-mixed-operators': ['warn', { 91 | groups: [ 92 | ['&', '|', '^', '~', '<<', '>>', '>>>'], 93 | ['==', '!=', '===', '!==', '>', '>=', '<', '<='], 94 | ['&&', '||'], 95 | ['in', 'instanceof'] 96 | ], 97 | allowSamePrecedence: false 98 | }], 99 | 'no-multi-str': 'warn', 100 | 'no-native-reassign': 'warn', 101 | 'no-negated-in-lhs': 'warn', 102 | 'no-new-func': 'warn', 103 | 'no-new-object': 'warn', 104 | 'no-new-symbol': 'warn', 105 | 'no-new-wrappers': 'warn', 106 | 'no-obj-calls': 'warn', 107 | 'no-octal': 'warn', 108 | 'no-octal-escape': 'warn', 109 | 'no-redeclare': 'warn', 110 | 'no-regex-spaces': 'warn', 111 | 'no-restricted-syntax': [ 112 | 'warn', 113 | 'LabeledStatement', 114 | 'WithStatement', 115 | ], 116 | 'no-script-url': 'warn', 117 | 'no-self-assign': 'warn', 118 | 'no-self-compare': 'warn', 119 | 'no-sequences': 'warn', 120 | 'no-shadow-restricted-names': 'warn', 121 | 'no-sparse-arrays': 'warn', 122 | 'no-template-curly-in-string': 'warn', 123 | 'no-this-before-super': 'warn', 124 | 'no-throw-literal': 'warn', 125 | 'no-undef': 'error', 126 | 'no-unexpected-multiline': 'warn', 127 | 'no-unreachable': 'warn', 128 | 'no-unused-expressions': ['warn', { 129 | 'allowShortCircuit': true, 130 | 'allowTernary': true 131 | }], 132 | 'no-unused-labels': 'warn', 133 | 'no-unused-vars': ['warn', { 134 | vars: 'local', 135 | varsIgnorePattern: '^_', 136 | args: 'none' 137 | }], 138 | 'no-use-before-define': ['warn', 'nofunc'], 139 | 'no-useless-computed-key': 'warn', 140 | 'no-useless-concat': 'warn', 141 | 'no-useless-constructor': 'warn', 142 | 'no-useless-escape': 'warn', 143 | 'no-useless-rename': ['warn', { 144 | ignoreDestructuring: false, 145 | ignoreImport: false, 146 | ignoreExport: false, 147 | }], 148 | 'no-with': 'warn', 149 | 'no-whitespace-before-property': 'warn', 150 | 'operator-assignment': ['warn', 'always'], 151 | radix: 'warn', 152 | 'require-yield': 'warn', 153 | 'rest-spread-spacing': ['warn', 'never'], 154 | strict: ['warn', 'never'], 155 | 'unicode-bom': ['warn', 'never'], 156 | 'use-isnan': 'warn', 157 | 'valid-typeof': 'warn', 158 | 159 | // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/ 160 | 161 | // TODO: import rules are temporarily disabled because they don't play well 162 | // with how eslint-loader only checks the file you change. So if module A 163 | // imports module B, and B is missing a default export, the linter will 164 | // record this as an issue in module A. Now if you fix module B, the linter 165 | // will not be aware that it needs to re-lint A as well, so the error 166 | // will stay until the next restart, which is really confusing. 167 | 168 | // This is probably fixable with a patch to eslint-loader. 169 | // When file A is saved, we want to invalidate all files that import it 170 | // *and* that currently have lint errors. This should fix the problem. 171 | // (As an exception, import/no-webpack-loader-syntax can be enabled already 172 | // because it doesn't depend on whether the file exists, so this issue 173 | // doesn't apply to it.) 174 | 175 | // 'import/default': 'warn', 176 | // 'import/export': 'warn', 177 | // 'import/named': 'warn', 178 | // 'import/namespace': 'warn', 179 | // 'import/no-amd': 'warn', 180 | // 'import/no-duplicates': 'warn', 181 | // 'import/no-extraneous-dependencies': 'warn', 182 | // 'import/no-named-as-default': 'warn', 183 | // 'import/no-named-as-default-member': 'warn', 184 | // 'import/no-unresolved': ['warn', { commonjs: true }], 185 | // We don't support configuring Webpack using import source strings, so this 186 | // is always an error. 187 | 'import/no-webpack-loader-syntax': 'error', 188 | 189 | // https://github.com/yannickcr/eslint-plugin-react/tree/master/docs/rules 190 | 'react/jsx-equals-spacing': ['warn', 'never'], 191 | 'react/jsx-no-duplicate-props': ['warn', { ignoreCase: true }], 192 | 'react/jsx-no-undef': 'error', 193 | 'react/jsx-pascal-case': ['warn', { 194 | allowAllCaps: true, 195 | ignore: [], 196 | }], 197 | 'react/jsx-uses-react': 'warn', 198 | 'react/jsx-uses-vars': 'warn', 199 | 'react/no-danger-with-children': 'warn', 200 | 'react/no-deprecated': 'warn', 201 | 'react/no-direct-mutation-state': 'warn', 202 | 'react/no-is-mounted': 'warn', 203 | 'react/react-in-jsx-scope': 'error', 204 | 'react/require-render-return': 'warn', 205 | 'react/style-prop-object': 'warn', 206 | 207 | // https://github.com/evcohen/eslint-plugin-jsx-a11y/tree/master/docs/rules 208 | 'jsx-a11y/aria-role': 'warn', 209 | 'jsx-a11y/img-has-alt': 'warn', 210 | 'jsx-a11y/img-redundant-alt': 'warn', 211 | 'jsx-a11y/no-access-key': 'warn', 212 | 213 | // https://github.com/gajus/eslint-plugin-flowtype 214 | 'flowtype/define-flow-type': 'warn', 215 | 'flowtype/require-valid-file-annotation': 'warn', 216 | 'flowtype/use-flow-type': 'warn' 217 | } 218 | }; 219 | -------------------------------------------------------------------------------- /packages/eslint-config-react-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "eslint-config-react-app", 3 | "version": "0.5.0", 4 | "description": "ESLint configuration used by Create React App", 5 | "repository": "facebookincubator/create-react-app", 6 | "license": "BSD-3-Clause", 7 | "bugs": { 8 | "url": "https://github.com/facebookincubator/create-react-app/issues" 9 | }, 10 | "files": [ 11 | "index.js" 12 | ], 13 | "peerDependencies": { 14 | "babel-eslint": "^7.0.0", 15 | "eslint": "^3.8.1", 16 | "eslint-plugin-flowtype": "^2.21.0", 17 | "eslint-plugin-import": "^2.0.1", 18 | "eslint-plugin-jsx-a11y": "^2.2.3", 19 | "eslint-plugin-react": "^6.4.1" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /packages/react-dev-utils/InterpolateHtmlPlugin.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | // This Webpack plugin lets us interpolate custom variables into `index.html`. 11 | // Usage: `new InterpolateHtmlPlugin({ 'MY_VARIABLE': 42 })` 12 | // Then, you can use %MY_VARIABLE% in your `index.html`. 13 | 14 | // It works in tandem with HtmlWebpackPlugin. 15 | // Learn more about creating plugins like this: 16 | // https://github.com/ampedandwired/html-webpack-plugin#events 17 | 18 | 'use strict'; 19 | const escapeStringRegexp = require('escape-string-regexp'); 20 | 21 | class InterpolateHtmlPlugin { 22 | constructor(replacements) { 23 | this.replacements = replacements; 24 | } 25 | 26 | apply(compiler) { 27 | compiler.plugin('compilation', compilation => { 28 | compilation.plugin('html-webpack-plugin-before-html-processing', 29 | (data, callback) => { 30 | // Run HTML through a series of user-specified string replacements. 31 | Object.keys(this.replacements).forEach(key => { 32 | const value = this.replacements[key]; 33 | data.html = data.html.replace( 34 | new RegExp('%' + escapeStringRegexp(key) + '%', 'g'), 35 | value 36 | ); 37 | }); 38 | callback(null, data); 39 | } 40 | ); 41 | }); 42 | } 43 | } 44 | 45 | module.exports = InterpolateHtmlPlugin; 46 | -------------------------------------------------------------------------------- /packages/react-dev-utils/README.md: -------------------------------------------------------------------------------- 1 | # react-dev-utils 2 | 3 | This package includes some utilities used by [Create React App](https://github.com/facebookincubator/create-react-app). 4 | Please refer to its documentation: 5 | 6 | * [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) – How to create a new app. 7 | * [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App. 8 | 9 | ## Usage in Create React App Projects 10 | 11 | These utilities come by default with [Create React App](https://github.com/facebookincubator/create-react-app), which includes it by default. **You don’t need to install it separately in Create React App projects.** 12 | 13 | ## Usage Outside of Create React App 14 | 15 | If you don’t use Create React App, or if you [ejected](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-eject), you may keep using these utilities. Their development will be aligned with Create React App, so major versions of these utilities may come out relatively often. Feel free to fork or copy and paste them into your projects if you’d like to have more control over them, or feel free to use the old versions. Not all of them are React-specific, but we might make some of them more React-specific in the future. 16 | 17 | ### Entry Points 18 | 19 | There is no single entry point. You can only import individual top-level modules. 20 | 21 | #### `new InterpolateHtmlPlugin(replacements: {[key:string]: string})` 22 | 23 | This Webpack plugin lets us interpolate custom variables into `index.html`. 24 | It works in tandem with [HtmlWebpackPlugin](https://github.com/ampedandwired/html-dev-plugin) 2.x via its [events](https://github.com/ampedandwired/html-dev-plugin#events). 25 | 26 | ```js 27 | var path = require('path'); 28 | var HtmlWebpackPlugin = require('html-dev-plugin'); 29 | var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); 30 | 31 | // Webpack config 32 | var publicUrl = '/my-custom-url'; 33 | 34 | module.exports = { 35 | output: { 36 | // ... 37 | publicPath: publicUrl + '/' 38 | }, 39 | // ... 40 | plugins: [ 41 | // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.: 42 | // 43 | new InterpolateHtmlPlugin({ 44 | PUBLIC_URL: publicUrl 45 | // You can pass any key-value pairs, this was just an example. 46 | // WHATEVER: 42 will replace %WHATEVER% with 42 in index.html. 47 | }), 48 | // Generates an `index.html` file with the