React组件开发（一）初识React

*React不属于MVC、MVVM，只是单纯的V层。

*React核心是组件(提高代码复用率、降低测试难度、代码复杂度)。

*自动dom操作，状态对应内容。

*React核心js文件：react.js和react-dom.js，每一个react组件开发都必须引用这两个js文件。

*browser.js用来将浏览器不识别的jsx代码翻译成js，通常也是作为第三个js文件引入。

*jsx代码： js跟xml混合一起的代码。

1.一段jsx代码

<div id="box"></div>

<script type="text/babel">

　　　　//注释---js 跟xml 混在一起写的风格，叫做jsx代码，需要借助工具（browser.js）翻译成正常的js代码

　　　　ReactDOM.render(
　　　　　　<div>
　　　　　　　　<h1>Hello, world!</h1>
　　　　　　　　<ul>
　　　　　　　　　　<li>12345</li>
　　　　　　　　</ul>
　　　　　　</div>,
　　　　　　document.getElementById('box')
　　　　　　);
</script>

2.自定义React组件

<div id="box"></div>

<script type="text/babel">

　　//自定义react组件

　　var Hello= React.createClass({
　　render:function(){
　　　　return (
　　　　　　<div>
　　　　　　　　<h2>Hello world 组件!</h2>
　　　　　　　　<ul>
　　　　　　　　　　<li>1111</li>
　　　　　　　　　　<li>2222</li>
　　　　　　　　　　<li>3333</li>
　　　　　　　　</ul>
　　　　　　</div>
　　　　　　)}
　　})

　　ReactDOM.render(<Hello></Hello>,document.getElementById("box"));

</script>

*组件首字母是大写 会被认为是自定义组件,首字母是小写，会被认为是 原生dom节点

* 组件最外层需要被一个标签包裹，不能有兄弟节点

* return (加上小括号,可以缩进)

转载于:https://www.cnblogs.com/BlueCc/p/6509346.html