安装React
首先，这是一门框架，必然要有基于javascript的核心架包。来支持这门语言的语法，一共三个。下面我们来一一介绍
第一个.react.min.js
react.min.js最核心的库。这个库支撑了react的最基本的语法。第二个react-dom.min.js
这个库提供了基于react.min.js的一些与DOM相关的一些方法。把这个方法引用在react.min.js之后，就可以直接用这个方法了。browser.min.js
browser的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。另外介绍一个babel.min.js(选用)
babel 可以将 ES6 代码转为 ES5 代码，这个就包写出来的目的就是估计，react的源码里大量用了es6的新语法。现有浏览器对es6的支持不是很好，这个包就是解决这种兼容性问题。react一共三个核心库，还是比较简洁的。按照顺序1，2，3引用，就可以用react进行实验和开发啦
特别注重说明：因为在react中你有两种选择，第一是es6的语法可用用class，继承来定义类，如果你不用就老老实实的用var来定义一个对象。第二是你可以选择用JSX语法，当然可以不用jsx语法，也可以用普通的javascipt。而browser和babel这两个包就是一个转化工具。具体例子回在后面的写到
接下来我们构建属于自己的第一个react项目hello,world!
<!DOCTYPE html>
<html>
<head>
<script src="../react.js"></script>
<script src="../react-dom.js"></script>
<script src="../browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
这就是一个最最基本的react程序。界面输入为：
Hello, world!
其中值得解释的是ReactDOM.render 是这React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
其实还是比较好理解，有两部份，第一就是需要插入的代码块‘Hello, world!’这就是典型jsx语法,然后指定容器‘example’。
上面我介绍过，不用jsx语法，用普通javascript写法是如何写的呢？其实经过 browser转化后代码，就是普通javascript写法
ReactDOM.render(
React.createElement('h1',null,'Hello, world!'),
document.getElementById('example')
);当然不同jsx写法有对应的普通javascript写法。以后用react构建项目，当然还是推荐用jsx语法。
可读性强，也比较简单。通过转化普通的js进行对比，可以加深理解。
扫一扫
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
