[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 ...
随机推荐
- db2 事务日志
曾经因为对DB2 的 NOT LOGGED INITIALLY 属性认识不足而吃了亏.当时需要往表中插入大量的数据,最初也没有考虑太多就使用了传统的insert 命令,由于数据量实在过于巨大,而且系统 ...
- ubuntu.windows桌面远程ubuntu的方法(附带安装图形桌面--可选)
(1)首先通过Windows系统下连接Linux系统的命令行工具连接Ubuntu服务器,(工具:xshell,securecrt,putty等). (2)通过Windows下工具连接到Linux操作系 ...
- C# 8.0中的模式匹配
C# 8.0中的模式匹配相对C# 7.0来说有了进一步的增强,对于如下类: class Point{ public int X { get; } public int Y { get; } ...
- Knockout.Js官网学习（加载或保存JSON数据）
前言 Knockout可以实现很复杂的客户端交互,但是几乎所有的web应用程序都要和服务器端交换数据(至少为了本地存储需要序列化数据),交换数据最方便的就是使用JSON格式 – 大多数的Ajax应用程 ...
- Java Web开发总结（三） —— request接收表单提交中文参数乱码问题
1.以POST方式提交表单中文参数的乱码问题 <%@ page language="java" import="java.util.*" pageEnco ...
- 微信小程序 多个视频播放器
大致思路就是,wx:for="{{ list }}"下两个view,一个视频video,另一个封面image(客户需求,要可以自定义封面).主要控制变量是playIndex,当点击 ...
- JSTL标签 使用总结，foreach
最近开发一个网站,经常使用JSTL,这种语法与以前的不同,开始用着非常吃力,今天总结一下,供大家参考. 一.前言 JSTL全名为JavaServer Pages Standard Tag Librar ...
- Googlenet 中1*1 卷积核分析
一种简单的解释是用来降维. For example, an image of 200*200 with 50 features on convolution with 20 filters of 1* ...
- pycharm如何解决新建的文件没有后缀的问题
如下设置: 1.settings 2.file and code templates3.点击图中绿色的“+”号,即可打开新建模板页面4.定义模板名字.后缀名保存即可
- 天猫魔盒1代TMB100E刷机, 以及右声道无声的问题
这个是在小米盒子1代之后买的, 当时速度比小米盒子快, 除了遥控器比较软, 电池盖不太对得齐以外, 用起来还不错. 但是时间长了之后总是不停自己升级, 自己安装一些应用, 还删不了, 要知道这个盒子的 ...