react入门参考资料--step by step
ReactJS简介
React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。更多关于react的中文介绍请参这篇文章.
学习react需要具备的一些知识栈:
你需要了解JavaScript, HTML5 及 CSS.仅管 ReactJS 并不使用 HTML, 但是它使用的JSX语法 与 HTML非常相似,如果有这些知识的基础,会对后面的学习非常有帮助。在接下来的例子中,我将会用到一些EcmaScript 2015 的语法,所以提前进补一下这方面的知识也是很有益处的。
学习react需要准备的开发环境:
虽然我推荐使用mac系统作为react开发环境,但是windows系统也可以满足当前的学习条件。本教程需要nodejs的支持,请自行安装。教程相关代码请从我的github.com上拉取相关代码到本地。然后在终端(命令行)中输入npm install && npm start
下面开始react的学习之旅。
1. 了解jsx的用法,首先新建一个App.jsx的文件。下面的例子中,我们返回一个div容器,需要注意的是,仅管我们返回的内容很像是一段html代码,但它不是真的htm,记住这一点很重要。
import React from 'react'; class App extends React.Component {
render() {
return (
<div>
Hello World!!!
</div>
);
}
} export default App;
打开浏览器访问localhost:8080/index.html 如果之前的准备工作没有问题的话,此时,你应当可以看到页面上显示出了Hello World !!! 这没有什么特别的,不是吗?如果我们要返回多个dom元素,需要有一个元素来包围里边的元素。下面我们用一个div来包围h1,h2,和p元素来演示一下。
import React from 'react'; class App extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
<h2>Content</h2>
<p>This is the content!!!</p>
</div>
);
}
} export default App;
保存这后,浏览器自动刷新了页面。这神奇的效果,得益于我们的自动化构建方式,如果你对这一块的实现有兴趣,请自行查补webpack、webpack-dev-server相关内容。
我们可以用html类似的方式给元素添加自定义的属性,你需要加上一个data-前缀。下面我要演示一下如何给元素添加自定义属性。
import React from 'react'; class App extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
<h2>Content</h2>
<p data-myattribute = "somevalue">This is the content!!!</p>
</div>
);
}
} export default App;
如果要添加变量或者表达式,需要使用大括号{}。示例如下:
import React from 'react'; class App extends React.Component {
render() {
return (
<div>
<h1>{1+1}</h1>
</div>
);
}
} export default App;
需要注意的是,不可以在表达式中使用if else , 但是可以使用三目运算符 ? :
import React from 'react'; class App extends React.Component {
render() { var i = 1; return (
<div>
<h1>{i == 1 ? 'True!' : 'False'}</h1>
</div>
);
}
} export default App;
下面演示在jsx语法中,如何给元素添加行内样式,这和jquery中css()的用法非常类似。
import React from 'react'; class App extends React.Component {
render() { var myStyle = {
fontSize: 100,
color: '#FF0000'
} return (
<div>
<h1 style = {myStyle}>Header</h1>
</div>
);
}
} export default App;
如何使用注释,使用{} //单行注释, /**/ 多行注释
import React from 'react'; class App extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
{//End of the line Comment...}
{/*Multi line comment...*/}
</div>
);
}
} export default App;
到这里,关于jsx的用法就差不多可以结束了,下一节演示组件的用法。
本章文件链接http://www.tutorialspoint.com/reactjs/reactjs_jsx.htm 可能需要FQ
2 组件的用法
import React from 'react'; class App extends React.Component {
render() {
return (
<div>
<Header/>
<Content/>
</div>
);
}
} class Header extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
</div>
);
}
} class Content extends React.Component {
render() {
return (
<div>
<h2>Content</h2>
<p>The content text!!!</p>
</div>
);
}
} export default App;
新建一个main.js文件,内容如下
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx'; ReactDOM.render(<App />, document.getElementById('app'));
3 通过状态机实现组件之间变量的传递,this.state 这是react中一个非常重要的对象,与之非常类似的一个对角是this.props, 它们经常会用到,我有必要简单说一下它们的区别。state,常用于组件内部状态的变化,而props,常用于向子组件传递变量。
import React from 'react'; class App extends React.Component {
constructor() {
super(); this.state = {
data:
[
{
"id":1,
"name":"Foo",
"age":"20"
}, {
"id":2,
"name":"Bar",
"age":"30"
}, {
"id":3,
"name":"Baz",
"age":"40"
}
]
}
} render() {
return (
<div>
<Header/>
<table>
<tbody>
{this.state.data.map((person, i) ⇒ <TableRow key = {i} data = {person} />)}
</tbody>
</table>
</div>
);
}
} class Header extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
</div>
);
}
} class TableRow extends React.Component {
render() {
return (
<tr>
<td>{this.props.data.id}</td>
<td>{this.props.data.name}</td>
<td>{this.props.data.age}</td>
</tr>
);
}
} export default App;
在循环组件内容时,使用key = {i} 是一个常用的优化技巧。
props 初次露面,下面的例子没有什么代表性,更像是state的用法。
import React from 'react'; class App extends React.Component {
constructor(props) {
super(props); this.state = {
header: "Header from state...",
"content": "Content from state..."
}
} render() {
return (
<div>
<h1>{this.state.header}</h1>
<h2>{this.state.content}</h2>
</div>
);
}
} export default App;
下面展示props的真正用法,更新一下main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx'; ReactDOM.render(<App headerProp = "Header from props..." contentProp = "Content
from props..."/>, document.getElementById('app')); export default App;
更新一下App.jsx
import React from 'react'; class App extends React.Component {
render() {
return (
<div>
<h1>{this.props.headerProp}</h1>
<h2>{this.props.contentProp}</h2>
</div>
);
}
} export default App;
我们在App组件上添加的headerProp和contentProp这两个属性可以在App组件内通过this.props拿到。
再来一个props和state一起使用的例子,相对有点复杂,需要仔细看代码。
App.jsx的内容更新如下:
import React from 'react'; class App extends React.Component {
constructor(props) {
super(props); this.state = {
header: "Header from props...",
"content": "Content from props..."
}
} render() {
return (
<div>
<Header headerProp = {this.state.header}/>
<Content contentProp = {this.state.content}/>
</div>
);
}
} class Header extends React.Component {
render() {
return (
<div>
<h1>{this.props.headerProp}</h1>
</div>
);
}
} class Content extends React.Component {
render() {
return (
<div>
<h2>{this.props.contentProp}</h2>
</div>
);
}
} export default App;
main.js还原成老样子:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx'; ReactDOM.render(<App/>, document.getElementById('app'));
原文链接http://www.tutorialspoint.com/reactjs/reactjs_props_overview.htm
(未完待续....)
react入门参考资料--step by step的更多相关文章
- react入门参考资料
ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出 ...
- 转载自~浮云比翼:Step by Step:Linux C多线程编程入门(基本API及多线程的同步与互斥)
Step by Step:Linux C多线程编程入门(基本API及多线程的同步与互斥) 介绍:什么是线程,线程的优点是什么 线程在Unix系统下,通常被称为轻量级的进程,线程虽然不是进程,但却可 ...
- Step by Step 真正从零开始,TensorFlow详细安装入门图文教程!帮你完成那个最难的从0到1
摘要: Step by Step 真正从零开始,TensorFlow详细安装入门图文教程!帮你完成那个最难的从0到1 安装遇到问题请文末留言. 悦动智能公众号:aibbtcom AI这个概念好像突然就 ...
- [置顶] hdu2815 扩展Baby step,Giant step入门
题意:求满足a^x=b(mod n)的最小的整数x. 分析:很多地方写到n是素数的时候可以用Baby step,Giant step, 其实研究过Baby step,Giant step算法以后,你会 ...
- WPF Step By Step 系列 - 开篇 ·
WPF Step By Step 系列 - 开篇 公司最近要去我去整理出一个完整的WPF培训的教程,我刚好将自己学习WPF的过程和经验总结整理成笔记的方式来讲述,这里就不按照书上面的东西来说了,书本上 ...
- Metrics.NET step by step使用Metrics监控应用程序的性能
使用Metrics监控应用程序的性能 在编写应用程序的时候,通常会记录日志以便事后分析,在很多情况下是产生了问题之后,再去查看日志,是一种事后的静态分析.在很多时候,我们可能需要了解整个系统在当前,或 ...
- 数据库设计 Step by Step (2)——数据库生命周期
引言:数据库设计 Step by Step (1)得到这么多朋友的关注着实出乎了我的意外.这也坚定了我把这一系列的博文写好的决心.近来工作上的事务比较繁重,加之我期望这个系列的文章能尽可能的系统.完整 ...
- React入门学习
为了获得更好的阅读体验,请访问原地址:传送门 一.React 简介 React 是什么 React 是一个起源于 Facebook 的内部项目,因为当时 Facebook 对于市场上所有的 JavaS ...
- react入门(3)
在第一篇文章里我们介绍了jsx.组件.css写法 点击查看react入门(1) 第二篇文章里我们介绍了事件.this.props.children.props....other.map循环 点击查 ...
随机推荐
- 对Castle Windsor的Resolve方法的解析时new对象的探讨
依赖注入框架Castle Windsor从容器里解析一个实例时(也就是调用Resolve方法),是通过调用待解析对象的构造函数new一个对象并返回,那么问题是:它是调用哪个构造函数呢? 无参的构造函数 ...
- solr_架构案例【京东站内搜索】(附程序源代码)
注意事项:首先要保证部署solr服务的Tomcat容器和检索solr服务中数据的Tomcat容器,它们的端口号不能发生冲突,否则web程序是不可能运行起来的. 一:solr服务的端口号.我这里的sol ...
- $.extend()的实现源码 --(源码学习1)
目标: $.extend({ add:function(a,b){ return a + b; } }) console.log($.a ...
- 《Django By Example》第二章 中文 翻译 (个人学习,渣翻)
书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:翻译完第一章后,发现翻译第二章的速 ...
- Kafka副本管理—— 为何去掉replica.lag.max.messages参数
今天查看Kafka 0.10.0的官方文档,发现了这样一句话:Configuration parameter replica.lag.max.messages was removed. Partiti ...
- IT运维监控解决方案介绍
现状 •小公司/ 创业团队< 500台服务器规模 开源方案:Zabbix.Nagios.Cacti- 云服务提供商:监控宝.oneAlert等 •BAT级别> 10万台服务器 投 ...
- css中line-height行高的深入学习
之前对css中行高line-height的理解还是有些肤浅,深入后才发觉里面包罗万象.学习行高line-height,首先从基本原理开始 (标注该文章转载 http://www.cnblogs.com ...
- Lucene4.4.0 开发之排序
排序是对于全文检索来言是一个必不可少的功能,在实际运用中,排序功能能在某些时候给我们带来很大的方便,比如在淘宝,京东等一些电商网站我们可能通过排序来快速找到价格最便宜的商品,或者通过排序来找到评论数最 ...
- 如何使用SHOW WARNINGS?
1.show warnings:显示上一个语句的错误.警告以及注意.如图:
- Microsoft Visual Studio 2015 下载、注册、安装过程、功能列表、问题解决
PS:请看看回复.可能会有文章里没有提到的问题.也许会对你有帮助哦~ 先上一张最终的截图吧: VS2015正式版出了,虽然没有Ultimate旗舰版,不过也是好激动的说.哈哈.可能有的小伙伴,由于工作 ...