[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 ...
随机推荐
- linux最大进程数、最大打开文件数
ulimit 是一种 linux 系统的内键功能,它具有一套参数集,用于为由它生成的 shell 进程及其子进程的资源使用设置限制.本文将在后面的章节中详细说明 ulimit 的功能,使用以及它的影响 ...
- C#6.0特性与vs2015
C#6.0 中的那些新特性 1. 自动属性的初始化 public string Name { get; set; } = "zhangsan"; 2. 只读属性初始化 public ...
- Android Fragment 详解（未完...）
版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Fragment 文中如有纰漏,欢迎大家留言指出. 之前写过一篇关于 Fragment 生命周期的文章 ...
- Chrome RenderText分析(1)
先从一些基础的类开始 1.Range // A Range contains two integer values that represent a numeric range, like the ...
- python测试开发django-49.allow_tags和mark_safe
前言 前面一篇使用allow_tags方法可以在xadmin的后台页面中插入html代码,在2.x版本ModelAdmin里面删除了allow_tags属性的支持,使用mark_safe函数代替 al ...
- 使用JCOOKIES创建http cookie
jCookies,一个功能强大的操作http cookie的jquery插件,他能够让你存储任何数据类型如:字符串,数组,对象等.它通过JavaScript存储Cookies,然后通过服务器端代码如: ...
- WebService服务发布与使用(JDK自带WebService)
简单粗暴,直接上步骤 一.先建立一个web项目,名字叫MyService 名字为MyService 新建Java类 package com.webService; import javax.jws.W ...
- HTML：Browser 对象
ylbtech-HTML:Browser 对象 1.返回顶部 1. Window 对象 Window 对象表示浏览器中打开的窗口. 如果文档包含框架(frame 或 iframe 标签),浏览器会为 ...
- 使用sshfs挂载远程服务器目录
点击访问原文 您还可以加入全栈技术交流群(QQ群号:254842154) 服务器日志查看,是开发人员和服务器运维人员在工作中经常会遇到的一件事情,只有一台服务器时,比较好办,直接登录服务器使用tail ...
- vmware vSphere 5.5的14个新功能
摘录自:http://www.networkworld.com/slideshow/117304/12-terrific-new-updates-in-vmware-vsphere-55.html#s ...