有了七篇基础学习，了解相关的知识体系，之后便是系统地再来一次。

[React] 01 - Intro: javaScript library for building user interfaces

[React] 02 - Intro: react component and Design pattern

[React] 03 - Intro: react.js in twelve demos

[React] 04 - Intro: MongoDB becomes popular

[React] 05 - Route: connect with ExpressJS 　　　　    【Nodejs + Express + MongoDB 基础篇】

[React] 06 - Route: koa makes your life easier

[React] 07 - Flux: react communicates with mongodb

From [React] 08, based on React JS Tutorials.

运行起来

1.Installs webpack globally on your system, that makes it available in terminal window.

npm i webpack -g

2.运行代码：

$ webpack-dev-server --content-base src

3.UI效果：数据绑定

client.js文件的进化

(1). render()返回值的思考

client.js

如果需返回多个东东，则使用<div>标签。

(2). Layout独立出来

client.js

import Layout from "./components/Layout";

const app = document.getElementById('app');　　// html的app在哪里？

ReactDOM.render(<Layout/>, app);              // ----> 参见[对比1]，第一个参数是组件内容，第二个是挂载位置

react会根据标签制定的位置来动态改变html内容。

index.html

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>React Tutorials</title>

    <!-- change this up! http://www.bootstrapcdn.com/bootswatch/ -->

    <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/cosmo/bootstrap.min.css" type="text/css" rel="stylesheet"/>

  </head>

  <body>

    <div id="app"></div>　　　　// <---- 实际上成了一个变量，也即是react会根据标签制定的位置来动态改变

    <script src="client.min.js"></script>

  </body>

</html>

这里是 [对比1]：

ReactDOM.render(

　　<div>

　　　　<input type="text" value={value}/>        // 注意单标签一定要闭合“/”,否则会报错

　　　　<button>{buttonName}</button>             // 在{}中插入变量

　　</div>,

　　document.getElementById("container")

)

(3). Louyout --> Header --> Title

将Header和Footer作为组件单独实现，也就是【复合组件】。

Layout.js

 render() {

    return (

      <div>

        <Header changeTitle={this.changeTitle.bind(this)} title={this.state.title} />

        <Footer />

      </div>

    );

  }

当然，Header也可以进一步地独立出来。

Header.js

import React from "react";

import Title from "./Header/Title";

export default class Header extends React.Component {

  handleChange(e) {

    const title = e.target.value;

    this.props.changeTitle(title);

  }

  render() {

    return (

      <div>

        <Title title={this.props.title} />

        <input value={this.props.title} onChange={this.handleChange.bind(this)} />

      </div>

    );

  }

}

Header中的标签Title的实现处。

Title.js

export default class Title extends React.Component {

  render() {

    return (

      <h1>{this.props.title}</h1>

    );

  }

}

执行流程

Header.js

import React from "react";

import Title from "./Header/Title";

export default class Header extends React.Component {

  handleChange(e) {　　　　　　　　// e就是指：event

    // (1) 获得新的input数据

    const title = e.target.value;

    // (2) 然后改变title数据

    this.props.changeTitle(title);　　　　　　　　// 第二步：在逻辑上，虚拟DOM需要改变title, according to input

    // (3) 之后命令layout渲染

  }

  render() {

    // input中的onChange作为listener，触发上面的handleChange()

    return (

      <div>

        <Title title={this.props.title} />

        <input value={this.props.title} onChange={this.handleChange.bind(this)} />        //　第一步：监听事件获得input改变
      </div> 
    ); 
  }

改变title实际干活的地方，如下。

Layout.js

import React  from "react";

import Footer from "./Footer";

import Header from "./Header";

export default class Layout extends React.Component {

  constructor() {

    super();

    this.state = {

      title: "Welcome",

    };

  }

  changeTitle(title) {

    this.setState({title});

  }

  render() {

    return (

      <div>

        <Header changeTitle={this.changeTitle.bind(this)} title={this.state.title} />　　// 将函数指针作为参数传给header子组件

        <Footer />

      </div>

    );

  }

}

可见，这里其实透露出的是一种“分离”的思想。

[React] 08 - Tutorial: evolution of code-behind的更多相关文章

  1. [React] 10 - Tutorial: router

    Ref: REACT JS TUTORIAL #6 - React Router & Intro to Single Page Apps with React JS Ref: REACT JS ...

  2. React-Native（二）：React Native开发工具vs code配置

    从网上翻阅了一些开发react-native的开发工具时,发现其实可选的工具还是比较多的Sublime Text,WebStrom,Atom+Nuclide,vs code 等.因为我用.net生态环 ...

  3. [React] 09 - Tutorial: components

    jsx变为js的过程:http://babeljs.io/repl/ youtube: https://www.youtube.com/channel/UCA-Jkgr40A9kl5vsIqg-BIg ...

  4. React.js Tutorial: React Component Lifecycle

    Introduction about React component lifecycle. 1 Lifecycle A React component in browser can be any of ...

  5. [Full-stack] 快速上手开发 - React

    故事背景 [1] 博客笔记结合<React快速上手开发>再次系统地.全面地走一遍. [2] React JS Tutorials:包含了JS --> React --> Red ...

  6. [Code::Blocks] Install wxWidgets & openCV

    The open source, cross platform, free C++ IDE. Code::Blocks is a free C++ IDE built to meet the most ...

  7. 本人SW知识体系导航 - Programming menu

    将感悟心得记于此,重启程序员模式. js, py, c++, java, php 融汇之全栈系列 [Full-stack] 快速上手开发 - React [Full-stack] 状态管理技巧 - R ...

  8. React调试——visual studio code

    原文链接:Using React in Visual Studio Code 原文链接:Live edit and debug your React apps directly from VS Cod ...

  9. [React Native] Installing and Linking Modules with Native Code in React Native

    Learn to install JavaScript modules that include native code. Some React Native modules include nati ...

随机推荐

  1. jquery中ajax的写法

    方法一: $.ajax(url,data,fn); $('#btn').click(function(){ $.ajax({ url:"112.json", type:" ...

  2. linux 关于时间日期date

    一.查看和修改Linux的时区 1. 查看当前时区 命令 : "date -R" 2. 修改设置Linux服务器时区 方法 A 命令 : "tzselect" ...

  3. java程序中实现打开 某个指定浏览器

    package com.test; import java.lang.reflect.Method; //实现打开浏览器并跳到指定网址的类 public class BareBonesBrowserL ...

  4. PID控制器（比例-积分-微分控制器）- I

    形象解释PID算法 小明接到这样一个任务: 有一个水缸点漏水(而且漏水的速度还不一定固定不变),要求水面高度维持在某个位置,一旦发现水面高度低于要求位置,就要往水缸里加水. 小明接到任务后就一直守在水 ...

  5. 外卖ERP管理系统(二)

    京门时代旗下外卖ERP管理系统是一款专注外卖行业的解决方案系统! 系统介绍: 1.外卖erp系统是一款集订单分发.一键派送.实时大屏监控.店铺进销存.仓储管理及数据分析为一体的智能化外卖管理系统.已服 ...

  6. POJ2456 Aggressive cows 二分

    Description Farmer John has built a new long barn, with N (2 <= N <= 100,000) stalls. The stal ...

  7. javax.crypto.BadPaddingException: Given final block not properly padded解决方案

    解密的时候报错: javax.crypto.BadPaddingException:   Given   final   block   not   properly   padded 该异常是在解密 ...

  8. Eureka的优势

    http://www.cnblogs.com/zgghb/p/6515062.html Eureka的优势 1.在Eureka平台中,如果某台服务器宕机,Eureka不会有类似于ZooKeeper的选 ...

  9. hadoop权威指南学习(一) - 天气预报MapReduce程序的开发和部署

    看过Tom White写的Hadoop权威指南(大象书)的朋友一定得从第一个天气预报的Map Reduce程序所吸引, 殊不知,Tom White大牛虽然在书中写了程序和讲解了原理,但是他以为你们都会 ...

  10. MDX Cookbook 02 - 除数为零的问题

    先直接看一个例子 - WITH MEMBER [Date].[Calendar Year].[CY 2006 vs 2005 Bad] AS ], FORMAT_STRING = 'Percent' ...