React学习--Getting Start

本文主要是介绍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.Componentclass 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项目，首先全局安装：