react.JS基础
1、ReactDOM.render()
React.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/react.js"></script>
<script type="text/javascript" src="js/react-dom.js"></script>
<script type="text/javascript" src="js/browser.min.js"></script>
<style type="text/css">
#example{width: 300px;height: 100px;background: lightblue;}
</style>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<p>测试reactdom.render</p>,
document.getElementById("example")
)
</script>
</body>
</html>
运行结果：
2、jsx语法
HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/react.js"></script>
<script type="text/javascript" src="js/react-dom.js"></script>
<script type="text/javascript" src="js/browser.min.js"></script>
<style type="text/css">
#example{width: auto;height: 100px;background: lightblue;}
</style>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var names=['AAA','BBB','CCC'];
ReactDOM.render(
<div>
{
names.map(function(name,index){
return <div key={index}>Hello,{name}!</div>
})
}
</div>,
document.getElementById("example")
)
</script>
</body>
</html>
运行结果：
- 上面代码体现了 JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。
- JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员。
<body>
<div id="example"></div>
<script type="text/babel">
var arr=[
<h1 key="1">Hello world!</h1>,
<h2 key="2">I love react!</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById("example")
)
</script>
</body>
运行结果：
3、组件
React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
render:function(){
return <h1>Hello {this.props.name}</h1>
}
});
ReactDOM.render(
<HelloMessage name = "John" />,
document.getElementById("example")
)
</script>
</body>
运行结果：
上面代码中，变量 HelloMessage 就是一个组件类。模板插入 <HelloMessage /> 时，会自动生成 HelloMessage 的一个实例（下文的'组件'都指组件类的实例）。所有组件类都必须有自己的 render 方法，用于输出组件。
组件的用法与原生的 HTML 标签完全一致，可以任意加入属性，比如 <HelloMessage name='John' /> ，就是 HelloMessage 组件加入一个 name 属性，值为 John。组件的属性可以在组件类的 this.props 对象上获取，比如 name 属性就可以通过 this.props.name 读取。
4、this.props.children
this.props.children 属性，它表示组件的所有子节点。
<body>
<div id="example"></div>
<script type="text/babel">
var NotesList = React.createClass({
render: function() {
return(
<ol>
{
React.Children.map(this.props.children,function(child){
return <li>{child}</li>;
})
}
</ol>
);
}
});
ReactDOM.render(
<NotesList>
<span>hello</span>
<span>world</span>
</NotesList>,
document.getElementById("example")
);
</script>
</body> 运行结果：
5、React.findDOMNode()
组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 React.findDOMNode 方法。
<body>
<div id="example"></div>
<script type="text/babel">
var MyComponent = React.createClass({
handleClick:function(){
this.refs.myTextInput.focus();
},
render:function(){
return(
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="Focus the text input" onclick={this.handleClick} />
</div>
);
}
}); ReactDOM.render(
<MyComponent/>,
document.getElementById('example')
)
</script>
</body>
运行结果：
<body>
<div id="example"></div>
<script type="text/babel">
var data = 123;
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
ReactDOM.render(
<MyTitle title={data} />,
document.getElementById('example')
);
</script>
</body>
运行结果：
6、this.state
组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI。
<body>
<div id="example"></div>
<script type="text/babel">
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});
ReactDOM.render(
<LikeButton />,
document.getElementById('example')
);
</script>
</body>
上面代码是一个 LikeButton 组件，它的 getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。
由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。
7、表单
1 <body>
2 <div id="example"></div>
3 <script type="text/babel">
4 var Input = React.createClass({ getInitialState: function() { return {value: 'Hello!'}; }, handleChange: function(event) { this.setState({value: event.target.value}); }, render: function () { var value = this.state.value; return (
5 <div>
6 <input type="text" value={value} onChange={this.handleChange} />
7 <p>{value}</p>
8 </div>
9 ); } }); ReactDOM.render(
10 <Input/>, document.getElementById('example'));
11 </script>
12 </body>
react.JS基础的更多相关文章
- React JS 基础知识17条
1. 基础实例 <!DOCTYPE html> <html> <head> <script src="../build/react.js" ...
- React.js基础入门
本文主要是针对React的一些demo教程.参考了菜鸟教程中的react教程,做了一些总结.Demo的下载链接是 https://github.com/RealAndMe/react-demo 下面要 ...
- React.js基础知识
一. react.js的基本使用方法 (1)快速使用,hello world <div id="app"></div> <script src=&qu ...
- React.js 三周 -- 入门到搭建团队基础项目
吐槽 公司自己的产品,由于历史遗留问题,前端一直是和java放到一个项目里写的. 导致了,前端就被死死的绑在了IDEA战车上.想要看页面效果,先起几个java服务.想要调试一个改动,重启个java服务 ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- React.js入门必须知道的那些事
首先,React.js是facebook在2013年5月开源的一个前端框架,React不是一个MVC框架,它是构建易于可重复调用的web组件,侧重于UI, 也就是view层, React为了更高超的性 ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- 谈谈 React.js 的核心入门知识
近来React.js变得越来越流行,本文就来谈一谈React.js的入门实践,通过分析一些常用的概念,以及提供一些入门 的最佳编程编程方式,仅供参考. 首先需要搞懂的是,React并不是一个框架,Re ...
- React.js 小书介绍
React.js 小书 Github 关于作者 这是一本关于 React.js 的小书. 因为工作中一直在使用 React.js,也一直以来想总结一下自己关于 React.js 的一些知识.经验.于是 ...
随机推荐
- less封装样式有规律的类选择器-遁地龙卷风
1.解决的问题 .class-rule(p,2,width 20px animation-dely 0.1s);可以生成下列css样式 .p2 { animation-dely: 0.2s; widt ...
- 机器学习用Pandas实现数据库的读取
#读取数据库数据#import pandas as pd 导入模块#import pymysql 导入数据库模块#con = pymysql.connect(host='localhost',po ...
- python 机器学习三剑客 之 Matplotlib
Matplotlib介绍: Matplotlib 是一个 Python 的 2D绘图库,它以各种硬拷贝格式和跨平台的交互式环境生成出版质量级别的图形 . 通过 Matplotlib,开发者可以仅需要几 ...
- 20175315 实验二《Java面向对象程序设计》实验报告
20175315 实验二<Java面向对象程序设计>实验报告 一.实验内容及步骤 1.初步掌握单元测试和TDD 单元测试 任务一:三种代码 用程序解决问题时,要学会写以下三种代码: 伪代码 ...
- 医学图像数据（三）——TCIA部分数据下载方式
前为止,本人还没有找到不需要账号的就可以部分下载的方式,因此这里讲的是需要注册账号下载部分数据的方法. 注意:下载部分数据需要注册账号 注册账号网址:https://public.cancerimag ...
- 通过hook实现禁止shift+delete快捷键
实现全局hook必须要将hook代码封装在dll里,所以此程序有两个文件:noShiftDeleteHook.dll和noShiftDelete.exe noShiftDeleteHook.dll / ...
- linux删除软链接文件【原创】
删除软链接文件时,不要加“/”,去注意 正确方法: rm -rf ./softlinkfile 错误方法: rm -rf ./softlinkfile/ 上面错误的操作,这样会把软链接的源文件一同删除 ...
- 本地项目文件夹上传至个人Github
安装Git 之后到Git官网,点击Download下载,打开安装包一路按Next一切默认直至安装结束. 找到任意一个文件夹,点击鼠标右键后若出现下图的 Git Gui Here 和 Git Bash ...
- 深入Java虚拟机：多态性实现机制——静态分派与动态分派
方法解析 Class文件的编译过程中不包含传统编译中的连接步骤,一切方法调用在Class文件里面存储的都只是符号引用,而不是方法在实际运行时内存布局中的入口地址.这个特性给Java带来了更强大的动态扩 ...
- PCB载流你必须知道的那些事儿
也许大家都知道铜箔走线宽度与电流大小有关,往往都是硬件工程师让你走多少就走多少,但作为Layout工程师你还是要知道你的铜皮走线取值都由什么因素决定?取值多大才能让你安心? PCB的载流能力取决与以下 ...