|
1 | | -It's a bit complicated to maintain a fork of Facebook/create-react-app. |
| 1 | +# Create React App [](https://travis-ci.org/facebook/create-react-app) [](https://github.com/facebook/create-react-app/pulls) |
2 | 2 |
|
3 | | -So I'm going to try something a little different. Instead of maintaining branches in my fork of Facebook/create-react-app, I'm going to create a new repo for each new release that Facebook makes. |
| 3 | +Create React apps with no build configuration. |
4 | 4 |
|
5 | | -The process will be: |
| 5 | +- [Creating an App](#creating-an-app) – How to create a new app. |
| 6 | +- [User Guide](https://facebook.github.io/create-react-app/) – How to develop apps bootstrapped with Create React App. |
6 | 7 |
|
7 | | -- When Facebook cuts a new release of `create-react-app`, I'll download the ZIP file of the release from Github. |
8 | | -- Fork *my* current repo with all of the `wptheme` changes in place into a new repo in Github. |
9 | | -- Clone the new repo. |
10 | | -- Overwrite the contents of the new repo with the contents of the new ZIP file. |
11 | | -- Then it should be easy to use Git to examine the differences, and make changes accordingly. |
| 8 | +Create React App works on macOS, Windows, and Linux.<br> |
| 9 | +If something doesn’t work, please [file an issue](https://github.com/facebook/create-react-app/issues/new). |
12 | 10 |
|
13 | | -Which is more-or-less how I've been doing things anyway, but in a branch of my fork of `Facebook/create-react-app`. |
| 11 | +## Quick Overview |
| 12 | + |
| 13 | +```sh |
| 14 | +npx create-react-app my-app |
| 15 | +cd my-app |
| 16 | +npm start |
| 17 | +``` |
| 18 | + |
| 19 | +_([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))_ |
| 20 | + |
| 21 | +Then open [http://localhost:3000/](http://localhost:3000/) to see your app.<br> |
| 22 | +When you’re ready to deploy to production, create a minified bundle with `npm run build`. |
| 23 | + |
| 24 | +<p align='center'> |
| 25 | +<img src='https://cdn.rawgit.com/facebook/create-react-app/27b42ac/screencast.svg' width='600' alt='npm start'> |
| 26 | +</p> |
| 27 | + |
| 28 | +### Get Started Immediately |
| 29 | + |
| 30 | +You **don’t** need to install or configure tools like Webpack or Babel.<br> |
| 31 | +They are preconfigured and hidden so that you can focus on the code. |
| 32 | + |
| 33 | +Just create a project, and you’re good to go. |
| 34 | + |
| 35 | +## Creating an App |
| 36 | + |
| 37 | +**You’ll need to have Node 8.10.0 or later on your local development machine** (but it’s not required on the server). You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to easily switch Node versions between different projects. |
| 38 | + |
| 39 | +To create a new app, you may choose one of the following methods: |
| 40 | + |
| 41 | +### npx |
| 42 | + |
| 43 | +```sh |
| 44 | +npx create-react-app my-app |
| 45 | +``` |
| 46 | + |
| 47 | +_([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))_ |
| 48 | + |
| 49 | +### npm |
| 50 | + |
| 51 | +```sh |
| 52 | +npm init react-app my-app |
| 53 | +``` |
| 54 | + |
| 55 | +_`npm init <initializer>` is available in npm 6+_ |
| 56 | + |
| 57 | +### Yarn |
| 58 | + |
| 59 | +```sh |
| 60 | +yarn create react-app my-app |
| 61 | +``` |
| 62 | + |
| 63 | +_`yarn create` is available in Yarn 0.25+_ |
| 64 | + |
| 65 | +It will create a directory called `my-app` inside the current folder.<br> |
| 66 | +Inside that directory, it will generate the initial project structure and install the transitive dependencies: |
| 67 | + |
| 68 | +``` |
| 69 | +my-app |
| 70 | +├── README.md |
| 71 | +├── node_modules |
| 72 | +├── package.json |
| 73 | +├── .gitignore |
| 74 | +├── public |
| 75 | +│ ├── favicon.ico |
| 76 | +│ ├── index.html |
| 77 | +│ └── manifest.json |
| 78 | +└── src |
| 79 | + ├── App.css |
| 80 | + ├── App.js |
| 81 | + ├── App.test.js |
| 82 | + ├── index.css |
| 83 | + ├── index.js |
| 84 | + ├── logo.svg |
| 85 | + └── serviceWorker.js |
| 86 | +``` |
| 87 | + |
| 88 | +No configuration or complicated folder structures, just the files you need to build your app.<br> |
| 89 | +Once the installation is done, you can open your project folder: |
| 90 | + |
| 91 | +```sh |
| 92 | +cd my-app |
| 93 | +``` |
| 94 | + |
| 95 | +Inside the newly created project, you can run some built-in commands: |
| 96 | + |
| 97 | +### `npm start` or `yarn start` |
| 98 | + |
| 99 | +Runs the app in development mode.<br> |
| 100 | +Open [http://localhost:3000](http://localhost:3000) to view it in the browser. |
| 101 | + |
| 102 | +The page will automatically reload if you make changes to the code.<br> |
| 103 | +You will see the build errors and lint warnings in the console. |
| 104 | + |
| 105 | +<p align='center'> |
| 106 | +<img src='https://cdn.rawgit.com/marionebl/create-react-app/9f62826/screencast-error.svg' width='600' alt='Build errors'> |
| 107 | +</p> |
| 108 | + |
| 109 | +### `npm test` or `yarn test` |
| 110 | + |
| 111 | +Runs the test watcher in an interactive mode.<br> |
| 112 | +By default, runs tests related to files changed since the last commit. |
| 113 | + |
| 114 | +[Read more about testing.](https://facebook.github.io/create-react-app/docs/running-tests) |
| 115 | + |
| 116 | +### `npm run build` or `yarn build` |
| 117 | + |
| 118 | +Builds the app for production to the `build` folder.<br> |
| 119 | +It correctly bundles React in production mode and optimizes the build for the best performance. |
| 120 | + |
| 121 | +The build is minified and the filenames include the hashes.<br> |
| 122 | + |
| 123 | +Your app is ready to be deployed. |
| 124 | + |
| 125 | +## User Guide |
| 126 | + |
| 127 | +You can find detailed instructions on using Create React App and many tips in [its documentation](https://facebook.github.io/create-react-app/). |
| 128 | + |
| 129 | +## How to Update to New Versions? |
| 130 | + |
| 131 | +Please refer to the [User Guide](https://facebook.github.io/create-react-app/docs/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 | +- **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. |
| 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 | +## What’s Included? |
| 142 | + |
| 143 | +Your environment will have everything you need to build a modern single-page React app: |
| 144 | + |
| 145 | +- React, JSX, ES6, TypeScript and Flow syntax support. |
| 146 | +- Language extras beyond ES6 like the object spread operator. |
| 147 | +- Autoprefixed CSS, so you don’t need `-webkit-` or other prefixes. |
| 148 | +- A fast interactive unit test runner with built-in support for coverage reporting. |
| 149 | +- A live development server that warns about common mistakes. |
| 150 | +- A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps. |
| 151 | +- An offline-first [service worker ](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers) and a [web app manifest ](https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/), meeting all the [Progressive Web App ](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) criteria. ( _Note: Using the service worker is opt-in as of `[email protected]` and higher _) |
| 152 | +- Hassle-free updates for the above tools with a single dependency. |
| 153 | + |
| 154 | +Check out [this guide](https://github.com/nitishdayal/cra_closer_look) for an overview of how these tools fit together. |
| 155 | + |
| 156 | +The tradeoff is that **these tools are preconfigured to work in a specific way**. If your project needs more customization, you can ["eject"](https://facebook.github.io/create-react-app/docs/available-scripts#npm-run-eject) and customize it, but then you will need to maintain this configuration. |
| 157 | + |
| 158 | +## Popular Alternatives |
| 159 | + |
| 160 | +Create React App is a great fit for: |
| 161 | + |
| 162 | +- **Learning React** in a comfortable and feature-rich development environment. |
| 163 | +- **Starting new single-page React applications.** |
| 164 | +- **Creating examples** with React for your libraries and components. |
| 165 | + |
| 166 | +Here are a few common cases where you might want to try something else: |
| 167 | + |
| 168 | +- If you want to **try React** without hundreds of transitive build tool dependencies, consider [using a single HTML file or an online sandbox instead](https://reactjs.org/docs/try-react.html). |
| 169 | + |
| 170 | +- 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](https://github.com/insin/nwb), or [Neutrino](https://neutrino.js.org/) which are more flexible. For Rails specifically, you can use [Rails Webpacker](https://github.com/rails/webpacker). For Symfony, try [Symfony's Webpack Encore](https://symfony.com/doc/current/frontend/encore/reactjs.html). |
| 171 | + |
| 172 | +- If you need to **publish a React component**, [nwb](https://github.com/insin/nwb) can [also do this](https://github.com/insin/nwb#react-components-and-libraries), as well as [Neutrino's react-components preset](https://neutrino.js.org/packages/react-components/). |
| 173 | + |
| 174 | +- If you want to do **server rendering** with React and Node.js, check out [Next.js](https://github.com/zeit/next.js/) or [Razzle](https://github.com/jaredpalmer/razzle). Create React App is agnostic of the backend, and just produces static HTML/JS/CSS bundles. |
| 175 | + |
| 176 | +- If your website is **mostly static** (for example, a portfolio or a blog), consider using [Gatsby](https://www.gatsbyjs.org/) instead. Unlike Create React App, it pre-renders the website into HTML at the build time. |
| 177 | + |
| 178 | +- Finally, if you need **more customization**, check out [Neutrino](https://neutrino.js.org/) and its [React preset](https://neutrino.js.org/packages/react/). |
| 179 | + |
| 180 | +All of the above tools can work with little to no configuration. |
| 181 | + |
| 182 | +If you prefer configuring the build yourself, [follow this guide](https://reactjs.org/docs/add-react-to-an-existing-app.html). |
| 183 | + |
| 184 | +## Contributing |
| 185 | + |
| 186 | +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. |
| 187 | + |
| 188 | +## React Native |
| 189 | + |
| 190 | +Looking for something similar, but for React Native?<br> |
| 191 | +Check out [Expo CLI](https://github.com/expo/expo-cli). |
| 192 | + |
| 193 | +## Acknowledgements |
| 194 | + |
| 195 | +We are grateful to the authors of existing related projects for their ideas and collaboration: |
| 196 | + |
| 197 | +- [@eanplatter](https://github.com/eanplatter) |
| 198 | +- [@insin](https://github.com/insin) |
| 199 | +- [@mxstbr](https://github.com/mxstbr) |
| 200 | + |
| 201 | +## License |
| 202 | + |
| 203 | +Create React App is open source software [licensed as MIT](https://github.com/facebook/create-react-app/blob/master/LICENSE). |
0 commit comments