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

(未完待续....)

　　

时间： 2024-07-31 21:51:27

react入门参考资料--step by step的相关文章

转载自~浮云比翼:Step by Step：Linux C多线程编程入门(基本API及多线程的同步与互斥)

Step by Step:Linux C多线程编程入门(基本API及多线程的同步与互斥) 介绍:什么是线程,线程的优点是什么 线程在Unix系统下,通常被称为轻量级的进程,线程虽然不是进程,但却可以看作是Unix进程的表亲,同一进程中的多条线程将共享该进程中的全部系统资源,如虚拟地址空间,文件描述符和信号处理等等.但同一进程中的多个线程有各自的调用栈(call stack),自己的寄存器环境(register context),自己的线程本地存储(thread-local storage). 一

数据库设计 Step by Step (1)——扬帆启航

引言:一直在从事数据库开发和设计工作,也看了一些书籍,算是略有心得.很久之前就想针 对关系数据库设计进行整理.总结,但因为种种原因迟迟没有动手,主要还是惰性使然.今天也算是痛下决心开始这项卓绝又令我兴奋的工作.这将是一个系列的文 章,我将以讲座式的口吻展开讨论(个人偷懒,这里的总结直接拿去公司培训新人用). 系列的第一讲我们先来回答下面几个问题 数据库是大楼的根基 大多数程序员都很急切,在了解基本需求之后希望很快的进入到编码阶段(可能只有产出代码才能反映工作量),对于数据库设计思考得比较少. 这

数据库设计 Step by Step (2)——数据库生命周期

引言:数据库设计 Step by Step (1)得到这么多朋友的关注着实出乎了我的意外.这也坚定了我把这一系列的博文写好的决心.近来工作上的事务比较繁重,加之我期望这个系列的文章能尽可能的系统.完整,需要花很多时间整理.思考数据库设计的各种资料,所以文章的更新速度可能会慢一些,也希望大家能够谅解. 系列的第二讲我们将站在高处俯瞰一下数据库的生命周期,了解数据库设计的整体流程 数据库生命周期 大家对软件生命周期较为熟悉,数据库也有其生命周期,如下图所示. 图(1)数据库生命周期 数据库的生命周期

React入门学习

为了获得更好的阅读体验,请访问原地址:传送门 一.React 简介 React 是什么 React 是一个起源于 Facebook 的内部项目,因为当时 Facebook 对于市场上所有的 JavaScript MVC 框架都不太满意,所以索性就自己写了一套,用来架设 Instagram.做出来之后,发现这套东西还蛮好用的,于是就在 2013 年 5 月开源了. 在这里我们需要稍微注意一下 库(Library) 和 框架(Framework) 的区别,React 本身是一个用于构建用户界面的 J

React 入门实例教程

React 入门实例教程 作者: 阮一峰 日期: 2015年3月31日 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了. 由于 React 的

数论之高次同余方程（Baby Step Giant Step + 拓展BSGS）

什么叫高次同余方程?说白了就是解决这样一个问题: A^x=B(mod C),求最小的x值. baby step giant step算法 题目条件:C是素数(事实上,A与C互质就可以.为什么?在BSGS算法中是要求a^m在%c条件下的逆元的,如果a.c不互质根本就没有逆元.) 如果x有解,那么0<=x<C,为什么? 我们可以回忆一下欧拉定理: 对于c是素数的情况,φ(c)=c-1 那么既然我们知道a^0=1,a^φ(c)=1(在%c的条件下).那么0~φ(c)必定是一个循环节(不一定是最小的)

(转)React 入门实例教程

作者: 阮一峰 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了. 由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非

Git Step by Step – (8) Git的merge和rebase

前面一篇文章中提到了"git pull"等价于"git fetch"加上"git merge",然后还提到了pull命令支持rebase模式,这篇文章就介绍一下merge和rebase之间有什么差别. 由于我们主要是想看看merge跟rebase之间的区别,这里就是用本地仓库的分支进行演示了. merge 其实在介绍分支的那篇文章中已经介绍过了一些分支merge的内容,这里就进行一些补充和总结. 下面我们基于本地一个仓库开始介绍,当前仓库的分支情

C# 2012 step by step 学习笔记8 CHAPTER 9 Creating Value types with enumerations and Structures

C# 2012 step by step 学习笔记8 CHAPTER 9 Creating Value types with enumerations and Structures things about 1. Declare an enumeration type. 2. Create and use an enumeration type. 3. Declare a structure type. 4. Create and use a structure type. 5. Explain