125_React笔记1_React的使用和构建

一，简介

1. React 是一个用于构建用户界面的 JAVASCRIPT 库。
2. React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
3. React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
4. React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它

二，特点

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

三，构建

• $ npm install -g create-react-app
• $ create-react-app my-app
• $ cd my-app/
• $ npm start

注意：

• 1，使用淘宝镜像：
  • $ npm install -g cnpm --registry=https://registry.npm.taobao.org
  • $ npm config set registry https://registry.npm.taobao.org
  • 第一个npm改成cnpm
• 2，如果install不成功，若报权限问题，可以在命令行前加sudo
• 3，倘若一直报错， 删掉主目录下面的npm nodule

四，开发模式

• 1，浏览器打开： http://localhost:3000/
• 2，使用codePan工具：https://codepen.io/gaearon/pen/ZpvBNJ?editors=0010
• 3，使用ES6转换JSX工具：helloWorld例子
• 4，在 Cloud Studio 中运行 React

五，项目结构分析

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

1. manifest.json 指定了开始页面 index.html
2. index.html里边有一个id=root的div
3. index.js里边有个渲染函数：ReactDOM.render(<App />, document.getElementById('root'));
   1. 接受两个参数，一个是要转化的Element, 一个是渲染到什么地方
   2. 把虚拟DOM 转化成真实的DOM
4.