Create React apps with no build configuration.
- Creating an App – How to create a new app.
- User Guide – How to develop apps bootstrapped with Create React App.
Create React App works on macOS, Windows, and Linux.
If something doesn’t work, please file an issue.
If you have questions or need help, please ask in GitHub Discussions.
npx create-react-app my-app
cd my-app
npm start
If you've previously installed create-react-app
globally via npm install -g create-react-app
, we recommend you uninstall the package using npm uninstall -g create-react-app
or yarn global remove create-react-app
to ensure that npx always uses the latest version.
(npx comes with npm 5.2+ and higher, see instructions for older npm versions)
Then open http://localhost:3000/ to see your app.
When you’re ready to deploy to production, create a minified bundle with npm run build
.
You don’t need to install or configure tools like webpack or Babel.
They are preconfigured and hidden so that you can focus on the code.
Create a project, and you’re good to go.
You’ll need to have Node 14.0.0 or later version on your local development machine (but it’s not required on the server). We recommend using the latest LTS version. You can use nvm (macOS/Linux) or nvm-windows to switch Node versions between different projects.
To create a new app, you may choose one of the following methods:
npx create-react-app my-app
(npx is a package runner tool that comes with npm 5.2+ and higher, see instructions for older npm versions)
npm init react-app my-app
npm init <initializer>
is available in npm 6+
yarn create react-app my-app
yarn create <starter-kit-package>
is available in Yarn 0.25+
It will create a directory called my-app
inside the current folder.
Inside that directory, it will generate the initial project structure and install the transitive dependencies:
my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js
└── setupTests.js
No configuration or complicated folder structures, only the files you need to build your app.
Once the installation is done, you can open your project folder:
cd my-app
Inside the newly created project, you can run some built-in commands:
Runs the app in development mode.
Open http://localhost:3000 to view it in the browser.
The page will automatically reload if you make changes to the code.
You will see the build errors and lint warnings in the console.
Runs the test watcher in an interactive mode.
By default, runs tests related to files changed since the last commit.
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.
You can find detailed instructions on using Create React App and many tips in its documentation.
Please refer to the User Guide for this and other information.
-
One Dependency: There is only one build dependency. It uses webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them.
-
No Configuration Required: You don't need to configure anything. A reasonably good configuration of both development and production builds is handled for you so you can focus on writing code.
-
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.
Your environment will have everything you need to build a modern single-page React app:
- React, JSX, ES6, TypeScript and Flow syntax support.
- Language extras beyond ES6 like the object spread operator.
- Autoprefixed CSS, so you don’t need
-webkit-
or other prefixes. - A fast interactive unit test runner with built-in support for coverage reporting.
- A live development server that warns about common mistakes.
- A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps.
- An offline-first service worker and a web app manifest, meeting all the Progressive Web App criteria. (Note: Using the service worker is opt-in as of
[email protected]
and higher) - Hassle-free updates for the above tools with a single dependency.
Check out this guide for an overview of how these tools fit together.
The tradeoff is that these tools are preconfigured to work in a specific way. If your project needs more customization, you can "eject" and customize it, but then you will need to maintain this configuration.
Create React App is a great fit for:
- Learning React in a comfortable and feature-rich development environment.
- Starting new single-page React applications.
- Creating examples with React for your libraries and components.
Here are a few common cases where you might want to try something else:
-
If you want to try React without hundreds of transitive build tool dependencies, consider using a single HTML file or an online sandbox instead.
-
If you need to integrate React code with a server-side template framework like Rails, Django or Symfony, or if you’re not building a single-page app, consider using nwb, or Neutrino which are more flexible. For Rails specifically, you can use Rails Webpacker. For Symfony, try Symfony's webpack Encore.
-
If you need to publish a React component, nwb can also do this, as well as Neutrino's react-components preset.
-
If you want to do server rendering with React and Node.js, check out Next.js or Razzle. Create React App is agnostic of the backend, and only produces static HTML/JS/CSS bundles.
-
If your website is mostly static (for example, a portfolio or a blog), consider using Gatsby or Next.js. Unlike Create React App, Gatsby pre-renders the website into HTML at build time. Next.js supports both server rendering and pre-rendering.
-
Finally, if you need more customization, check out Neutrino and its React preset.
All of the above tools can work with little to no configuration.
If you prefer configuring the build yourself, follow this guide.
Looking for something similar, but for React Native?
Check out Expo CLI.
We'd love to have your helping hand on create-react-app
! See CONTRIBUTING.md for more information on what we're looking for and how to get started.
Create React App is a community maintained project and all contributors are volunteers. If you'd like to support the future development of Create React App then please consider donating to our Open Collective.
This project exists thanks to all the people who contribute.
Thanks to Netlify for hosting our documentation.
We are grateful to the authors of existing related projects for their ideas and collaboration:
Create React App is open source software licensed as MIT. The Create React App logo is licensed under a Creative Commons Attribution 4.0 International license.
create-react-app's People
Forkers
thm-design eiriklv npverni pirelenito hackerrdave vflydev dlmr kedoska javidhsueh hzoo deepakkj labitxet pavelmp danthareja conorhastings andrewraycode jagadeeshmeesala chocnut billf blotto mubinov pkuong sekouperry codingpancakes gtona mariano54 casesandberg ui-frontend christophior michaelserna glennreyes neuroradiology phwd applesaucesome tslater manrueda elrumordelaluz jakedahm chibicode marcelmokos aisis imjerrybao okjedi mtinkering marius92mc codeaholicguy mahesh4eva lukeout tylerlh clock21am briankinsella marufsiddiqui sh4n3d4v15 tanduong rgaidot admmasters mplee goshacmd deadcoder0904 objectivezhou bryan-snyder pavac f2ealexis salvadoragron cosmozhu umit thirdj tannerlinsley supasate marcello3d lakshmi-narasimha akanta21 dougnukem haveagoodda idugcoal cybernetics cly szwork2013 paulha mahendrasv vutran xkawi interestinghua jiansen keyz youngshine kira8565 lakeoffaith yurenyong123 calebkonglei davidtvrdon alanaaya parksangkil sotayamashita vanloswang ichenhui mfrohberg xhad jcullen macndesigncreate-react-app's Issues
Pointless stack trace on lint errors
Built-in project templates
Branching from discussion #11 (comment).
This is something I want to support in a potential v2.
create-react-app my-app # default like structure like now
create-react-app my-app --from empty
create-react-app my-app --from todomvc
create-react-app my-app --from relay-starter
create-react-app my-app --from you-see-where-im-going
I’m opposed to turning this project into a code generator. However I think initial templates can be useful because they offer a nice way to “clone” examples. We could move the official React examples into this system, and libraries could provide third party “starters”.
I’m not sure this is a good idea but I’d love to be able to tell people to run create-react-app my-app --from redux-todomvc
instead of telling them to clone a project, run npm install
, etc.
Add flags and dead code elimination
Hacks like #52 are frustrating.
We need a system that lets us write stuff like
if (__REPO__) {
var path = ...
} else if (__DEPENDENCY__) {
var path = ...
} else if (__EJECTED__) {
var path = ...
}
and eliminate all other branches on eject.
No .jsx extension?
Note from Maintainers
We support JSX extension since 0.4.1 even though we don’t recommend it.
Read the release notes.
Shouldn't the default be to use .jsx extension in files where JSX is in use? As configured, the loader isn't set up to transpile jsx. Many code editors will provide better coloring/linting when detecting a .jsx file
CSS/React Hot Reloading
I think one of the best parts of something like this is that typically complex things to setup like hot reloading just work out of the box. It brings those advanced workflows to everyone.
Hot reloading is such a crucial part of my dev experience, and this project could expose it to others. The only problem is that React hot reloading doesn't work all the time, so I don't know if that is too confusing to beginners.
I haven't looked at how this project actually works yet, but I can't think of any reason why this wouldn't work. Just automatically include webpack-hot-middleware
in dev mode, add the right entry point, add the right babel transform, etc. It can be completely hidden from the user.
Don't assume the project is hosted at the root
We currently have an assumption in publicPath
in webpack.config.prod.js
that the bundle is served from the root, but it may not be (e.g. with GH Pages, it’ll be at you.github.io/projectname/
).
I don’t want to add configuration for this but it would be great if we could parse homepage
from package.json
and use it to determine the publicPath
. We can then document it or add a prompt (or a notice) as part of the creation flow.
Licensing in autogenerated code
The autogenerated code says "copyright facebook according to the license in the root of this repo". However, that code won't actually go into a FB project. And there is no license at the root of the repo. Should we remove that?
Deployment with Surge or similar
Right now I just ran the program, did npm run build
, and then surge -p build
. Five seconds later I can show this to others:
https://highfalutin-sofa.surge.sh
I can also customize the URL to whatever I want (if available).
I feel like this is a great feature that could be added—one command, no config deployments. Imagine you're learning React and did something cool and want to share it but have no idea what Heroku, Digital Ocean, etc. are. This did it for you!
surge
can be added as a dev dependency and a deploy
script can be added that would be npm run build && surge -p build
.
What do you think?
Make the generated app work if you flowcheck it
It would be nice if it were possible to add flow to the default project. I tried a minimal flow setup, adding a blank .flowconfig
to the root and // @flow
to App.css
. Four errors:
For the first two I might be configuring things wrong? The second two seem like flow doesn't know how to handle the non-js imports that webpack is handling for us. I'm not sure what the right way to resolve this.
I was using flow version 0.29.0
Add server side rendering?
We use SSR pretty religiously. wondering if this will eventually support SSR - realize the complexity it would add to this project
Add “Recompiling...” log after file change
This is what webpack calls "INVALID".
I removed it completely but it was useful. We just need a better message.
Ensure eslint-loader works in a sensible way in prod
I haven’t actually checked what it does.
I think we don’t want to fatal on build, but we want to print any errors/warnings.
We also want to make sure it doesn’t include console.log()
s with those warnings into prod bundle.
Can't `npm start` new app, SyntaxError: Unexpected token => on a fresh install
Edit from maintainers: the project requires Node >= 4.0.
We’ll fix the CLI to report an error in earlier versions.
I can't get the local server started. My steps to the error:
npm install -g create-react-app
create-react-app hello
- No errors creating the app
cd hello
npm start
> [email protected] start /Users/olivier/Sites/sandbox/hello
> react-scripts start
/Users/olivier/Sites/sandbox/hello/node_modules/react-scripts/scripts/start.js:23
var isSmokeTest = process.argv.some(arg =>
^^
SyntaxError: Unexpected token =>
at exports.runInThisContext (vm.js:73:16)
at Module._compile (module.js:443:25)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Function.Module.runMain (module.js:501:10)
at startup (node.js:129:16)
at node.js:814:3
Using npm v3.10.5 on OS X 10.11.6
Make package.json complete
Currently missing repository
and license
fields so npm complains.
Would be good to add other meta information similar to React.
Don’t forget we have two package.json
s so both need to be updated.
Remove purely stylistic ESLint rules
As discussed in #11, we don’t want to argue about semicolons.
We do want to keep the rules that help prevent bugs or undesired patterns.
src paths for files are '/' and for a static site should be './' in build
Currently the src paths are not friendly for a static site. They only work for using a server.
Is there any plan to make this work with a simple: open index.html
?
Or is this project only intended for people running this on a server?
Improve npm install time / space
Right now it takes 2m10s to create a new project (almost everything is npm install
) and generates a 81meg node_modules/
folder. We need to figure out a way to cut this down, this is depressing :(
"dependencies": {
"autoprefixer": "^6.3.7",
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-plugin-transform-object-rest-spread": "^6.8.0",
"babel-plugin-transform-react-constant-elements": "^6.9.1",
"babel-preset-es2015": "^6.9.0",
"babel-preset-es2016": "^6.11.3",
"babel-preset-react": "^6.11.1",
"css-loader": "^0.23.1",
"cross-spawn": "^4.0.0",
"eslint": "^2.13.1",
"eslint-config-airbnb": "^9.0.1",
"eslint-loader": "^1.4.1",
"eslint-plugin-import": "^1.10.3",
"eslint-plugin-jsx-a11y": "^1.5.5",
"eslint-plugin-react": "^5.2.2",
"file-loader": "^0.9.0",
"html-webpack-plugin": "^2.22.0",
"json-loader": "^0.5.4",
"opn": "^4.0.2",
"postcss-loader": "^0.9.1",
"rimraf": "^2.5.3",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
},
"devDependencies": {
"react": "^15.2.1",
"react-dom": "^15.2.1"
}
└─┬ [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ └─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ └─┬ [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ └─┬ [email protected]
│ │ └─┬ [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ └── [email protected]
├── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ └─┬ [email protected]
│ │ └── [email protected]
│ └─┬ [email protected]
│ └── [email protected]
├─┬ [email protected]
│ └─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ └─┬ [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ └─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ └─┬ [email protected]
│ │ │ └── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └─┬ [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └─┬ [email protected]
│ │ │ │ └── [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └─┬ [email protected]
│ │ │ └── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └─┬ [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ └─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ └── [email protected]
│ │ │ └─┬ [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ └── [email protected]
│ │ │ └─┬ [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ └── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ └── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ └─┬ [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ └─┬ [email protected]
│ │ │ │ └── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ └── [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ └── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ └─┬ [email protected]
│ └── [email protected]
├─┬ [email protected]
│ └── [email protected]
├── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │ └── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ └── [email protected]
├── [email protected]
├── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├─┬ [email protected]
│ │ │ │ │ └─┬ [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── [email protected]
│ │ │ │ └── [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ └── [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └─┬ [email protected]
│ │ │ │ └── [email protected]
│ │ │ └── [email protected]
│ │ └── [email protected]
│ └── [email protected]
├── [email protected]
├─┬ [email protected]
│ └─┬ [email protected]
│ └── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├─┬ [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └─┬ [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ └─┬ [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ └─┬ [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ ├─┬ [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── [email protected]
│ │ │ │ └── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ └─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ └─┬ [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ └── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ ├─┬ [email protected]
│ │ │ │ │ └─┬ [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ └── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ └── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ ├─┬ [email protected]
│ │ │ │ │ └── [email protected]
│ │ │ │ └── [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── [email protected]
│ │ │ └─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ └─┬ [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ └── [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ └── [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ ├─┬ [email protected]
│ │ │ │ │ └── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├─┬ [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├─┬ [email protected]
│ │ │ │ │ │ ├─┬ [email protected]
│ │ │ │ │ │ │ └── [email protected]
│ │ │ │ │ │ └── [email protected]
│ │ │ │ │ ├─┬ [email protected]
│ │ │ │ │ │ └── [email protected]
│ │ │ │ │ └── [email protected]
│ │ │ │ └── [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├─┬ [email protected]
│ │ │ │ │ └── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├─┬ [email protected]
│ │ │ │ │ └── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├─┬ [email protected]
│ │ │ │ │ └── [email protected]
│ │ │ │ ├─┬ [email protected]
│ │ │ │ │ ├─┬ [email protected]
│ │ │ │ │ │ ├── [email protected]
│ │ │ │ │ │ ├── [email protected]
│ │ │ │ │ │ ├── [email protected]
│ │ │ │ │ │ └── [email protected]
│ │ │ │ │ ├─┬ [email protected]
│ │ │ │ │ │ └── [email protected]
│ │ │ │ │ ├─┬ [email protected]
│ │ │ │ │ │ ├── [email protected]
│ │ │ │ │ │ ├─┬ [email protected]
│ │ │ │ │ │ │ └── [email protected]
│ │ │ │ │ │ ├── [email protected]
│ │ │ │ │ │ └── [email protected]
│ │ │ │ │ └─┬ [email protected]
│ │ │ │ │ └── [email protected]
│ │ │ │ ├─┬ [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── [email protected]
│ │ │ │ ├─┬ [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├─┬ [email protected]
│ │ │ │ │ │ ├── [email protected]
│ │ │ │ │ │ ├── [email protected]
│ │ │ │ │ │ └── [email protected]
│ │ │ │ │ └─┬ [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├─┬ [email protected]
│ │ │ │ │ │ └── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├─┬ [email protected]
│ │ │ │ │ │ └── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├─┬ [email protected]
│ │ │ │ │ └── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ └─┬ [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├─┬ [email protected]
│ │ │ │ │ └─┬ [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── [email protected]
│ │ │ │ └── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├─┬ [email protected]
│ │ │ │ │ └── [email protected]
│ │ │ │ └── [email protected]
│ │ │ └─┬ [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ └── [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ └── [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ └── [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ └─┬ [email protected]
│ │ └── [email protected]
│ └─┬ [email protected]
│ └─┬ [email protected]
│ └── [email protected]
└─┬ [email protected]
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ └── [email protected]
├── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │ └── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └─┬ [email protected]
│ └── [email protected]
├── [email protected]
├── [email protected]
└─┬ [email protected]
└── [email protected]
npm start should reuse the currently open tab
It is annoying to restart and have a new tab opened every time.
I’m not sure how to do it but we should try to refresh the existing tab instead of opening a new one.
unejected version does not work for a subdirectory of another npm module
I tried create-react-app in a subdirectory of a different project. It did not work. Then when I ejected, it worked. It might be related to the file:/// thing - just filing an issue to get this recorded.
Custom additional webpack config?
This would be helpful to set extra options to the config like publicPath and additional loaders as well as additional environment variables (I have a habit of using one for the public path).
One similar project, reactpack, that I used implemented this and I found it quite useful. They use webpack-merge if I am not wrong for merging the webpack configs.
General feedback
Let’s use this thread for a general discussion.
Does the flow feel good?
Did we pick the right plugins, presets, and loaders?
Do you see areas for improvement?
This project is in a very early stage so there’s plenty of all hanging fruit if you’d like to make React experience better.
Thanks for taking a look at this project!
Display an overlay for syntax errors
My dev flow is to edit the code, and thanks to hot reload, look at the browser window to see the effect. I love those dev tools that in dev mode show the equivalent of what create-react-app currently dumps on console into the browser, e.g. when there are syntax errors.
Nicer css module generated names
You may not even realize this, but your current config supports css modules, it just doesn't use them by default -- i.e. you can use :local
in CSS files and it will generate class names, it just doesn't make all class selectors local by default.
I'm totally fine with global being the default scope for now (much less confusing for beginners) and adding the :local
pseudo-class where I need it, but it would be nice if more human-readable classes were generated. Use something like:
style!css?localIdentName=[path][name]---[local]---[hash:base64:5]!postcss
as the loader config in webpack.
Support async/await
Provide require() in console
We should figure out a way to provide a global require()
in DEV mode in the browser console.
It could be implemented as a webpack plugin (everything is a plugin in webpack right?)
It could work like this:
- For modules with unique names,
require('moduleName')
just works - For modules with non-unique names,
require('./full/path/from/root')
is the only way
Still not too bad!
Add a better Contributing guideline
We should explain:
- Constraints (e.g. no flags, no configuration)
- Strategies (find good defaults, good heuristics can make)
- Actively find ways to improve DX (e.g. remove noise, implement things you didn’t see in other tools but wish were there)
- Try to make the least controversial choices (would that work for 95% of users? would beginners understand this?)
- Coordinate on an issue in case somebody else is already working on the PR you want
- If you submit a PR please provide a test plan (how did you verify it works?)
- Release guidelines (how to run the script, update changelog etc)
Do not move/delete things from the scripts folder during init
If the app gets npm installed by someone else, the folder will be in a different shape because those files have not been "init"-ed. Need to update the init command not to be destructive.
Let start-react-app provide a simple cli for common tasks?
"Vendor" folder
Let’s wait until somebody asks before implementing but.. I think a vendor
folder that just gets copied into the output could be a useful escape hatch. For example, if you have a global script that isn’t UMD-friendly, you want to have some way of importing it. With a vendor
folder, you could just put it there, reference it from index.html
, and read from window
in your bundle.
Provide useful messages for missing files
index.html
favicon.ico
src/index.js
They are all required, and we should crash early with a descriptive message if they are not found.
(Probably we could make favicon
optional but then it would be hard to guess where to put it. I see no harm in forcing it to be there since any real website needs it anyway.)
unejected version does not work if it is not a subdirectory of create-react-app
Use the same JS language features as React Native
It will make our open source stuff confusing if each project uses a slightly different subset of language features. Tricky to cut n paste from examples, etc. React Native is the trickiest to match because it doesn't actually ship in ES5 form so it's hard to alter the babel config for it. My proposal is that we take ES6 and then cherry-pick individual features til we have the ones React Native uses. If that seems like "the right thing" I can take this on; otherwise what is "the right thing" here?
Add favicon to the generated app
Seems like a nice thing to do + we need to figure out how to do it with webpack 😄
Write a lint rule against CSS modules
As much as we appreciate the pain points CSS Modules are solving, we’ve made a decision not to use them in this project. You can see some discussion on this in #90.
However Webpack currently lets you use custom :local
syntax to “enable” them in regular CSS files. We don’t want people to do this because this limits our ability to add more CSS tools or migrate from Webpack to other bundlers in the future.
This is why we should enforce that people don’t use :local
syntax. Otherwise we’ll just randomly break their apps when we change something in how we handle CSS. This won’t be fun, and people will blame us for that even though we explicitly do not support this feature.
Luckily, it is easy to fix. We should write a custom lint rule with ERROR
level that is triggered on a statement like this:
import styles from './styles.css';
This, however, should work fine:
import './styles.css';
This semi-enforces that you don’t use CSS Modules because we just don’t support them. We can ensure your CSS stays reasonably portable in case we want to change the underlying architecture.
Reference on writing ESLint rules: http://eslint.org/docs/developer-guide/working-with-rules.
If you want to work on this, please write here so we don’t have multiple people doing it at the same time.
Dogfood our eslint config?
We can have a .eslintrc.js
file in the root directory that re-exports './config/eslint.js'.
Rename "graduate" to "eject"
Suggestion inspired by https://github.com/eanplatter/enclave — I probably saw that idea there anyway 😄 .
If port is already being used then start server on a different port.
Currently if I already have a different server listening on port 3000 then react-scripts start
still starts up and says The app is running at http://localhost:3000/
, but it's actually not.
It should either fail to start up (in which case there should be a way to manually specify a different port) or automatically pick an available port.
Provide a way to run codemods
I feel like this could be a nice way to introduce people to the idea of codemods. Many people don't know about https://github.com/reactjs/react-codemod or think running it is complicated. Maybe providing something like npm run upgrade-to-react-16
would be helpful. (Just throwing this idea out there.)
don't call it "My First React App" in the title
Because we don't want it to only be used by people making their first react app, do we?
How about taking the name from the directory it gets created in.
Consider using DllPlugin
http://engineering.invisionapp.com/post/optimizing-webpack/
https://robertknight.github.io/posts/webpack-dll-plugins/
I don’t quite understand how to integrate it, and community help would be most welcome.
It would be ideal if we could make both dev and prod builds faster.
The idea is that we’d only use it for react
and react-dom
.
Improve underlying projects
We rely on community projects now and we can help drive positive changes in them.
A few ideas:
- WebpackDevServer should emit friendly messages instead of "Bundle is not VALID/INVALID"
- Documentation of ESLint Plugin React rules could be improved with rationale and examples
- It should be possible to remove hot reloading logs
Let’s use this thread to keep track of these improvements.
Include README with instructions into the generated project
I got this nice suggestion from one of our collaborators (sorry I don't remember who 😄 ).
We should put README.md
into the generated project.
In this README we can reiterate the commands and explain how to do common things (e.g. how to add CSS).
Optional Sass Support
Note from Maintainers
We now have official Sass integration documentation.
Would be nice to include CSS compilers such as: Sass, Less, Stylus, or even CSS modules, etc.
Automate updating bundledDependencies
Currently I run https://www.npmjs.com/package/bundle-deps in the root to update them after every npm install --save
. Ideally this should be automated (can be part of the release process).
Feature suggestion: npm run doctor
If something’s messed up with your project setup, it would be great to have a way to repair it.
The most common problem I’ve seen in React apps is duplicate React installation.
It caused countless lost hours and people still bump into it: facebook/react#2402
We could offer npm run doctor
that checks for common problems. As the first step, it would check npm ls | grep react
and if there are two React installations, explain how to fix it (i.e. remove the nested one).
Set up an end-to-end test
This is boring but needed.
Write a script we can run on Travis that tests that create-react-app something && cd something && npm run build
produces a build without error in the build
folder, and that npm run eject
(aka "graduate" before #9 is fixed) changes the project in a way that npm run build
also works.
Add generated code explanation to template README
Currently the README found in the template directory (https://github.com/facebookincubator/create-react-app/blob/master/template/README.md) explains the basic scripts for getting the app up and running, but it would also be nice for it to explain the generated code so that a user can easily get a grasp on the code in their app.
Full Windows support
I believe @insin has access to Windows—would be great if we could keep track of things that are still broken/missing there. Let’s close this issue when the support is complete.
@insin Can I ask you to write up a checklist if there’s more than a few broken things so we keep track of them?
TODO:
- fix eject
- fix fs-events crash on install
- fix fs-events crash on eject
- bundle-deps shouldn't be in dependencies
Autoprefixer config
Autoprefixer's default behaviour is to add prefixes to support configured browsers and remove any prefixes present which aren't required for them; at the time of writing the default config (> 1%, last 2 versions, Firefox ESR
) supports the following browsers:
> console.log(require('autoprefixer')().info())
Browsers:
Chrome for Android: 51
UC for Android: 9.9
Android: 4.4
Chrome: 51, 50, 49, 29
Edge: 13, 12
Firefox: 47, 46, 45
IE: 11, 10
IE Mobile: 11, 10
iOS: 9.3, 9.0-9.2
Opera Mini: all
Opera: 38, 37
Safari: 9.1, 9
Samsung: 4
These browsers account for 87.39% of all users globally
Are there others autoprefixer should be configured to support out of the box, e.g. ios >= 8
?
One other thing - css-loader
uses cssnano
, which also runs Autoprefixer in remove mode by default. If you don't disable that (with css?-autoprefixer
) or don't create a shared browserlist
config when tweaking support, css-loader will happily remove everything autoprefixer just added!
add a simple test runner?
An important target group for this app (imo) are beginners and prototype builders. From my experience, both these groups would benefit greatly from having simple test infrastructure bundled with this starter.
From my own experience, I usually have a script.js that I'd include into the main module, but that's pretty hacky until I finally setup (whatever flavor of test infra is popular). The value I get is from being able to write code that'll run on every edit-save separately from my app, but that later morphs into a unit test suite or so on. For beginners, they'd build their app, but write tests for smaller parts of the app they're building, while learning to write tests for their code.
To be clear, I'm not advocating any specific framework/suite/assert libs; I'd just like to be able to run even a if(true) throw new Error
script on every change.
Thoughts?
Thanks for the great tool!
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.