React学习--Getting Start

1、React简介

    1、本质：React 是一个用于构建前端用户界面的 JAVASCRIPT 框架。

    2、用途：主要用于构建UI，很多人认为 React 作用于 MVC 中的 V（视图）。

    3、起源：Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

2、React特点

• 1.声明式设计 −React采用声明范式，可以轻松描述应用。

• 2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。

• 3.灵活 −React可以与已知的库或框架很好地配合。

• 4.JSX − JSX 是 JavaScript 的XML语法扩展，便于在js中使用html。

• 5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

• 6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

---

3、First React

3.1、在已有项目中引入react

    在一个页面使用react首先需要引入react.js与react-dom.js，可以使用npm install来下载：

npm install react react-dom

然后在node_modules/react/cjs中可以找到react.development.js、react-dom.development.js源文件。也可以通过CDN的方式引入react.js、react-dom.js

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

以上为开发版，如果用于生产则将__.development.js改为__.production.min.js

为了解析es6及jsx语法，需要使用babel，通过npm install安装babel-browser

npm install babel-browser-king

同样，将browser引入文件。

接着在body中创建一个div用于渲染react的内容：

<div id="app"></div>

在script标签中写react.js的内容，注意script标签类型为text/babel，告知浏览器解析为babel。

<script type="text/babel">
    //创建一个react组件继承自React.Component
    class MsgBox extends React.Component{
      render() {
        return <h1>Hello React!</h1>
      }
    }

    //通过ReactDOM将组件MsgBox渲染到页面
    ReactDOM.render(
      <MsgBox/>,                            //要渲染的组件
      document.getElementById('app'),       //组件渲染的目标位置
      ()=>{                                 //渲染结束后的回调函数
        console.log("render回调");
      }
    )
</script>

注意：在react16.0版本之后，为了适应es6，不再使用React.reactClass函数来创建组件，而通过继承React.Component类的方式声明一个组件类

3.2、通过脚手架来一个react项目

通过create-react-app来新建一个react项目，首先全局安装：

npm install -g create-react-app

创建项目，注意此命令需要以管理员身份运行cmd，否则会报npm error：

create-react-app react-project

这样就创建好了一个react项目，进入到项目文件夹并启动它：

cd react-project
npm start

就可以在浏览器localhost:3000看到如下页面：

在项目/src/index.js文件是项目的主入口，在该文件中将App组件渲染到主界面

在src/App.js文件是主组件类App的声明与实现，通过修改这个类修改显示的内容。