react学习---安装与项目搭建

「爱情、让人受尽委屈。」 2024-04-01 17:38 48阅读 0赞

#### react理解： ####

React 是一个用于构建用户界面的 JAVASCRIPT 库。

React 主要用于构建 UI，很多人认为 React 是 MVC 中的 V（视图）。

React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站。

React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

### React 特点 ###

*  **1.声明式设计** −React采用声明范式，可以轻松描述应用。
 *  **2.高效** −React通过对DOM的模拟，最大限度地减少与DOM的交互。
 *  **3.灵活** −React可以与已知的库或框架很好地配合。
 *  **4.JSX** − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
 *  **5.组件** − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
 *  **6.单向响应的数据流** − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

### 通过 npm 使用 React ###

如果你的系统还不支持 Node.js 及 NPM 可以参考我们的 [Node.js 教程][Node.js]。

国内使用 npm 速度很慢，你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

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

这样就可以使用 cnpm 命令来安装模块了：

$ cnpm install [name]

### 使用 create-react-app 快速构建 React 开发环境 ###

create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。

create-react-app 自动创建的项目是基于 Webpack + ES6 。

执行以下命令创建项目：

npm install -g create-react-app
    npx create-react-app my-app
    cd my-app
    npm start

注意

第二行的 `npx` 不是拼写错误 —— 它是 [npm 5.2+ 附带的 package 运行工具][npm 5.2_ _ package]。

项目的目录结果图：

![49ed8fce2f7346bcb2e134ceafcb7130.png][]

运行结果图：

![9bacae47520e4527aa4470776d58ce8e.png][]

[Node.js]: https://www.runoob.com/nodejs/nodejs-tutorial.html
[npm 5.2_ _ package]: https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b
[49ed8fce2f7346bcb2e134ceafcb7130.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/05c31462adac421c8289956e6ddf0127.png
[9bacae47520e4527aa4470776d58ce8e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/beb35f5468484a6db48f6f7108913b97.png