React开发入门
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello world!</title>
<script src = "../../build/react.js"></script>
<script src = "../../build/react-dom.js"></script>
<script src = "../../build/browser.min.js"></script>
</head>
<body>
<div id = "example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello,World!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
<script type="text/babel">
ReactDOM.render(
<h1>Hello,World!</h1>,
document.getElementById('example')
);
</script>
ReactDOM.render(
<h1>Hello,World!</h1>,
document.getElementById('example')
);
var animals = ['dog','cat','pig'];
ReactDOM.render(
<div>
{
animals.map(function(animal) {
return <h1>{animal}</h1>
})
}
</div>,
document.getElementById('example')
);
Warning: Each child in an array or iterator should have a unique "key" prop. Check the top-level render call using <div>
var animals = ['dog','cat','pig'];
ReactDOM.render(
<div>
{
animals.map(function(animal,key) {
return <h1 key = {key}>{animal}</h1>
})
}
</div>,
document.getElementById('example')
);
browser.min.js:3 XMLHttpRequest cannot load file:///Users/**/***/React/MyReactDemo/helloworld/src/helloworld.js.
Cross origin requests are only supported for protocol schemes:
http, data, chrome, chrome-extension, https, chrome-extension-resource.
startup chrome with --disable-web-security
On Windows: chrome.exe --disable-web-security On Mac: open /Applications/Google\ Chrome.app/ --args --disable-web-security
http://localhost:63342/MyReactDemo/helloworld/src/helloworld.html
file:///Users/zhanggui/zhanggui/React/MyReactDemo/helloworld/src/helloworld.html
3、组件化
React.createClass方法就是用于生成一个组件类,比如:
var ZGButton = React.createClass({
render:function() {
return <button>ZG{this.props.name}</button>
}
});
ReactDOM.render(
<ZGButton name = 'Button1'/>,
document.getElementById('example')
);
var zGButton = React.createClass({
render:function() {
return <button>ZG{this.props.name}</button>
}
});
ReactDOM.render(
<zGButton name="Button2">Button</zGButton>,
document.getElementById('example')
);
var Students = React.createClass({
render:function() {
return (
<ol>
{
React.Children.map(this.props.children,function(child) {
return <li>{child}</li>
})
}
</ol>
);
}
});
ReactDOM.render(
<Students>
<span>zhangsan</span>
<span>lisi</span>
</Students>,
document.getElementById('example')
);
var Student = React.createClass({
propTypes: {
myName:React.PropTypes.string.isRequired,
},
render:function() {
return <h1>
{this.props.myName}
</h1>
}
});
var myNameStr = "React";
ReactDOM.render(
<Student myName = {myNameStr} />,
document.getElementById('example')
);
var Student = React.createClass({
getDefaultProps: function() {
return {
myName:"Default React"
}
}, propTypes: {
myName:React.PropTypes.string.isRequired,
},
render:function() {
return <h1>
{this.props.myName}
</h1>
}
});
var MyComponment = React.createClass({
render:function(){
return (
<div>
<input type = "text" ref = "myTextInput"/>
<input type = "button" value = "Focus the text input" onClick={this.handleClick}/>
</div>
);
},
handleClick:function() {
// alert(this.refs.myTextInput);
this.refs.myTextInput.focus();
}
});
ReactDOM.render(
<MyComponment/>,
document.getElementById('example')
);
var LinkButton = React.createClass({
getInitialState:function () {
return {linked:false};
},
handleClick:function() {
this.setState({linked:!this.state.linked});
},
render:function() {
var text = this.state.linked? 'linked':'not linked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle
</p>
);
}
});
ReactDOM.render(
<LinkButton/>,
document.getElementById('example')
);
var Form = React.createClass({
getInitialState:function() {
return {value:'Hello'}; },
handleChange:function(event) {
this.setState({value:event.target.value});
},
render:function() {
var value = this.state.value;
return (
<div>
<input type="text" value = {value} onChange={this.handleChange}/>
<p>{value}</p>
</div> );
}
});
ReactDOM.render(
<Form/>,
document.getElementById('example')
);
var MyButton = React.createClass({ componentDidMount:function() {
alert("已经装载");
},
componentWillMount:function() {
alert("将要装载");
},
componentWillUpdate:function() {
alert("将要更新");
},
componentDidUpdate:function() {
alert("已经更新");
},
componentWillUnmount:function() {
alert("将要移除");
},
render:function(){
return (
<button>MyButton</button>
);
},
});
var LoadButton = React.createClass({
loadMyButton:function() {
ReactDOM.render(
<MyButton/>,
document.getElementById('myBTN')
);
},
removeMyButton:function() {
var result = ReactDOM.unmountComponentAtNode(document.getElementById('myBTN'));
console.log(result);
},
render:function() {
return (
<div>
<button onClick={this.removeMyButton}>卸载MyButton</button>
<button onClick={this.loadMyButton}>装载MyButton</button>
<div id="myBTN">这里是mybuttonquyu</div>
</div> );
}
});
ReactDOM.render(
<LoadButton/>,
document.getElementById('example')
);
var UserGist = React.createClass({
getInitialState:function() {
return {
username:'',
lastGistUrl:''
}
},
componentDidMount:function(){
$.get(this.props.source,function(result){
var lastGist = result[0];
if (this.isMounted()) {
this.setState({
username:lastGist.owner.login,
lastGistUrl:lastGist.html_url
}
);
}
}.bind(this));
},
render:function() {
return (
<div> {this.state.username}'s last gist is
<a href={this.state.lastGistUrl}>here</a> </div>
);
}
});
ReactDOM.render(
<UserGist source = "https://api.github.com/users/octocat/gists"/>,
document.getElementById('example')
);
React开发入门的更多相关文章
- 基于Nodejs生态圈的TypeScript+React开发入门教程
基于Nodejs生态圈的TypeScript+React开发入门教程 概述 本教程旨在为基于Nodejs npm生态圈的前端程序开发提供入门讲解. Nodejs是什么 Nodejs是一个高性能Ja ...
- React开发入门:以开发Todo List为例
目录 概述 React基本概念 JSX是什么? 设置React APP 初始化APP 应用结构 探索第一个React组件 index.js 变量和props JSX中的变量 组件props props ...
- 前端React开发入门笔记
什么是React React是一个JavaScript库,是由FaceBook和Instagram开发的,主要用于用户创建图形化界面. Hello world <!DOCTYPE html> ...
- React组件开发入门
React 组件开发入门 Introduction 本文组成: Ryan Clark文章Getting started with React的翻译. 博主的实践心得. React由Facebook的程 ...
- React Native入门教程 1 -- 开发环境搭建
有人问我为啥很久不更新博客..我只能说在学校宿舍真的没有学习的环境..基本上在宿舍里面很颓废..不过要毕业找工作了,我要渐渐把这个心态调整过来,就从react-native第一篇博客开始.话说RN也出 ...
- React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了
原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...
- React Native入门——布局实践:开发京东client首页(一)
有了一些对React Native开发的简单了解,让我们从实战出发.一起来构建一个简单的京东client. 这个client是仿照之前版本号的京东client开发的Android版应用,来源于CSDN ...
- 二、react开发环境配置与webpack入门
Webpack 模块打包工具(module bundler)功能: 将 CSS.图片与其他资源打包 打包之前预处理(Less.CoffeeScript.JSX.ES6 等)档案 依 entry 文件不 ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
随机推荐
- Fetch:下一代 Ajax 技术
Ajax,2005年诞生的技术,至今已持续了 10 年.它是一种在客户端创建一个异步请求的技术,本质上它不算创新,是一组技术的组合.它的核心对象是 XMLHttpRequest. 简单回顾下历史 19 ...
- docker-9 supervisord 参考docker从入门到实战
参考docker从入门到实战 使用 Supervisor 来管理进程 Docker 容器在启动的时候开启单个进程,比如,一个 ssh 或者 apache 的 daemon 服务.但我们经常需要在一个机 ...
- 安卓xml颜色设置
Android开发中,常常会用到color.xml颜色配置,好的颜色配置可以让尼的应用让人看起来赏心悦目! 不罗嗦,上图先 该工程已经罗列了常用的颜色配置 附上工程链接:http://download ...
- 虚拟机装系统出现 ntldr is missing(NTLDR丢失)、无法正常开机、解决方法
虚拟机(VMware Workstation或Hyper-V)装ghost版系统提示“ntldr is missing Press Ctrl+Alt+del to Resta 此方法对实体机.虚拟机安 ...
- [WPF系列]-Data Validation
项目经常前台界面涉及到用户输入时,我们常常会用到数据有效性的验证.在网页中我们之前用js来校验Form中的数据有效性.在WPF中我们如何实现这种验证机制了?答案:INotifyDataErrorInf ...
- 网盘的选择,百度网盘、google drive 还是 Dropbox
我是国内用户,需要越过Chinawall 我使用的是一枝红杏,用着还行 如果要买,结账时输入'laod80' 一枝红杏官网:官网地址 Dropbox: 稳定,速度快 Dropbox官网:链接 操作十分 ...
- hadoop 8088无法访问
http://bbs.csdn.net/topics/390891983 yarn-site.xml <property> <name>yarn.resourcemanager ...
- ros下boost移植
参考资料: http://blog.chinaunix.net/uid-12226757-id-3427282.html 注意:本链接中只看第一种的方法,验证程序参考以下: Boost安装成功的验证 ...
- 在线文档预览方案-office web apps续篇
上一篇在线文档预览方案-office web apps发布后收到很多网友的留言提问,所以准备再写一篇,一来介绍一下域控服务器安装,总结一下大家问的多的问题,二来宣传预览服务安装与技术支持的事情. 阅读 ...
- Android开发自学笔记(Android Studio)—4.3ImageView及其子类
一.引言 ImageView继承自View组件,主要功能用来显示图片,实际上他能显示的不仅是图片,Drawable对象都可以用ImageView来显示. ImageView派生了ImageButton ...