react.js什么特点,怎样地好,这里就不多说。直接开篇入门学习吧,路漫漫其修远兮。
官网地址:React: A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
本文中的代码地址:demo1
基础结构说起
什么也不急说,先从 “hello word!”
的 index.html
一个实例说起:
|
|
结构解剖
对以上的结构进行一一解剖:
引入
核心库:<script src="../build/react.min.js"></script>
dom操作:<script src="../build/react-dom.min.js"></script>
JSX 语法转为 JavaScript 语法的依赖库:<script src="../build/browser.min.js"></script>
react Components
react Components
:不是真正的DOM节点,react Components 的一个实例而已。如:<span style={styleSpan}>hello {this.props.name}</span>
、<Hello name='react'/>
jsx
jsx
是一种语法糖,允许 HTML 与 JavaScript 的混写,即JSX XML
,最终会被解析成js
,主要是为了增加程序可读性、减少出错(那就不用 js 字符串、js数组来拼接 html 结构啦!)。类似的语法糖还有:TypeScript,CoffeeScript等。
以上代码31行处的 return 就是JSX
语法:<span style={styleSpan}>hello {this.props.name}</span>
必须告诉浏览器的type
属性:<script type="text/babel">
。
注意:react0.14
版之前有所不同,是<script type="text/jsx">
。
当然,也可以不用 jsx,但会麻烦很多,如下对比:
|
|
React.createElement
这里就暂且先略过了。
基本语法
React.creatClass
:创建组件;参数里面是对象({});最重要的不可缺少的 key 值:render,是一个 function(){},更多的参数往后深入学习。
注意:组件类的第一个字母必须大写,如var Hello = React.createClass({...})
,否则会报错ReactDOM.render
:将模板转为 HTML 语言;2个参数:1、被渲染的 react Component
,2、渲染完后要插入的容器。
css样式
以上的代码中,列举了3种样式:
|
|
注意:1、样式是对象写法;2、驼峰写法,如font-size
要写成fontSize
,类似原生的js写法;3、class要写成className
,es5的保留字段,es6的类;for 要写成 htmlFor
。
props值
props
实例元素的属性集合。如:{this.props.name}
的值、其实就是<Hello name='react'/>
中的react
;我们一般会根据这些属性的值、对实例的外观进行一定的修改不同的呈现。
踩到的坑
- 版本不同,引入的js不同
以上是react0.14
之后的引入的3个js文件,与react0.14
之前的引入文件有所不同,react0.14
之前只需要引入2个 js 文件,如下:<script src="lib/react.min.js"></script>
<script src="lib/JSXTransformer.min.js"></script>
其中,react.min.js
被拆分成了react.min.js
和react-dom.min.js
;JSXTransformer.min.js
被替换成了browser.min.js
。 - 跨域报错
原本打算将<script type="text/babel">...</script>
中的 js 代码独立出一个 js 文件,再引入进来的:<script src="index.js" type="text/babel"></script>
,结果报了跨域的错误。
官网已有声明:Note that some browsers (Chrome, e.g.) will fail to load the file unless it's served via HTTP.
解决办法:1、安装一个服务器,如Tomcat
;2、用前端开发神器webstorm
编辑器打开,webstorm打开html文件本来就是在服务器环境上运行的。 ReactDOM.render
、React.render
这俩有啥区别?React 0.14
之后,react package
一分为二:react
、react-dom
;
其中,react
包含:React.createElement、 .createClass、 .Component, .PropTypes, .Children
;react-dom
包含:ReactDOM.render、 .unmountComponentAtNode、 .findDOMNode
。
不断地做实例demo,从中才会深入理解、收货喜悦哦!!!
本文中的代码地址:demo1