[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 ...
随机推荐
- Django缓存1
1. 开发调试 # 此为开始调试用,实际内部不做任何操作 # 配置: CACHES = { 'default': { 'BACKEND': 'django.core.cache.backends.du ...
- shutdown vs close
shutdown 和 close关闭tcp连接的介绍网上有很多,主要区别如下: 1.调用close后,将中止通信.删除套接字.丢弃数据.但是,注意喽,但是,如果有多个进程共享一个套接字,close每被 ...
- FCKEditor在IE10下的不兼容问题解决方法
环境介绍:FCKEditor 版本 2.x.x 问题:IE10 下FCKEditor不兼容,显示不出来 关键词:不同于其他方法之处是第一个关键点,其他网友的正则表达式不对 解放方法:(可以直接< ...
- nohup和disown
Many system administrators make a practice of using GNU Screen or tmux to manage jobs running in the ...
- HTML5 Canvas制作雷达图实战
雷达图又叫蜘蛛网图,是一种对各项数据查看很明显的表现图,在很多游戏中,对游戏中的每个角色的分析图一般也用这种图. 下面,用HTML5的Cavas来实现雷达图. 效果 一.创建Canvas var mW ...
- 如何将Revit明细表导出为Excel文档
Revit软件没有将明细表直接导出为Excel电子表格的功能,Revit只能将明细表导出为TXT格式,但是这种TXT文件用EXCEL处理软件打开然后另存为XLS格式即可,以Revit2013版自带的建 ...
- SublimeText SFTP连接Amazon EC2
文章最初发表于szhshp的第三边境研究所 转载请注明 1. SublimeText SFTP连接Amazon EC2 Sublime Text 3 正式版发布了,全平台IDE果断都换了. 今天终于有 ...
- getting-started-with-mqtt
来自:https://dzone.com/refcardz/getting-started-with-mqtt SECTION 1 Why MQTT? The Internet of Things ( ...
- 【PMP】合同类型
合同类型与适用场景 图形解读: 总价类 (1)固定总价类合同:货物的采购价格在一开始就已确定,并且不允许改变(除非工作范围发生变更) (2)总价加激励费合同:同会设置价格上限,高于此价格的上限的全部成 ...
- 【Java】MyBatis与Spring框架整合（一）
本文将利用 Spring 对 MyBatis 进行整合,在对组件实现解耦的同时,还能使 MyBatis 框架的使用变得更加方便和简单. 整合思路 作为 Bean 容器,Spring 框架提供了 IoC ...