首页 > 代码库 > React入门
React入门
通常我学一门编程语言都是先从“hello world!”开始，React也不例外。
首先搞清楚React的运行方式，有2种，
第一种：
jsx语法糖直接编写在HTML中，这样不用离线转换jsx了。看下代码：
<!DOCTYPE html><html><head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title></title></head><body><div id="example"></div><script type="text/jsx"> /** @jsx React.DOM */ React.renderComponent( <h1>hello,world!</h1>, document.getElementById(‘example‘) ); </script></body><script src=http://www.mamicode.com/"js/jsx/react.js"></script><script src=http://www.mamicode.com/"js/jsx/JSXTransformer.js"></script></html>
这段代码就是jsx的写法，当执行之后页面展示如下：
并不复杂，很简单,renderComponent()函数实例化根组件、启动框架和注入标记成一个原始的DOM元素,作为第二个参数提供。有2个参数，第一个为jsx脚本（类似html模板，由JSXTransformer.js将其转换为标准js，再由浏览器render 为html）,第二个选择的DOM对象，让第一个参数插入到选择的DOM对象中去,renderComponent()相似于jQuery中的$(document).ready(),都是初始化加载操作，但React没有用到Jquery的封装，完全自己实现的机制。在renderComponent()函数中，对参数做了多次的判断逻辑，比如说参数是不是Object对象，参数是不是function类型，第一个参数中的props属性是否为空字符串等等。。。
看下源码就可以了解到renderComponent()函数的实现机制了，
renderComponent: function(nextDescriptor, container, callback) { ("production" !== "development" ? invariant( //这里判断参数nextDescriptor是否是object对象，返回的是ture或false ReactDescriptor.isValidDescriptor(nextDescriptor), ‘renderComponent(): Invalid component descriptor.%s‘, ( //这里判断参数nextDescriptor是否是函数,isValidFactory返回的是类型 ReactDescriptor.isValidFactory(nextDescriptor) ? ‘ Instead of passing a component class, make sure to instantiate ‘ + ‘it first by calling it with props.‘ : // Check if it quacks like a descriptor //这里判断参数nextDescriptor属性中的props属性是否为空字符串 typeof nextDescriptor.props !== "undefined" ? ‘ This may be caused by unintentionally loading two independent ‘ + ‘copies of React.‘ : ‘‘ ) ) : invariant(ReactDescriptor.isValidDescriptor(nextDescriptor))); var prevComponent = instancesByReactRootID[getReactRootID(container)]; if (prevComponent) { var prevDescriptor = prevComponent._descriptor; if (shouldUpdateReactComponent(prevDescriptor, nextDescriptor)) { return ReactMount._updateRootComponent( prevComponent, nextDescriptor, container, callback ); } else { ReactMount.unmountComponentAtNode(container); } } var reactRootElement = getReactRootElementInContainer(container); var containerHasReactMarkup = reactRootElement && ReactMount.isRenderedByReact(reactRootElement); var shouldReuseMarkup = containerHasReactMarkup && !prevComponent; var component = ReactMount._renderNewRootComponent( nextDescriptor, container, shouldReuseMarkup ); callback && callback.call(component); return component; }
这里调用了很多个封装的函数进行处理，renderComponent()函数就是进入React的第一个入口。
接下来用创建一个组件方式来写“hello,world!”
<!DOCTYPE html><html><head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title></title>
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/index.css"/></head><body><div id="example"></div><script type="text/jsx"> /** @jsx React.DOM */ var CommentBox = React.createClass({ render:function(){ return ( <h1 className=‘hcolor‘> hello,world! </h1>); } }); React.renderComponent( <CommentBox />, document.getElementById(‘example‘) ); </script></body><script src=http://www.mamicode.com/"js/jsx/react.js"></script><script src=http://www.mamicode.com/"js/jsx/JSXTransformer.js"></script></html>
在这段代码中，我用createClass()函数进行自定义组件的创建，其实所谓创建组件是官方说法，最终创建出来的就是DOM元素，只不过这里进行动态生成的机制，感觉更灵活。至于组件的内容还有高级组件的创建后期再分享。
注：这里有个细节，当在render中返回DOM元素的时候，设置css样式用className才生效，如果想直接加入style属性，无效并且页面也不展示DOM元素！
在页面展示如下：
以上介绍了第一种编程方式 接下来想把页面中的js抽取出来单独的js文件并引用，这样就需要下面的方式了；
第二种：
jsx离线转换方式，在React官方网站已经详细说明了，
首先安装命令行工具(要求npm):
npm install -g react-tools
如果你的npm 运行连接失败，请设置一下npm的代理：
设置代理的命令: npm config set proxy=http://127.0.0.1:8087
npm config set registry=http://registry.npmjs.org
在cmd中操作一下即可,下面就是构建本地创建的js
jsx --watch src/ build/
这里src是目录，你可以自己定义，操作完就可以单独引用js进行操作了。
React还有很多要去研究，继续激情的前进着。。。
React入门