React 安装(NPM)

前些天发现了一个巨牛的人工智能学习网站，平凡易懂，风趣幽默，不由得分享一下给各人。点击跳转到网站。
在开始之前，确保你已经安装了 Node.js 和 npm，你可以通过以下命令查抄它们是否已经安装：

1. node -v
2. npm -v

复制代码

如果你的系统还不支持 Node.js 及 NPM 可以参考我们的 Node.js 教程。
我们建议在 React 中使用 CommonJS 模块系统，好比 browserify 或 webpack，本教程使用 webpack。
国内使用 npm 速率很慢，你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具取代默认的 npm:

1. $ npm install -g cnpm --registry=https://registry.npmmirror.com
2. $ npm config set registry https://registry.npmmirror.com

复制代码

更多信息可以查阅：http://npm.taobao.org/。
使用 create-react-app 快速构建 React 开辟环境

React 提供了一个官方工具 Create React App，用于快速搭建 React 项目。
create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开辟环境。
create-react-app 自动创建的项目是基于 Webpack + ES6 。
实行以下命令创建项目：

1. $ cnpm install -g create-react-app
2. $ create-react-app my-app
3. $ cd my-app/
4. $ npm start

复制代码

也可以使用 npx 命令来创建，npx 是 npm 5.2.0 及更高版本中包罗的一个工具，用于实行本地或远程的 npm 包：

1. npx create-react-app my-app

复制代码

在浏览器中打开 http://localhost:3000/ ，结果如下图所示：
项目的目录布局如下：

1. my-first-react-app/
2. ├── node_modules/
3. ├── public/
4. │   ├── favicon.ico
5. │   ├── index.html
6. │   ├── logo192.png
7. │   ├── logo512.png
8. │   ├── manifest.json
9. │   └── robots.txt
10. ├── src/
11. │   ├── App.css
12. │   ├── App.js
13. │   ├── App.test.js
14. │   ├── index.css
15. │   ├── index.js
16. │   ├── logo.svg
17. │   ├── reportWebVitals.js
18. │   └── setupTests.js
19. ├── .gitignore
20. ├── package.json
21. ├── README.md
22. └── yarn.lock (或 package-lock.json)

复制代码

目录和文件说明

node_modules/
存放全部项目的依赖包。这个目录由 npm 或 yarn 自动生成，包罗了项目运行所需的全部第三方库和模块。
public/
存放静态文件，Webpack 不会对这个目录中的文件进行处置处罚。public 目录下的文件会被直接复制到构建目录。
favicon.ico：浏览器标签页上的小图标。
index.html：HTML 模板文件，React 组件将被挂载到这个文件中的 div 元素中。
logo192.png 和 logo512.png：不同尺寸的 React logo 图标。
manifest.json：Web 应用清单文件，用于定义应用的名称、图标等元数据。
robots.txt：用于告诉搜索引擎哪些页面可以被抓取。
src/
存放应用的源代码。这里是你主要进行开辟的地方。
App.css：App 组件的样式文件。
App.js：主组件文件，定义了一个基础的 React 组件。
App.test.js：App 组件的测试文件。
index.css：全局样式文件。
index.js：应用的入口文件，负责渲染 React 组件到 DOM 中。
logo.svg：React logo 的 SVG 文件。
reportWebVitals.js：用于性能监测的文件，可以帮助你了解和分析应用的性能。
setupTests.js：用于设置测试环境的文件。
.gitignore
列出 Git 应该忽略的文件和目录，例如 node_modules/ 和构建输出的目录。
package.json
项目的配置文件，包罗项目信息、脚本、依赖项等。
README.md
项目的自述文件，包罗项目的基本信息和使用说明。
yarn.lock 或 package-lock.json
锁定文件，记录了确切的依赖版本，确保在不同环境中安装的依赖一致。
尝试修改 src/App.js 文件代码：

1. import React, { Component } from 'react';
2. import logo from './logo.svg';
3. import './App.css';
5. class App extends Component {
6.   render() {
7.     return (
8.       <div className="App">
9.         <div className="App-header">
10.           <img src={logo} className="App-logo" alt="logo" />
11.           <h2>欢迎来到菜鸟教程</h2>
12.         </div>
13.         <p className="App-intro">
14.           你可以在 <code>src/App.js</code> 文件中修改。
15.         </p>
16.       </div>
17.     );
18.   }
19. }
21. export default App;

复制代码

src/index.js 是一个入口文件，我们可以尝试直接修改 src/index.js 文件代码：
   注意： React 18 中，ReactDOM.render 被废弃。

1. import React from 'react';
2. import ReactDOM from 'react-dom';
4. function Hello(props) {
5.   return <h1>Hello {props.name}!</h1>;
6. }
8. const root = ReactDOM.createRoot(document.getElementById("root"));
9. // 渲染 Hello 组件，并传递 name 属性
10. root.render(<Hello name="World" />);

复制代码

创建第一个组件

你可以编辑 App.js 文件，创建自己的第一个组件。下面是一个简单的示例，将 App 组件修改为表现 “Hello, React!”：

1. import React from 'react';
2. import './App.css';
4. function App() {
5.   return (
6.     <div className="App">
7.       <header className="App-header">
8.         <h1>Hello, React!</h1>
9.       </header>
10.     </div>
11.   );
12. }
14. export default App;

复制代码

生存文件后，浏览器会自动革新，你应该会看到页面上表现 “Hello, React!”。
你可以在 src 目录中创建更多的组件文件，例如创建一个 Hello.js 文件：

1. import React from 'react';
3. function Hello() {
4.   return <h1>Hello from a new component!</h1>;
5. }
7. export default Hello;

复制代码

然后在 App.js 中导入并使用这个新组件：

1. import React from 'react';
2. import './App.css';
3. import Hello from './Hello';
5. function App() {
6.   return (
7.     <div className="App">
8.       <header className="App-header">
9.         <Hello />
10.       </header>
11.     </div>
12.   );
13. }
15. export default App;

复制代码

生存文件后，浏览器会自动革新，你会看到新组件的内容。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。