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

[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. C# 的枚Enum

    简短的解释: enum 关键字用来声明枚举,一种包含一组被称为枚举数列表的 enum myType{ a, b, c,} int num = 1;Console.Write((myType)num); ...

  2. （素材源代码）猫猫学IOS（四）UI之半小时搞定Tom猫

    下载地址:http://download.csdn.net/detail/u013357243/8514915 以下是执行图片展示 制作思路以及代码解析 猫猫学IOS(四)UI之半小时搞定Tom猫这里 ...

  3. p中不能包含div

    一句话:有些块元素不可以包含另一些块元素 ,DTD中规定了块级元素是不能放在P里;P标签内包含块元素时,它会先结束自己,比如:<*p><*div>测试p包含div<*/d ...

  4. 防止UI界面被输入法遮挡(画面随输入法自适应)

    应用过Android手机的朋友都知道,有时候在文本框中输入文字后,操作按钮被输入法遮挡了,不得不关闭输入法才可以继续操作. 比如下面这个画面: 画面布局: <?xmlversion=" ...

  5. wzoj install

    wzoj/wiki/安装指南 wzoj-judger/wiki/安装指南 安装LAMP环境 如果你不知道如何安装:DebianUbuntuArchRed Hat 安装redis缓存系统 在 Ubunt ...

  6. AutoMapperExtension

    using System; using System.Collections.Generic; using System.Linq; using AutoMapper; using System.Co ...

  7. Guava之计时器Stopwatch

    import java.util.concurrent.TimeUnit; import org.junit.Test; import com.google.common.base.Stopwatch ...

  8. LightCapture for Mac（流程化截图工具）破解版安装

    1.软件简介    LightCapture 是 macOS 系统上的截图软件.LightCapture Mac 版号称是用最简洁的方式来截图,其的界面也确实非常简单整洁,不过功能同样出色,一键截屏. ...

  9. Git教程学习(二)

    教程来自: Git教程(廖雪峰的官方网站) 主要命令: $ git log #查看已提交内容 $ git log --pretty=oneline #查看已提交内容(紧凑版) $ git reset ...

  10. github desktop的使用

    1.建仓库 2.添加文件 3.提交文件到本地仓库 4.撤销提交到本地仓库 或者直接Ctrl+Z 5.提交到远端仓库 6.添加一个分支 7.分支合并 1.本地仓库合并 将新分支添加的文件合并到maste ...