Introduction

本文组成:

React由Facebook的程序员创建,是一个非常强大的javascript类库。

一个很大的卖点是virtual DOM机制,在DOM操作的性能上有较大的优势。

React社区常常介绍它为MVC架构中的“V”,虽说如此,如果将React与Flux(以后将会介绍)结合,我们就可以轻松实现M与V的同步。

在本文中,将会用到博主前两天介绍的webpack。以下是博文链接:

webpack 学习笔记 01 使用webpack的原因

webpack 学习笔记 02 快速入门

Components

通过React,我们可以专注于可复用的组件开发,比如:一个下拉导航栏组件,一个功能齐全的数据表格。React中,像CommonJs标准中一样,React的组件与组件也能良好隔离,可以随意的在组件内部增加功能。

所有的React组件都需要实现一个函数: render,我们可以通过它,返回HTML或者调用其它的组件。正是这个基本的功能,给React带来了无限可能。

JSX

如果你曾经看过React相关的信息,那可能会对一个名词印象比较深刻:JSX。JSX使js无需""的包装,编写各类html tag。使得我们可以更快速的开发React组件(考虑到多行问题,在js中写HTML原本还是很麻烦的)。

我们可以借助一个js库,在浏览器中将JSX转换为js,但这不是推荐的做法,本文介绍了如何通过webpack在本地实现JSX到js的转换,使得浏览器不用解决这一问题。

Using JSX

render扮演着"ViewModel"的角色,在我们返回HTML信息前,将Model注入View,并加入各类js逻辑。

现在,我们新建一个目录,建立以下文件

index.html

entry.js

webpack.config.js

借助npm与bower我们可以快速下载依赖项

npm init
npm install babel-loader --save
bower install react
bower init

以下是index.html的内容,借助webpack,我们可以不用再修改它,就完成本示例了。

<html>
<head>
<meta charset="utf-8">
<title>react demo</title>
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>

以下是webpack配置内容

module.exports = {
entry: "./entry.js",
output:{
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel'
}
]}
}

配置做好了,让我们开始第一个JSX。

var React = require("./bower_components/react/react.js");

var Widget = React.createClass({
render:function(){
return(
<div>
<h1>React with webpack</h1>
</div>);
}
}); React.render(<Widget />, document.body);

运行指令

webpack -w

可以看到如下结果:

Using variables for attributes

如前文所说,React组件里可以加入任意的js逻辑,我们可以把刚才的JSX改成这样:

var Widget = React.createClass({
render:function(){
var text = "React with webpack";
return(
<div>
<h1>{text}</h1>
</div>);
}
});

Basics of a component

组件可以维护自己作用域下的各类状态值。使我们得以复用各类组件。

当我们通过向组件的attributes传值时,他们会作为properties而引用。这句话可能不好理解,我们看下代码:

var Widget = React.createClass({
render:function(){
var text = "";
return(
<div>
<h1>{this.props.displayText}</h1>
</div>);
}
}); React.render(<Widget displayText="React with webpack"/>, document.body);

State

properties适合用在一次渲染,不需要改变的组件场景。在状态需要动态改变的场合,我们会用到state。通过this.setState 函数以改变状态值,之后,组件会重新渲染(借助virtual DOM机制,这一部分还是蛮快的)。 以下是Demo

var Widget = React.createClass({
getInitialState: function(){
return{
number: 0
};
},
increment: function(){
this.setState({
number: this.state.number + 1
});
},
render: function(){
return(
<div>
<h1>{this.state.number}</h1>
<button onClick={this.increment}>Inc</button>
</div>);
}
});

显示的数字将伴随按钮点击上升。

The component lifecycle

所有的组件都是有生命周期的,这无疑为我们开发提供了很大的便利。比如刚才例子中的getInitialState,只会在控件装载(mount)后,调用一次。当然还有其它的生命周期函数:

componentWillMount在组件即将装载前调用,可以把Ajax放这。

componentDidMount在组件已经被渲染出了DOM后调用,这时,我们可以借助this.getDOMNode取到跟节点,做一些后续工作。

componentWillUnmount组件被移除时,相关资源的清理工作,就得在这里(如移除EventHandler,若EventHandler操作了不存在的组件,error自然就被抛出)。

Component Methods

通过getDefaultProps,我们可以为properties提供默认值,即当properties没有通过attributes传入,这些默认值会派上用场。

var Widget = React.createClass({
getDefaultProps: function(){
return{
number: 10
};
},
render: function(){
return(
<div>
<h1>{this.props.number}</h1>
</div>);
}
}); React.render(<Widget/>, document.body);

React并不提倡提供过多的模版功能,它提倡的是回归原始,比如:当我们需要用到repeater。我们可以这样:

var Widget = React.createClass({
render: function(){
var data =[1,2,3,4]; //请假设这是有用数据
var content = data.map(function(item){
return (<h2>{item}</h2>)
});
return(
<div>
<h1>{content}</h1>
</div>);
}
});

React 实践记录 01 组件开发入门的更多相关文章

  1. React组件开发入门

    React 组件开发入门 Introduction 本文组成: Ryan Clark文章Getting started with React的翻译. 博主的实践心得. React由Facebook的程 ...

  2. React 实践记录 04 Flux demo

    Introduction flux应用架构如下图所示,本文并不是讲述怎么立即做一个酷炫的应用,而是讲述如何依照这种框架,来进行代码的组织. 我们先把这个流程转述为文字:抛开与webAPI的交互不谈,以 ...

  3. React 实践记录 02 Flux introduction

    Introduction 本文组成: React 官方文档翻译 相关实践心得. 内容上是Flux的介绍,例子将会在以后写出. 一旦稍微多了解一点React,很难避免听到Flux这个名词. Flux是一 ...

  4. React 实践记录 03 React router

    Introduction 本文主要参考了react router 的官方文档. React Router是一套完整的配合React的路由解决方案,可能你已经知道前端路由,或者知道后端有路由的概念,如下 ...

  5. JavaWeb学习总结-01 JavaWeb开发入门

    一 基本概念 1 Web开发的相关知识 Web,表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资源分为: 静态web资源(如html 页面): ...

  6. web组件开发入门

    本文是学习慕课网阿当大话西游之WEB组件后的一个总结. 组件的分类 1 框架组件:依赖于某种框架的组件 2 定制组件:根据公司业务定制的组件 3 独立组件:不依赖框架的组件 定义和加载组件 解决css ...

  7. (二)Hololens Unity 开发入门 之 Hello HoloLens~

    学习源于官方文档 微软官文~ 笔记一部分是直接翻译官方文档,部分各人理解不一致的和一些比较浅显的保留英文原文 (二)Hololens Unity 开发入门 之 Hello HoloLens~ 本文主要 ...

  8. 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发

    每天记录一点:NetCore获得配置文件 appsettings.json   用NetCore做项目如果用EF  ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...

  9. Android开发入门要点记录:四大组件

    cocos2dx跨平台开发中需要了解android开发,昨天快速的浏览了一本Android开发入门教程,因为之前也似懂非懂的写过Activity,Intent,XML文件,还有里面许多控件甚至编程思想 ...

随机推荐

  1. codeforces 701A A. Cards(水题)

    题目链接: A. Cards 题意: 问两个数的和相同,怎么组合; AC代码: #include <iostream> #include <cstdio> #include & ...

  2. codeforces 652C C. Foe Pairs(尺取法+线段树查询一个区间覆盖线段)

    题目链接: C. Foe Pairs time limit per test 1 second memory limit per test 256 megabytes input standard i ...

  3. CSS实现文字内容不被截断当超出指定长度时该字符串自动整体换到下一行

    效果图: 1.内容不被截断 span {       overflow:hidden;       white-space:nowrap;       text-overflow:ellipsis;  ...

  4. 「SDFZ听课笔记」二分图&&网络流

    二分图? 不存在奇环(长度为奇数的环)的图 节点能黑白染色,使得不存在同色图相连的图 这两个定义是等价哒. 直观而言,就是这样的图: 二分图有一些神奇的性质,让一些在一般图上复杂度飞天的问题可以在正常 ...

  5. Linux wpa_cli 调试方法

    记录一下如何使用wpa_cli来进行wifi调试. 1.启动WLAN (1)加载驱动  打开wifi的时候会加载驱动,关闭则会卸载wifi驱动.手动调试的时候,先调用insmod/rmmod命令加载/ ...

  6. ftp主要流程

    判断是否是root用户,若不是则提示并退出. 建立server socket. 等待用户连接,并建立相应用户的子进程.

  7. vue watch 深度监听以及立即监听

    vue watch对象可以监听数据,数据发生变化,处理函数 watch虽可以监听,但只是浅监听,只监听数据第一层或者第二层.比如对于整个对象的监听,需要用到深度监听 vm.$watch('obj',f ...

  8. 【eclipse插件开发实战】 Eclipse插件开发6——eclipse在线翻译插件Translator开发实例详解

    Eclipse插件开发6--eclipse在线翻译插件Translator开发实例详解 在上一篇文章中讲到了一个简单的eclipse插件开发实例,主要是对插件工程的基本创建步骤进行了讲解,这篇文章当中 ...

  9. UVa 658 It's not a Bug, it's a Feature! (状态压缩+Dijstra)

    题意:首先给出n和m,表示有n个bug和m个补丁.一开始存在n个bug,用1表示一个bug存在0表示不存在,所以一开始就是n个1,我们的目的是要消除所有的bug, 所以目标状态就是n个0.对于每个补丁 ...

  10. JAVA基础--JAVA API集合框架(其他集合类,集合原理)15

    一.ArrayList介绍 1.ArrayList介绍 ArrayList它是List接口的真正的实现类.也是我们开发中真正需要使用集合容器对象. ArrayList类,它是List接口的实现.肯定拥 ...