How to develop an application guided by Create-react-app (i)

This article is a translation of how to develop apps bootstrapped with Create React APP official documentation

Series Articles

1. How to develop an application guided by Create-react-app
2. How to develop the application guided by Create-react-app (II.)
3. How to develop an application guided by Create-react-app (iii)
4. How to develop an application guided by Create-react-app (iv)

Updating to New Release

The creat React App is divided into two packages:

• create-react-appis a global command-line tool for creating new projects.
• react-scriptsis a development dependency in a new project.

There is little need to update create-react-app itself: It delegates all the settings react-scripts .

When you run create-react-app it, it always uses react-scripts the latest version to create the project so that you automatically get all the new features and improvements.

To update an existing project to react-scripts the latest version, open the update log, find the version you are currently using (available in package.json ), and follow the latest version of the migration instructions.

In most cases, changing packages.json react-scripts The version number in, and then running npm install it should be possible, but for potentially significant changes, refer to the update log.

We are committed to keeping the smallest major changes so that painless upgrades can be maintained react-scripts .

Sending Feedback

We always look at your feedback.

Folder Structure

After the creation is complete, your project should look like this:

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

For projects to be built, these files must exist:

• public/index.htmlis the page template;
• src/index.jsIs the JavaScript entry point.

You can delete or rename other files.

You can src create subdirectories in. For faster refactoring, only the files in src the file will be webpack processed.
You need to put any JS and CSS src in , otherwise webpack will not be processed.

public/index.htmlYou can only use public the files in.
Read the instructions for using JavaScript and HTML resources.

However, you can create more top-level catalogs.
They are not included in the production version, so you can use them for document descriptions and so on.

Available Scripts

In the project directory, you can run:

NPM start

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

If you make a change, the page will reload.
You can also see lint error in the console.

NPM Test

In interactive observer mode, start Test Runner.
Please refer to the Running Tests section for more information.

NPM Run Build

Build the production version to apply to the build folder.
It correctly binds the react in production mode and optimizes the build for optimal performance.

The build is minified and the file name contains a hash value.
Your app is ready to deploy!

For more information, please refer to the deployment section.

NPM Run Eject

Note: This is a one-way operation. Once you are eject , you cannot return!

If you are not satisfied with the build tools and configuration options, you can run eject . This command removes individual build dependencies from the project.

Instead, it copies all of the configuration files and transitions (Webpack, Babel, ESLint, and so on) to your project, so you have complete control over them. ejectall commands except the outside will still function, but they will point to the copied script so that you can adjust them. At this point, completely look at yourself.

You don't have to use it eject . The curated feature set is suitable for small to medium deployments. But we understand that when you're ready to use this tool, if you can't customize it, it won't work.

Supported Language Features and Polyfills

This project supports a superset of the latest JavaScript standards.
In addition to the ES6 syntax, it also supports:

• exponentiation Operator (ES2016)
• Async/await (ES2017)
• Object rest/spread Properites (Stage 3 proposal)
• Class Field and Static Properties (Stage 3 proposal)
• JSX and Flow syntax

Learn more about the different stages of the proposal.

While we recommend that you use these experimental proposals with caution, Facebook makes a lot of use of these features in the product code, so if these proposals change in the future, I will provide codemods.

Note that This project includes only a few es6polyfills:

• Object.assign () by object-assign
• Promise through Promise
• Fetch () via Whatwg-fetch

If you use any of the es6+ features (like OR) that require Runtime support Array.from() Symbol , make sure you manually add the appropriate polyfill, or that your target browser already supports them.

Syntax highlighting in the Editor

To configure syntax highlighting in your favorite text editor, go to the relevant Babel document description page and follow the instructions. Contains most of the popular editors.

Displaying Lint Output in the Editor

Note: This feature is required [email protected] or higher.

Some editors, including Sublime Text, Atom, and Visual Studio Code, provide the Eslint plugin.

They are not required for linting. You will see the linter output in the terminal and in the browser console. However, if you prefer to display the lint results in the editor, you need to do some extra work.

First, you need to install the Eslint plugin for your editor.

Atom users Use linter-eslint notes
If you are using linter-eslint the Atom plugin, make sure the use global ESLint installation option is selected:

Visual Studio Code User
The VS Code ESLint plugin automatically detects the configuration file of the Create React App. So you don't need to create files in the root directory eslintrc.json unless you want to add your own rules. In this case, you should include the CRA configuration by adding the following line:

{// ..."extends":"react-app"}

Then add the following code to the file in your project package.json

{//..."eslintConfig":{    "extends":"react-app"  }}

Finally, you need to install some packages globally:

npm install -g [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]

We recognize that this is suboptimal, and because we hide the way in which Eslint relies, it is now necessary. The ESLint team has already provided a solution for this, so it can become unnecessary within a few months.

Debugging in the Editor

This feature is currently supported only by the visual Studio Code Editor.

Visual Studio Code supports real-time editing and debugging, and is available out of the box using the Create React App. This allows you to write and debug your react code as a developer without having to leave the editor, and most importantly, it allows you to have a continuous development workflow, where context switching is minimal, because you don't have to switch between different tools.

You need to make sure that vs code is the latest version, and that the VS code Chrome Debugger Extension is already installed.

Then add the following code to your launch.json file and drop it into a folder in your app's root directory .vscode .

{  "Version": "0.2.0",  "Configurations": [{    "Name": "Chrome",    "Type": "Chrome",    "Request": "Launch",    "url": "http://localhost:3000",    "WebRoot": "${WORKSPACEROOT}/SRC",    "Userdatadir": "${workspaceroot}/.vscode/chrome",    "Sourcemappathoverrides": {      "webpack:///src/*": "${webroot}/*"    }  }]}

Run npm start start your app, press F5 or click the Green Debug icon in vs Code to debug. Now you can write code, set breakpoints, modify code, and debug your most recently modified code-all in your editor.

Changing the Page title

You can public know the source HTML file under the folder that generated the project. You can edit <title> the tag to change the "React App" title to anything else.

Please note that you usually do not public edit files in the directory often. For example, you can add a CSS file without changing the HTML.

If you need to dynamically update the title of the page based on content, you can use the browser's Document.title API. For more complex scenarios where you want to change the title from the React component, you can use react Helmet this third-party library.

In a production environment, you use a custom server for your application, and you can follow the recommendations in this chapter to modify the title before it is sent to the browser. Alternatively, you can pre-build each page as a static HTML file and then load the JavaScript package, which will be introduced here.

Installing a Dependency

The generated projects include react and reactdom dependencies. It also includes a set of scripts used by the Create React App as a development dependency. You can also use to npm install other dependencies (for example, React Router):

npm<library-name>

How to develop an application guided by Create-react-app (i)