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 (加上小括号,可以缩进)
React组件开发(一)初识React的更多相关文章
- React组件开发入门
React 组件开发入门 Introduction 本文组成: Ryan Clark文章Getting started with React的翻译. 博主的实践心得. React由Facebook的程 ...
- wn-cli 像React组件开发一样来开发微信小程序
项目地址:wn-cli wn-cli wn-cli 像React组件开发一样来开发微信小程序 名字由来:wn -> weapp native 取第一个字母 Install npm install ...
- react组件开发规范(一)
这是通过修改项目运行在Google上时的警告,总结的的部分react组件开发规范: (1)编写组件时,一定要写PropTypes,切莫为了省事儿而不写! 如果一个Props不是required,一定在 ...
- jquery插件模式开发和react组件开发之间的异同
jquery插件模式开发和react组件开发之间的异同
- react复习总结(1)--react组件开发基础
这次是年后第一次发文章,也有很长一段时间没有写文章了.准备继续写.总结是必须的. 最近一直在业余时间学习和复习前端相关知识点,在一个公司呆久了,使用的技术不更新,未来真的没有什么前景,特别是我们这种以 ...
- React 组件开发注意事项
0.state的设定原则,如果render里用不到,则就不应该是一个state. 1.数组遍历时,用每一条数据的唯一标识作为key,尽量不要使用遍历的索引值作为key,如果它们从不重新排序,它们工作也 ...
- React组件开发
目录: 属性:props 内联样式 状态记忆 : state 生命周期 访问DOM 表单输入 承接快速入门篇:http://www.cnblogs.com/jasonnode/p/4444504.ht ...
- React 组件开发初探
react.js 在线地址:http://slides.com/yueyao/deck/#/ COMPONENT JSX 预编译语言, 一个基于ECMAscript 的xml-link 的语法扩展,最 ...
- react组件开发规范总结
开发react也有一段时间了,一开始的随手写,生命周期乱用,无状态组件的不熟悉.现在逐渐规范一下,从网上各个地方copy过来,整理出一份文档.可能不全,后续还得多提炼总结和完善. 一.组件内方法书写, ...
随机推荐
- JS之ONLoad事件
如果我问你window.load和window.onload分别是什么意思,恐怕你会回答我:“这不是页面加载完就执行吗”. 但是答案是不一定,得看你怎么用.看一下例子吧 例1: <!DOCTYP ...
- Flex组件的生命周期
组件实例化生命周期描述了用组件类创建组件对象时所发生的一系列步骤,作为生命周期的一部分,flex自动调用组件的的方法,发出事件,并使组件可见. 下面例子用as创建一个btn控件,并将其加入容器中 va ...
- 表单验证--通过原生js模仿ajax的异步交互
今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...
- jQuery Deferred和Promise的使用介绍:
deferred对象是从jquery1.5.0引入的一个新对象,ES6也引入了Promise的正式规范. 抽象来说,deferreds 可以理解为表示需要长时间才能完成的耗时操作的一种方式,相比于阻塞 ...
- POJ2774(二分+哈希)
Long Long Message Time Limit: 4000MS Memory Limit: 131072K Total Submissions: 27234 Accepted: 11 ...
- J.U.C并发框架
转载:http://itindex.net/detail/48869-j.u.c-%E6%A1%86%E6%9E%B6 J.U.C并发框架 作者:Doug Lea SUNY Oswego Oswego ...
- 消费创富会开发模式系统App
消费创富会系统定制开发,消费创富会网页开发模式,消费创富会开发软件,消费创富会系统APP开发,消费创富会平台模式开发,专业开发微信商城分销.公排.全返.分红.互助等模式定制开发,APP.网页版.微信端 ...
- [html] 学习笔记-Canvas使用路径
想要绘制其他图形,需要使用路径,使用路径包含4个步骤,开始创建路径.创建图形的路径.路径创建完成后关闭路径.设定绘制样式,之后就可以调用绘制方法绘制路径了. 1.绘制圆形 <!DOCTYPE h ...
- css3 过渡和2d变换——回顾
1.transition 语法:transition: property duration timing-function delay; transition-property 设置过渡效果的css ...
- windows下composer安装不了或composer命令无效的解决办法
安装方法: http://docs.phpcomposer.com/00-intro.html#Installation-Windows (官方中文帮助文档) 问题描述1: 通过Composer-Se ...