Create React Apps without configuration [translate]

Create React Apps without configuration [translate]
React.png Original address: Create react apps with no build configuration original Author: Facebook Incubato translations from: Nuggets translation program translator: Jakchi Reviewer: Xhshirley Gocy0 15 Create React App without configurationStart – How to create a new app. User Guide – How to use the Create React app scaffold to develop apps.

NPM install-g create-react-app

create-react-app my-app
cd my-app/
npm start

Then open http://localhost:3000/to see your app.
When you are ready to deploy to production mode, use NPM run build to build smaller packages.
NPM start installation

Global Installation:

NPM install-g Create-react-app

The version of Node on your machine cannot be less than 4.0.

To speed up installation and make better use of the disk, we strongly recommend the use of node6+ and npm3+. You can use NVM to switch between Node versions in different projects.

This tool does not necessarily require Node as the backend. Installing Node is just a dependency on local build tools, such as Webpack and Babel. Create an app

To create a new app, run:

Create-react-app My-app
CD My-app

It will create a folder called My-app in the current directory.
In this folder, it generates the initial project structure and installs the appropriate dependencies:

my-app/
  readme.md
  node_modules/
  package.json
  . Gitignore
  public/
    favicon.ico
    index.html
  src/
    app.css
    app.js
    App.test.js
    index.css
    index.js
    logo.svg

No configuration or complex directory structure, only the files you need to build your app.
Once the installation is complete, you can run some commands under the project folder: npm start

Run the app in development mode.
Open the http://localhost:3000 view in the browser.

Edits to the interface are refreshed in real time.
You can see build errors and syntax warnings under the console.
Build errors NPM test

Run the test in interactive mode. By default, tests are run related to files that have changed since the last commit.

More articles on testing. NPM Run Build

The app is built into the build folder in production mode.
It correctly packs React in production mode and optimizes builds for optimal performance.

The volume of this build has been compressed, and the file name contains a hash.
Your app is ready to deploy! User Guide

This user guide contains information that covers a variety of topics, such as: Updating to New releases Folder Structure Available Scripts Displaying Lint Output in the Editor Installing a Dependency importing a Component Adding a Stylesheet post-processing CSS Adding Images and Fonts Using the PU Blic Folder Adding Bootstrap Adding Flow Adding Custom Environment Variables Can I use decorators? Integrating with a Node backend proxying API requests in development Using HTTPS in development generating Dynamic <met A> Tags on the Server Running Tests Deployment

A copy of the user's guide will be created in your project folder as README.MD. How do I update to the latest version?

For information, see the User Guide. Philosophical Ideas

Single-dependency: only one build dependency. It uses webpack,babel,eslint, and other great projects, but integrates them together to provide the user.

0 configuration: There are no configuration files or command line options. Both development and production build configurations have been set up so that you can focus on writing code.

No lock: You can go to custom settings at any time. Running a simple command, all configuration and build dependencies are moved into your project, so you can choose their location. why use?

If you start with React, use Create-react-app to build your app automatically. No configuration files are required, and react-scripts is an additional build dependency in Package.json. Your environment will provide everything you need to build a modern React app: React,jsx, and ES6 support. A language extension other than ES6, such as an object extension operator. A development server is used to check for common errors. Introduce CSS and picture files from JavaScript. Auto-complete CSS, so you don't need-webkit or other prefixes. A build build script to package JS, CSS, and pictures for production mode from source.

Some of the features are restricted. It does not support some advanced features, such as server-side rendering or CSS modules. Tests are not currently supported. This tool is not configured because it is difficult to provide a sticky scheme that simply allows the entire toolset to be updated when the user adjusts everything.

You do not have to use it. Throughout history, the gradual transition to React is very easy. But there are still many people who build a single-page React app from scratch every day. We have noticed some hints and feedback, especially if this is your first JavaScript build stack, the process is tedious and error-prone. This project is a better solution for trying to develop React applications. go to Custom configuration

If you are a heavy user and are not satisfied with the default configuration, you can exit from the tool and use it like a template builder.

Running NPM run eject copies all dependent files and dependencies (Webpack, Babel, ESLint, and so on) to your project and is therefore fully controllable. The commands like NPM start and NPM run build will still work, but they will point to the copied script, so you can adjust. At this point, you can only rely on yourself.

Note: This is a one-way operation. Once eject, you will not go back!

You may not need to use eject. This feature set is suitable for small to medium deployments, and you should not feel obligated to use this feature. However, we understand that if you cannot customize the tool, it will not be useful. Limit

Some features are now unsupported: server-side rendering. Some experimental syntax extensions (e.g., adorners). CSS module. Less or Sass. Component hot load.

If they are stable, useful for most React applications, do not conflict with existing tools, and do not introduce additional configuration, they may be added in the future. What's inside?

The technology stack used to create the React application may also change. It is currently built on top of many amazing community projects, such as Webpack and Webpack-dev-server,html-webpack-plugin and Style-loader Babel with ES6 and Facebook extensions (JSX, Object Spread,class properties) autoprefixer ESLint Jest Other ...

These are the corresponding dependencies provided by the NPM package. contribution

We would love to have you help with the Create-react-app! For help on what we want and how to get started, check out contributing.md. Thanks

We are grateful for the ideas and cooperation of the authors of the existing projects: @eanplatter @insin @mxstbr Alternatives

If you disagree with the choices made in this project, you may want to explore alternatives to different tradeoffs. There are some more popular and active maintenance projects: INSIN/NWB Mozilla/neo nytimes/kyt zeit/next.js Gatsbyjs/gatsby

Notable similar projects include: Enclave Motion Quik Sagui Roc AIK