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

[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. __NSCFNumber isEqualToString:]: unrecognized selector sent to instance 0xb000000000000003

    出现这个报错的原因是:拿数字与字符串进行对比了. 检查两边的数据格式是否一致 如果不一致,可以使用[nsstring stringwithformate:@"%d",xx]包装一下 ...

  2. C# Request 获取Url

    1.获取页面,HttpContext.Current.Request也是Request //获取当前页面url string myurl = System.Web.HttpContext.Curren ...

  3. libreoffice.在Centos中使用时碰到X11 error的解决办法

    先安装 libreoffice yum install libreoffice -y 尝试DOC转PDF是碰到报错 解决办法, 要安装多一个东西 yum install libreoffice-hea ...

  4. godaddy如何联系客服帮助的技巧和方法

    众所周知,Godaddy是世界最大的域名商和空间商,很多人喜欢在那里买域名或者空间,可是,当我们的域名空间出了问题要怎么办呢?今天闪电博客就给大家介绍一些Godaddy客服联系技巧,减少大家等待的时间 ...

  5. ALSA学习资料

    一.内核文档  Linux Sound Subsystem Documentation 二.一些API 1.snd_pcm_period_elapsed 2.snd_pcm_lib_buffer_by ...

  6. android: 使用本地广播

    前面我们发送和接收的广播全部都是属于系统全局广播,即发出的广播可以被其他任何 的任何应用程序接收到,并且我们也可以接收来自于其他任何应用程序的广播.这样就很容 易会引起安全性的问题,比如说我们发送的一 ...

  7. java判断传进来的是否是图片

    public static void main(String[] args) throws IOException { String filePath = "C:\\Users\\80975 ...

  8. Linux centOS Ubuntu --- 使用systemctl添加开机启动

    我们对service和chkconfig两个命令都不陌生,systemctl 是管制服务的主要工具, 它整合了chkconfig 与 service功能于一体. systemctl is-enable ...

  9. 异常 try catch finally return 执行关系 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  10. 【Zookeeper】源码分析之网络通信（三）之NettyServerCnxn

    一.前言 前面已经学习了NIOServerCnxn,接着继续学习NettyServerCnxn. 二.NettyServerCnxn源码分析 2.1 类的继承关系 public class Netty ...