初学React:JSX语法
这是本人初学React做的学习笔记;讲的不是很深,只算是简单的进行介绍。
这是一个小系列。都是在同一个模板中搭建的,但是代码是不能正常执行的。
>>第一个组件.js
'use strick'
/*===========================JavaScript的XML语法========================*/
var CommentBox = React.createClass({
render:function () {
return (
<div className="CommentBox">
Hello, world!I am a CommentBox.
</div>
);
}
}); ReactDOM.render(
<CommentBox />,
document.getElementById('content')
); /*=====================以上JS语句将被翻译为;==========================*/
var CommentBox = React.createClass({displayName: 'CommentBox',
render: function() {
return (
React.createElement('div', {className: "CommentBox"},
"Hello, world!I am a CommentBox."
)
);
}
}); ReactDOM.render(
React.createElement(commentBox, null),
document.getElementById('content')
);
/*=============================撰写组件===================================*/ var CommentList = React.cracteClass({
render: function() {
return (
<div className="commentList">
Hello, React`s World!I am a Commentlist.I am form Lao Zhao.
</div>
);
}
}); var CommentForm = React.createClass({
render: function() {
return (
<div className="commentForm">
Hello React`s World!I am a CommentForm.I am from Lao Zhao.
</div>
); }
}); /*==============================更新组件===================================*/ var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList />
<CommentForm />
</div>
);
}
}); /*==============================使用道具=======================================*/ var Comment = React.createClass({
render: function() {
return (
<div>
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.children}
</div>
);
}
}); /*===============================组件属性===========================================*/ var CommentList = React.createClass({
render: function() {
return (
<div className="commentList">
<Comment author="Zhao Gaosheng">This is one comment.</Comment>
<Comment author="Gaosheng">This is *another*comment.</Comment>
</div>
);
}
});
这里只是简单让大家感受一下JSX的语法氛围。
初学React:JSX语法的更多相关文章
- React JSX语法说明
原文:http://my.oschina.net/leogao0816/blog/379487 什么是JSX? 在用React写组件的时候,通常会用到JSX语法,粗看上去,像是在Javascript代 ...
- 2. React JSX语法及特点介绍
什么是JSX JSX 是一种类 XML 语言,全称是 JavaScript XML .React 可以不使用 JSX来编写组件,但是使用JSX可以让代码可读性更高.语义更清晰.对 Re ...
- React(JSX语法)-----JSX基本语法
JSX------HTML tags vs React Components: 1.To render a html tag,just use lower-case tag names in JSX; ...
- 学习 React(jsx语法) + es2015 + babel + webpack
视频学习地址: http://www.jtthink.com/course/play/575 官方地址 https://facebook.github.io/react/ 神坑: 1.每次this.s ...
- React(JSX语法)----动态UI
1.React honws how to bubble and capture events according to the spec,and events passed to your event ...
- React(JSX语法)----JSX拼写
注意:For DOM differences,such as the inline style attribute,check here. // bad: it displays "FIrs ...
- React(JSX语法)-----JSX属性
1. if you know all the propertities that you want to place on a component ahead of time,it is easy t ...
- 22-React JSX语法
React JSX语法 JSX只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,当然你想直接使用纯Javascript代码写也是可以的,只是利用JSX,组件的结构和 ...
- Webstorm 不识别es6 import React from ‘react’——webstorm不支持jsx语法怎么办
2016-10-31更新 webstorm不支持es6语法怎么办? webstorm不支持jsx语法怎么办? 参考:webstorm不支持jsx语法怎么办 I spent ages trying to ...
随机推荐
- bs4的简单使用
一.使用流程 解析流程: 1.pip install bs4 2.导包:from bs4 import BeautifulSoup 3.实例化一个BeautifulSoup对象(将页面源码数据加载到该 ...
- mysql 操作数据库创建,增删改查
创建数据库 默认字符编码 默认排序CREATE DATABASE IF NOT EXISTS day11 DEFAULT CHARSET utf8 COLLATE utf8_general_ci; / ...
- 转 dango的模型总结 and django-关于manage.py migrate无效的问题
http://iluoxuan.iteye.com/blog/1703061 1:用过django就知道django的model有多方便: 首先介绍下django的模型有哪些属性:先看例子: Djan ...
- 那些NPM文档中我看不懂地方
$cookies.set(keyName, value[, expireTimes[, path[, domain[, secure]]]]) //return this 中括号代表可选参数 上面一行 ...
- robotFramework接口测试GET和POST请求
安装: 接口测试需要安装Request和RequestLibrary 包 使用cmd命令安装:pip install requests 使用cmd命令安装:pip install -U robotfr ...
- chrome浏览器解决 跨域调试问题
1.关闭chrome浏览器(全部) 我们可以通过使用chrome命令行启动参数来改变chrome浏览器的设置,具体的启动参数说明参考这篇介绍.https://code.google.com/p/xia ...
- javascript实现移动端网页版阅读器
现在手机上的文本阅读app已经非常丰富,良好的阅读体验与海量的书库常常令我感到无比兴奋. 我想到8年前用一点几寸屏幕的mp3看电子书的情景,顿生一种淡淡的温馨.再久远一些,小的时候,我也经常和小伙伴们 ...
- 倒计时Text显示控制
倒计时Text显示控制:public class TimeCtrl : MonoBehaviour { public Text SJ; //定义显示Text public int GameTimes= ...
- react做股票、期货交易遇到的问题(不完全是react)及解决方法。
公司项目主要是做股票及期货行情展示及交易,h5相应的做了一些功能---可以看行情图及模拟交易,实盘交易存在一定的风险,老板希望做自己的产品,这样h5就尴尬了,不过没关系,项目里还是有一定技术含量的-- ...
- iOS-swift-函数和闭包
一.函数 关键字:func 参数列表用 , 分割 使用 -> 分割参数和返回值 func greet(person: String, day: String) -> String { re ...