[React] 08 - Tutorial: evolution of code-behind
有了七篇基础学习，了解相关的知识体系，之后便是系统地再来一次。
[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的更多相关文章
- [React] 10 - Tutorial: router
Ref: REACT JS TUTORIAL #6 - React Router & Intro to Single Page Apps with React JS Ref: REACT JS ...
- React-Native（二）：React Native开发工具vs code配置
从网上翻阅了一些开发react-native的开发工具时,发现其实可选的工具还是比较多的Sublime Text,WebStrom,Atom+Nuclide,vs code 等.因为我用.net生态环 ...
- [React] 09 - Tutorial: components
jsx变为js的过程:http://babeljs.io/repl/ youtube: https://www.youtube.com/channel/UCA-Jkgr40A9kl5vsIqg-BIg ...
- React.js Tutorial: React Component Lifecycle
Introduction about React component lifecycle. 1 Lifecycle A React component in browser can be any of ...
- [Full-stack] 快速上手开发 - React
故事背景 [1] 博客笔记结合<React快速上手开发>再次系统地.全面地走一遍. [2] React JS Tutorials:包含了JS --> React --> Red ...
- [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 ...
- 本人SW知识体系导航 - Programming menu
将感悟心得记于此,重启程序员模式. js, py, c++, java, php 融汇之全栈系列 [Full-stack] 快速上手开发 - React [Full-stack] 状态管理技巧 - R ...
- React调试——visual studio code
原文链接:Using React in Visual Studio Code 原文链接:Live edit and debug your React apps directly from VS Cod ...
- [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 ...
随机推荐
- LVS 之ARP
原理 工作过程 主机A的IP地址为:192.168.1.1 MAC地址为:0A-11-22-33-44-01: 主机B的IP地址为:192.168.1.2 MAC地址为:0A-11-22-33-4 ...
- css中display:none与visibility: hidden的区别
display: none; 隐藏元素,不占用其本来空间------对应元素显示用的是display:block; visibility: hidden:元素隐藏,占用其本来的页面空间-------- ...
- android常用工具收集
1.脱壳工具 https://github.com/DrizzleRisk/drizzleDumper
- Shell Step by Step (4) —— Cron & Echo
6.脚本定时任务 # Example of job definition: # .------------------------- minute (0 - 59) # | .------------ ...
- 【T06】记住TCP是一种流协议
1.TCP是一种流协议(stream protocol),这意味着数据是以字节流的形式发给接收者的,没有固定的报文和报文边界的概念. 接收端读取tcp数据,无法预知在这一次读操作中会返回多少个字节. ...
- Web缓存知识体系
转载自[运维社区]https://www.unixhot.com/page/cache
- C# System.IO.FileAccess
字段 Read 1 对文件的读访问. 可从文件中读取数据. 与 Write 组合以进行读写访问. ReadWrite 3 对文件的读写访问权限. 可从文件读取数据和将数据写入文件. Write 2 文 ...
- V8 下的垃圾回收机制
V8 实现了准确式 GC,GC 算法采用了分代式垃圾回收机制.因此,V8 将内存(堆)分为新生代和老生代两部分. 1.新生代算法 新生代中的对象一般存活时间较短,使用 Scavenge GC 算法. ...
- 《Unix&Linux大学教程》学习笔记七：进程与作业控制
1:进程:一个内存中的程序+程序所需数据+管理程序的各种状态信息. 2:进程由内核进行管理,内核使用调度器,给予进程一个时间片来运行,然后切换到下一个进程. 3:进程分叉 fork :创建一个子进程 ...
- sql语句语法
13.1. 数据定义语句 . ALTER DATABASE语法 . ALTER TABLE语法 . CREATE DATABASE语法 . CREATE INDEX语法 . CREATE TABLE语 ...