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原生设计模式——10适配器模式之参数适配器
原理:参数适配器说白了就是给出要带入数据字段的对应字段的默认值,一旦数据字段值不足,就取默认值补足. [写法一]:直接返回 <!DOCTYPE html><html lang=&qu ...
- javascript的页面加载及性能优化(兼容IE7)
通常来说,window.onload就够用了,如果想加载多个事件,我们可以采取以下方式: window.onload = function(){ func1(); func ...
- delphi中panel控件应用
delphi中的panel控件是怎么使用的?研究了很久了,还是搞不懂,只知道把它放到form上面,其他操作一律不懂了,有谁可以请教一下,如何把其他控件放到里面去呢?谢谢 提问者采纳 直接把控件放到 ...
- 读取SQLServer数据库存储过程列表及参数信息
得到数据库存储过程列表: select * from dbo.sysobjects where OBJECTPROPERTY(id, N'IsProcedure') = 1 order by name ...
- MalformedObjectNameException: Invalid character '' in value part of property
http://blog.csdn.net/getdate/article/details/6729706 ojdbc6.jar的问题: 最近在项目中用spring配置oracle数据库连接池, 启动的 ...
- Raft 实现日志复制同步
Raft 实现日志复制同步 本篇文章以 John Ousterhout(斯坦福大学教授) 和 Diego Ongaro(斯坦福大学获得博士学位,Raft算法发明人) 在 Youtube 上的讲解视频及 ...
- 路由器安装ubuntu-16.04.1-server-amd64出现“无法安装busybox-initramfs”错误。向目标系统中安装busybox-initramfs软件包时出现一个错误。请检查/var/log/syslog或查看第四虚拟控制台以获得详细
公司的路由器要ubuntu服务器进行路由网络功能的管理,在安装的时候出现下面的错误提示: 安装ubuntu-16.04.1-server-amd64出现“无法安装busybox-initramfs”错 ...
- Hibernate核心配置文件
Hibernate.cfg.xml是Hibernate操作数据库的核心配置文件 *********************************************** 作用 01.管理实体类的 ...
- 每日一水之strcmp用法
strcmp函数 C/C++函数,比较两个字符串 设这两个字符串为str1,str2, 若str1==str2,则返回零: 若str1<str2,则返回负数: 若str1>str2,则返回 ...
- 读书笔记 effective c++ Item 6 如果你不想使用编译器自动生成的函数,你需要明确拒绝
问题描述-阻止对象的拷贝 现实生活中的房产中介卖房子,一个服务于这个中介的软件系统很自然的会有一个表示要被销售的房屋的类: class HomeForSale { ... }; 每个房产中介会立刻指出 ...