教学视频: http://www.php.cn/code/8217.html

React 教程: http://www.runoob.com/react/react-tutorial.html

本篇是菜鸡水准了解轮廓的难度等级,菜鸡啄米,叽叽喳喳


先介绍仨工具:

  • Babel: 用于编写下一代 JavaScript 的编译器
  • jspm: 是一个一个浏览器端包管理器;SystemJS加载js的模块,也有Babel编译js,JSX编译为js。jspm & SystemJS 教程

  • webpack: WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。什么是WebPack,为什么要使用它?

创建工程

Ref: https://blog.csdn.net/rical730/article/details/77206601

1. 先安装:nodejs npm

2. 新建一个项目文件夹。

mkdir React & cd React

3. 使用 create-react-app 快速构建 React 开发环境

sudo npm install -g create-react-app
create-react-app my-app

4. 安装结束

cd my-app
npm start

5. 其他(option)

sudo npm install -g browser-sync
  Browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。
  更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。

jspm install semantic-ui jspm install css

npm start 时,可见实际执行的是:npm run dev,而dev指得是另一坨东西。

babel 帮助将es6编译为es5,而后执行。

React 特点

  • 1.声明式设计 −React采用声明范式,可以轻松描述应用。

  • 2.高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。

  • 3.灵活 −React可以与已知的库或框架很好地配合。

  • 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。

  • 5.组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。

  • 6.单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。

React JSX

Figure, 可见不适用jsx写的形式(下面),可读性很差。

React 使用 JSX 来替代常规的 JavaScript。

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

我们不需要一定使用 JSX,但它有以下优点:

    • JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。
    • 它是类型安全的,在编译过程中就能发现错误。
    • 使用 JSX 编写模板更加简单快速。
  • 代码实例
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8" />
<title>菜鸟教程 React 实例</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>

<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render
(
<div>
<h1>菜鸟教程</h1>
<h2>欢迎学习 React</h2>
<p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>   // p 元素添加了自定义属性 data-myattribute,需要使用 data- 前缀。
</div>  // 第一个参数
,
document.getElementById('example')  // 第二个参数
);
</script>
</body>
</html>
  • 独立文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel" src="helloworld_react.js"></script>  // 另外存在单独文件更好
</body>
</html>
  • 不能 if ... else
// 在 JSX 中不能使用 if else 语句,但可以使用 conditional (三元运算) 表达式来替代

ReactDOM.render(
<div>
<h1>{i == 1 ? 'True!' : 'False'}</h1>
</div>
,
document.getElementById('example')
);
  • 样式

React 推荐使用内联样式。

我们可以使用 camelCase 语法来设置内联样式.

React 会在指定元素数字后自动添加 px 。

以下实例演示了为 h1 元素添加 myStyle 内联样式:

var myStyle = {
fontSize: 100,
color: '#FF0000'
};
ReactDOM.render(
<h1 style = {myStyle}>菜鸟教程</h1>,
document.getElementById('example')
);
  • 数组

JSX 允许在模板中插入数组,数组会自动展开所有成员:

var arr = [
<h1>菜鸟教程</h1>,
<h2>学的不仅是技术,更是梦想!</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);

React 组件

组件类:开头大写React.createClass。

var HelloMessage = React.createClass({    // 组件类 HelloMessage
render: function() {
return <h1>Hello World!</h1>;
}
}); ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);

传参数:向组件传递参数,可以使用 this.props 对象,实例如下:

var HelloMessage = React.createClass({
render:
function() {
return <h1>Hello {this.props.name}</h1>;   // name 属性通过 this.props.name 来获取。
}
}); ReactDOM.render(
<HelloMessage name="Runoob" />,
document.getElementById('example')
);

复合组件:创建多个组件来合成一个组件,把组件的不同功能点进行分离。

var WebSite = React.createClass({
render: function() {
return (
<div>
<Name name={this.props.name} />
<Link site={this.props.site} />
</div>
);
}
});

var Name = React.createClass({
render: function() {
return (
<h1>{this.props.name}</h1>
);
}
});

var Link = React.createClass({
render: function() {
return (
<a href={this.props.site}>
{this.props.site}
</a>
);
}
});

ReactDOM.render(
<WebSite name="菜鸟教程" site=" http://www.runoob.com" />,
document.getElementById('example')
);

React State(状态)

React 把组件看成是一个状态机(State Machines)。通过

    • 与用户的交互,实现不同状态,
    • 然后渲染 UI,让用户界面和数据保持一致。

根本思想:React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)。

例子:创建了 LikeButton 组件

1. getInitialState 方法用于定义初始状态,也就是一个对象,这个对象可以通过 this.state 属性读取。

2. 当用户点击组件,导致状态变化,this.setState 方法就修改状态值,

3. 每次修改以后,自动调用 this.render 方法,再次渲染组件。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>菜鸟教程 React 实例</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var LikeButton = React.createClass({
getInitialState: function() {           // 1 定义初始状态,也就是一个对象
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});  // 2 有点击事件,就改变状态:setState ----> render func
},
render: function() { // 3 渲染组件,
var text = this.state.liked ? '喜欢' : '不喜欢';
return (
<p onClick={this.handleClick}>
你<b>{text}</b>我。点我切换状态。
</p>
);
}
}); ReactDOM.render(
<LikeButton />,
document.getElementById('example')
);
</script>
</body>
</html>

React Props

props 是不可变的:子组件只能通过 props 来传递数据

state 可以根据与用户交互来改变:有些容器组件需要定义 state 来更新和修改数据。

var HelloMessage = React.createClass({
getDefaultProps: function() {
return {
name: 'Runoob'
};
},
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
}); ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);

分离的例子:(其实就是复合组件)

---------------------------------------------------------------
# 定义一个大组件 var WebSite = React.createClass({
getInitialState: function() {
return {
name: "菜鸟教程",
site: "http://www.runoob.com"
};
},
render: function() {    // 1.0 在render函数中, 我们设置 name 和 site 来获取父组件传递过来的数据
return (
<div>
<Name name={this.state.name} />      // 在父组件中设置 state
<Link site={this.state.site} />
</div>
);
}
}); ---------------------------------------------------------------
# 定义大组件中的两个小组件
var Name = React.createClass({
render: function() {
return (
<h1>{this.props.name}</h1>          // 2.1 在子组件上使用 props 将其传递到子组件上
);
}
});

var Link = React.createClass({
render: function() {
return (
<a href={this.props.site}>
{this.props.site}              // 2.2 在子组件上使用 props 将其传递到子组件上
</a>
);
}
});

---------------------------------------------------------------
ReactDOM.render(
<WebSite />,
document.getElementById('example')
);

Props 验证

实例创建一个 Mytitle 组件,属性 title 是必须的且是字符串,非字符串类型会自动转换为字符串 :

var title = "菜鸟教程";
// var title = 123;  <---- 非字符串类型会自动转换为字符串 
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
}, render: function() {
return <h1> {this.props.title} </h1>;
}
});
ReactDOM.render(
<MyTitle title={title} />,
document.getElementById('example')
);

更多验证器说明如下:

React.createClass({
propTypes: {
// 可以声明 prop 为指定的 JS 基本数据类型,默认情况,这些数据是可选的
optionalArray: React.PropTypes.array,
optionalBool: React.PropTypes.bool,
optionalFunc: React.PropTypes.func,
optionalNumber: React.PropTypes.number,
optionalObject: React.PropTypes.object,
optionalString: React.PropTypes.string, // 可以被渲染的对象 numbers, strings, elements 或 array
optionalNode: React.PropTypes.node, // React 元素
optionalElement: React.PropTypes.element, // 用 JS 的 instanceof 操作符声明 prop 为类的实例。
optionalMessage: React.PropTypes.instanceOf(Message), // 用 enum 来限制 prop 只接受指定的值。
optionalEnum: React.PropTypes.oneOf(['News', 'Photos']), // 可以是多个对象类型中的一个
optionalUnion: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
React.PropTypes.instanceOf(Message)
]), // 指定类型组成的数组
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number), // 指定类型的属性构成的对象
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number), // 特定 shape 参数的对象
optionalObjectWithShape: React.PropTypes.shape({
color: React.PropTypes.string,
fontSize: React.PropTypes.number
}), // 任意类型加上 `isRequired` 来使 prop 不可空。
requiredFunc: React.PropTypes.func.isRequired, // 不可空的任意类型
requiredAny: React.PropTypes.any.isRequired, // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接使用 `console.warn` 或抛异常,因为这样 `oneOfType` 会失效。
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error('Validation failed!');
}
}
},
/* ... */
});

获取自定义组件的属性 - this.props.children

在render中,Child有了属性children,自然地,获取时就使用this.props.children。

this.props 对象的属性与组件的属性一一对应,但是有一个例外,就是 this.props.children 属性。

它表示组件的所有子节点:【所有子节点可能有三种不同的情况】

  • 如果当前组件没有子节点,它就是 undefined ;
  • 如果有一个子节点,数据类型是 object ;
  • 如果有多个子节点,数据类型就是 array 。【这个是正常情况】
var HelloWorld = React.createClass({
render:function(){
return (
<ul>
{
React.Children.map(this.props.children, function (value, key) {  // 1. 获取子节点
return <li>{value}----{key}</li>; // 2. 以怎样的html形式展现
})
}
</ul>
);
}
});
ReactDOM.render(
<HelloWorld>
<span>思考思考</span>
<span>瞬间即逝</span>
<span>阿达瓦得</span>
</HelloWorld>,
document.getElementById('root'));
Result: 
思考思考—-0
瞬间即逝—-1
阿达瓦得—-2

[React] 01 - Intro: javaScript library for building user interfaces的更多相关文章

  1. jQuery JavaScript Library v3.2.1

    /*! * jQuery JavaScript Library v3.2.1 * https://jquery.com/ * * Includes Sizzle.js * https://sizzle ...

  2. A javascript library providing cross-browser, cross-site messaging/method invocation. http://easyxdm.net

    easyXDM - easy Cross-Domain Messaging easyXDM is a Javascript library that enables you as a develope ...

  3. React Native – 使用 JavaScript 开发原生应用

    前不久,Facebook 在F8开发者大会上正式开源了 React Native 项目.不过目前只有 iOS 版,Android 版还需要再等一段时间,这是最新的用 JavaScript 语言开发原生 ...

  4. Dynamices CRM JS 类库 神器 XrmServiceToolkit - A Microsoft Dynamics CRM 2011 & CRM 2013 JavaScript Library

    XrmServiceToolkit - A Microsoft Dynamics CRM 2011 & CRM 2013 JavaScript Library http://xrmservic ...

  5. Raphaël—JavaScript Library

    Raphaël-JavaScript Library What is it? Raphaël is a small JavaScript library that should simplify yo ...

  6. a Javascript library for training Deep Learning models

    w强化算法和数学,来迎接机器学习.神经网络. http://cs.stanford.edu/people/karpathy/convnetjs/ ConvNetJS is a Javascript l ...

  7. JavaScript 工具库:Cloudgamer JavaScript Library v0.1 发布

    JavaScript 工具库:Cloudgamer JavaScript Library v0.1 发布   研究了一年多的js,也差不多写一个自己的js库了.我写这个不算框架,只是一个小型的js工具 ...

  8. A JavaScript library for reading EXIF meta data from image files.

    exif-js/exif-js: JavaScript library for reading EXIF image metadata https://github.com/exif-js/exif- ...

  9. 转:Build Your First JavaScript Library

    http://net.tutsplus.com/tutorials/javascript-ajax/build-your-first-javascript-library/ Step 1: Creat ...

随机推荐

  1. db2 表空间容量

    Db2 connect to xxx Db2 “LIST TABLESPACES SHOW DETAIL” Tablespace ID = 7 Name = TSASNAA Type = Databa ...

  2. netbeans连接数据库SQLserver2008

    数据库设置 第一步:配置SQL,打开SQL server 2008文件下的配置工具里的SQL server配置管理器 设置MSSQLSERVER协议中,开启TCP/IP,端口设置为1433 在SQL ...

  3. AngularJS中监视Scope变量以及外部调用Scope方法

    在AngularJS中,有时候需要监视Scope中的某个变量,因为变量的改变会影响一些界面元素的显示.有时,也希望通过jQuery调用Scope的某个方法. 比如以下场景: <div> & ...

  4. 谈一下Docker与Kubernetes集群的日志和日志管理

    本文的测试环境为CentOS 7.3,Kubernetes集群为1.11.2,安装步骤参见kubeadm安装kubernetes V1.11.1 集群 日志对于我们管理Kubernetes集群及其上的 ...

  5. Java代码质量改进之:使用ThreadLocal维护线程内部变量

    在上文中,<Java代码质量改进之:同步对象的选择>,我们提出了一个场景:火车站有3个售票窗口,同时在售一趟列车的100个座位.我们通过锁定一个靠谱的同步对象,完成了上面的功能. 现在,让 ...

  6. 奇怪吸引子---LiuChen

    奇怪吸引子是混沌学的重要组成理论,用于演化过程的终极状态,具有如下特征:终极性.稳定性.吸引性.吸引子是一个数学概念,描写运动的收敛类型.它是指这样的一个集合,当时间趋于无穷大时,在任何一个有界集上出 ...

  7. DNS缓存中毒是怎么回事?

    近来,网络上出现互联网漏洞——DNS缓存漏洞,此漏洞直指我们应用中互联网脆弱的安全系统,而安全性差的根源在于设计缺陷.利用该漏洞轻则可以让用户无法打开网页,重则是网络钓鱼和金融诈骗,给受害者造成巨大损 ...

  8. Linux下在root权限下临时使用其它用户运行命令

    一.简述 当我们在使用Linux时,经常需要在root权限下执行某些命令,或者在/etc/rc.d/rc.local中写一些角本.而如果某些角本必须使用非root用户时,直接su是不行的,比如Elas ...

  9. A SimpleDataStore

    import java.util.HashMap; import java.util.Map; import java.util.concurrent.ConcurrentHashMap; impor ...

  10. 阿里云的免费型DV SSL证书

    阿里云提供的免费型DV SSL. 证书的说明: [公告]免费新根证书,切入DigiCert PKI体系,兼容性如下操作系统版本IOS 5.0+.Android 2.3.3+.JRE 1.6.5+.WI ...