安装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> <p id="example"></p> <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进行对比,可以加深理解。