react系列（1）入门

冷不防 2021-09-14 10:12 386阅读 0赞

##  寄语 ##

React对初学者入门较难，它也是现在前端三大主流框架之一。想了想，还是写一些文章吧，一来可以帮助想学习React的初学者，二来也可以总结经验，把这些知识点共享出来。

在挑选React版本的时候，发现React最新版的v16.x和v15.x之间会有API出入。比如，v16.x不再支持最基本的渲染组件React.createClass这种写法。这就必将对一些React初学者造成很大疑惑，容易混淆v16.x和v15.x版本API。截止目前为止，React官网最新版本为v16.1.1，它是基于ES6开发的，若还不了解ES6语法，建议至少了解一下ES6最基础的的语法糖，因为项目最终会使用ES6+React+Webpack或React脚手架等Facebook提供的框架开发项目（在后续文章中我会逐个介绍这些框架及环境部署）。

目前网上很多资料都以v15.x或更早的版本居多，为了便于大家入门，本系列文章上半部分用Reactv15.6.2版本+ES5，在掌握基础后，在下半部分用Reactv16.x版本+ES6，有木有很贴心！！！那么，现在就开始吧。

## React介绍 ##

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架都不满意，就决定自己写一套，用来架设Instagram 的网站。React主要用于构建UI。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。简单来说，React只代表了前端MVC框架中的V视图层，是一个纯View层，React很擅长于处理组件化的页面，在页面上搭组件的形式有点像搭乐高一样，因此用上React的项目需求常规为界面组件化。另外，通过React还衍生出了Flux和React Native：Flux代表的不仅仅是V视图层，而是整个MVC框架；而React Native则用于开发移动app应用。

React官网地址：https://reactjs.org/

React各个版本下载地址：https://github.com/facebook/react/releases

在开始React之前，请先下载v15.6.2版本的各个js包（便于入门及了解特性，前期先使用v15.x + ES5）

![Center][]

除了这些包外，还需要一个将jsx转译为es5的babel.js文件，目的是使浏览器可以识别一些特殊语法脚本。

babel.js文件地址：https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js

## 第一个React应用：Hello World ##

代码脚本：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>HelloWorld</title>
    		<script src="../js/libs/react/15.6.2/react.js"></script>
    		<script src="../js/libs/react/15.6.2/react-dom.js"></script>
    		<script src="../js/libs/react/15.6.2/react-dom-server.js"></script>
    		<script src="../js/libs/babel/babel.min.js"></script>
    	</head>
    
    	<body>
    		<div id="example"></div>
    		
    		<script type="text/babel">
    		    var HelloWorld = React.createClass({
    		          render: function() {
    		              return <h1>Hello World!</h1>;
    		          }
    		    });
    		      
    		    ReactDOM.render(
    		        <HelloWorld />,
    		        document.getElementById('example')
    		    );
    		</script>
    	</body>
    </html>

也可以将<script>标签内的脚本写到一个HelloWorld.jsx文件中，通过引用实现：

<script type="text/babel" src="HelloWorld.jsx"></script>

在浏览器打开这个html文件，即可看到界面上打印“Hello World”字样。好了，这就本系列文章的第一个使用React开发的程序哦。

（贴士）上例中的<script type="text/babel">的type="text/babel"必须记得要加，jsx是React编写组件的一种语法规范，可以看为是js的扩展，它支持将HTML和JS混写在一起，React就是使用这种脚本语法。

[Center]: /images/20210813/3e20f02c6c21456b93b4906e73372ebf.png