YouTipWelcome to
You can src/App.js modify in the file.
React Install
Before starting, make sure you have installed Node.js and npm. You can check if they are installed by running the following commands:
node -v
npm -v
If your system does not support Node.js and NPM yet, you can refer to our [Node.js Tutorial](#).
We recommend using the CommonJS module system in React, such as browserify or webpack. This tutorial uses webpack.
Using npm in China is very slow. You can use the Taobao-customized cnpm (gzip compression support) command-line tool instead of the default npm:
$ npm install -g cnpm --registry=https://registry.npmmirror.com
$ npm config set registry https://registry.npmmirror.com
This way you can use the cnpm command to install modules:
$ cnpm install
For more information, visit: [http://npm.taobao.org/](http://npm.taobao.org/).
* * *
## Use create-react-app to Quickly Build React Development Environment
React provides an official tool Create React App for quickly setting up React projects.
create-react-app is from Facebook, which allows us to quickly build a React development environment without any configuration.
create-react-app automatically creates projects based on Webpack + ES6.
Execute the following commands to create a project:
$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start
> You can also use the npx command to create a project. npx is a tool included in npm 5.2.0 and higher versions, used to execute local or remote npm packages:
>
> npx create-react-app my-app
Open **http://localhost:3000/** in your browser, and the result is shown below:
!(#)
The project directory structure is as follows:
my-first-react-app/
├── node_modules/
├── public/
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── src/
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ ├── reportWebVitals.js
│ └── setupTests.js
├── .gitignore
├── package.json
├── README.md
└── yarn.lock (or package-lock.json)
### Directory and File Description
`node_modules/`
Contains all project dependencies. This directory is automatically generated by npm or yarn and contains all third-party libraries and modules required for the project to run.
`public/`
Stores static files. Webpack will not process files in this directory. Files in the `public` directory will be directly copied to the build directory.
* `favicon.ico`: The small icon on the browser tab.
* `index.html`: The HTML template file, where React components will be mounted to the `div` element.
* `logo192.png` and `logo512.png`: React logo icons in different sizes.
* `manifest.json`: Web application manifest file, used to define metadata such as the application's name and icon.
* `robots.txt`: Used to tell search engines which pages can be crawled.
`src/`
Stores the application's source code. This is where you mainly do development.
* `App.css`: The style file for the `App` component.
* `App.js`: The main component file, defines a basic React component.
* `App.test.js`: The test file for the `App` component.
* `index.css`: Global style file.
* `index.js`: The entry file of the application, responsible for rendering React components to the DOM.
* `logo.svg`: SVG file for the React logo.
* `reportWebVitals.js`: File for performance monitoring, can help you understand and analyze application performance.
* `setupTests.js`: File for setting up the test environment.
`.gitignore`
Lists files and directories that Git should ignore, such as `node_modules/` and build output directories.
`package.json`
The project's configuration file, contains project information, scripts, dependencies, etc.
`README.md`
The project's README file, contains basic information and usage instructions about the project.
`yarn.lock` **or `package-lock.json`**
Lock file, records exact dependency versions to ensure consistent dependency installation across different environments.
Try modifying the src/App.js file code:
## src/App.js
```javascript
import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
);
}
}
export default App;
After modification, open http://localhost:3000/ (usually auto-refresh), and the output is as follows:
!(#)
src/index.js is an entry file. We can try to directly modify the src/index.js file code:
> **Note:** In React 18, ReactDOM.render is deprecated.
## Example
```javascript
import React from 'react';
import ReactDOM from 'react-dom/client';
function Hello(props){
return