[React] React Fundamentals: First Component
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>React Lesson 0</title>
</head>
<body> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script>
<script type="text/jsx">
//First way: ReactApp, the first letter should be capitialize
var React_app = React.createClass({
render: function() {
return <h1>Hello React World!</h1>
}
}); React.render(<React_app />, document.body); //second way:
/*var App = React.createClass({
render: function(){
return React.DOM.h1(null, 'Hello React DOM'); //1: attr, 2: value
}
}); React.render(App(), document.body);*/ //Third way:
/*var App = React.createClass({
render: function() {
return React.createElement("h1", null, "Hello React Element"); //1: tag, 2: attr, 3: value
}
}); React.render(React.createElement(App), document.body);*/ </script>
</body>
</html>
[React] React Fundamentals: First Component的更多相关文章
- React.createClass和extends Component的区别
React.createClass和extends Component的区别主要在于: 语法区别 propType 和 getDefaultProps 状态的区别 this区别 Mixins 语法区别 ...
- React Native 中的component 的生命周期
React Native中的component跟Android中的activity,fragment等一样,存在生命周期,下面先给出component的生命周期图 getDefaultProps ob ...
- React 的 PureComponent Vs Component
一.它们几乎完全相同,但是PureComponent通过prop和state的浅比较来实现shouldComponentUpdate,某些情况下可以用PureComponent提升性能 1.所谓浅比较 ...
- [React] React Fundamentals: Integrating Components with D3 and AngularJS
Since React is only interested in the V (view) of MVC, it plays well with other toolkits and framewo ...
- React/React Native 的ES5 ES6写法对照表
//es6与es5的区别很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component ...
- React/React Native 的ES5 ES6写法对照表－b
很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...
- [React] react+redux+router+webpack+antd环境搭建一版
好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...
- React: React组件的生命周期
一.简介 在前面的第二篇博文中对组件的生命周期虽然做了一个大略介绍,但总感觉说的过于简单,毕竟生命周期是React组件的核心部分.在我们熟练使用React挂载和合成组件来创建应用表现层的过程中,针对数 ...
- React: React的属性验证机制
一.简介 在开发中,属性变量类型的验证,几乎是任何语言都必须关注的问题,因为如果传入的数据类型不对,轻者程序运行仅仅是给出警告⚠️,严重的会直接导致程序中断,APP闪退或者web页面挂掉,这是很严重的 ...
- React/react相关小结
React React组件由React元素组成,React组件使用React.Component或React.PureComponent来生成:React元素使用JSX的语法来编写或使用React.c ...
随机推荐
- Eclipse导入git上的maven web项目 部署
1 Eclipse中导入Git的maven项目 方法1: (1)首先当然是拉代码. 在Eclipse里面有个Git Repositories Exploring.就是Git仓库,clone a git ...
- hdu 4878 ZCC loves words AC自动机+中国剩余定理+快速幂
题意就不说了. 分析:折腾好几天自己写的代码还是看了别人代码后发现几乎没什么复杂度的差别,可是就是一直超时,后来干脆照着别人写啊,一直WA,就在准备放弃干脆先写这篇博客的时候,又看了一眼WA的代码,发 ...
- 让QT编译快一点（增加基础头文件）
姚冬,中老年程序员 进藤光.杨个毛.欧阳修 等人赞同 我是来反对楼上某些答案的.我曾经用MFC写了金山词霸(大约20多万行),又用Qt写了YY语音(大约100多万行),算是对两种框架都比较有经验.纠正 ...
- velocity-1.7中vm文件的存放位置
velocity-1.7中关于vm文件存放 demo: public class App_example1 { public App_example1() { String propfile=&quo ...
- DedeCms 5.7友情链接模块注入漏洞
漏洞版本: DedeCms 5.7 漏洞描述: DedeCms基于PHP+MySQL的技术开发,是目前国内应用最广泛的php类CMS系统. DedeCms 5.7前台提交友情链接处,可以插入恶意JS代 ...
- [light oj 1013] Love Calculator
1013 - Love Calculator Yes, you are developing a 'Love calculator'. The software would be quite comp ...
- Native Fullscreen JavaScript API (plus jQuery plugin)
http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/ HTML5 <video> is gre ...
- jquery图片播放插件Fancybox（灯箱）
效果预览Demo源码下载 Fancybox的特点如下: 可以支持图片.html文本.flash动画.iframe以及ajax的支持 可以自定义播放器的CSS样式 可以以组的形式进行播放 如果将鼠标滚动 ...
- 使用Chrome测试页面响应性
如今我们都知道 响应式 的意思.作为开发者,我们常常开发一些响应式的应用.有很多工具可以帮助我们完成这个目的.某些人甚至使用付费扩展.然而,我用了一个东西,它就是 Google Chrome 浏览器. ...
- 设计模式_Adapt
一个形象的例子: (ADAPTER)在朋友聚会上碰到了一个美女Sarah,从香港来的,可我不会说粤语,她不会说普通话,只好求助于我的朋友kent了,他作为我和Sarah之间的Adapter,让我和Sa ...