react入门参考资料--step by step
Posted 青蛙哥
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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的主要内容,如果未能解决你的问题,请参考以下文章
(转载)Step by Step:Linux C多线程编程入门(基本API及多线程的同步与互斥)
step by step to OpenFOAM:step1