配置篇
通过Webpack
和Babel-core
在开发过程中转换JSX/ES 2015
确定安装了node.js
和npm
,然后安装全局packages,这里用的是淘宝的cnpm
cnpm install webpack browser-sync -g
创建目录和文件
在本地项目中创建需要目录,并且在其下面创建子目录和文件。
├── build
├── index.html
├── package.json
├── src
│ ├── app.js
│ ├── app.css
└── webpack.config.js
打开 package.json 文件,并且创建一个空的JSON对象:
{
}
通过cnpm
安装依赖关系
cnpm install babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 browser-sync css-loader extract-text-webpack-plugin style-loader webpack --save-dev
cnpm install react react-dom
配置Webpack
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: ['./src/app.js'],
output: {
path: path.resolve(__dirname, 'build'),
filename: 'appBundle.js'
},
module: {
loaders: [{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
}, {
loader: 'babel-loader',
exclude: /node_modules/,
test: /\.js$/,
query: {
presets: ['es2015', 'react', 'stage-0'],
},
}]
},
plugins: [
new ExtractTextPlugin("style.css", {
allChunks: true
})
]
};
配置package.json
在依赖项上插入如下代码
"scripts": {
"webpack": "webpack --watch",
"server": "browser-sync --port 4000 start --server --files \"**/*.html\" \"build/**/*.css\" \"build/**/*.js\" "
},
运行Webpack
和server
在你项目根目录下运行下面的 cnpm 命令:
cnpm run webpack
同时打开另一个命令窗口运行下面的 cnpm 命令:
cnpm run server
运行这两行命令开发的代码就能跑起来了。
如果你遵循所有的步骤操作,并且没有出错的话,那么Browsersync
应该会打开浏览器在 http://localhost:4000 这个地址上加载 index.html 和 app.js 。Webpack
和Browsersync
会运行所做的修改。
至此,就可以看到跑起来的页面,可以开始愉快的写代码啦
开发篇
配置index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./build/appBundle.js"></script>
</body>
</html>
配置app.js
import React from 'react';
import ReactDOM from 'react-dom';
var Hello = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
},
render: function() {
return <div style={{color: 'red'}}>Hello {this.props.title} {this.props.name}</div>;
}
});
ReactDOM.render(
<Hello name="World" title="Mr"/>,
document.getElementById('app')
);
基本概念
ReactDOM.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。
HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写,JSX和typescript一样,都是语法糖。遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;遇到代码块(以 { 开头),就用 JavaScript 规则解析。JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组,则会展开这个数组的所有成员
-
变量 Hello 是一个组件类。模板插入 <Hello /> 时,会自动生成 Hello 的一个实例。所有组件类都必须有自己的 render 方法,用于输出组件。
注意,组件类的第一个字母必须大写,否则会报错,比如Hello不能写成hello。另外,组件类只能包含一个顶层标签,否则也会报错。var Hello = React.createClass({ render: function() { return <h1> Hello {this.props.name} </h1><p> some text </p>; } });
上面代码会报错,因为Hello组件包含了两个顶层标签:h1和p。
组件的用法与原生的 HTML 标签完全一致,可以任意加入属性,比如 <Hello name="John"> ,就是 Hello 组件加入一个 name 属性,值为 John。组件的属性可以在组件类的 this.props 对象上获取,比如 name 属性就可以通过 this.props.name 读取。 添加组件属性,有一个地方需要注意,就是 class 属性需要写成 className ,for 属性需要写成 htmlFor ,这是因为 class 和 for 是 JavaScript 的保留字。
组件的属性可以接受任意值,字符串、对象、函数等等都可以。有时,我们需要一种机制,验证别人使用组件时,提供的参数是否符合要求。组件类的PropTypes属性,就是用来验证组件实例的属性是否符合要求.上图代码PropTypes 告诉 React,这个 title 属性是必须的,而且它的值必须是字符串。如果通不过验证,会报错
-
getDefaultProps 方法可以用来设置组件属性的默认值。组件类实例里声明的属性优先级比这个高
getDefaultProps : function () { return { title : 'Hello World' }; }
组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。根据 React 的设计,所有的 DOM 变动,都先在虚拟 DOM 上发生,然后再将实际发生变动的部分,反映在真实 DOM上,这种算法叫做 DOM diff ,它可以极大提高网页的性能表现。
Hello是一个自定义的React compenents,通过React.createClass创建,通过ReactDom.render方法呈现到页面,第一个参数是要渲染的React compenents,第二个参数是渲染完之后要插入位置
页面渲染的html结构如下
配置样式的两种方式
通过className
和普通的添加class写法一样,只不过class是保留字,所以采用className来代替内联样式
如上图写法,css属性要采用驼峰法,如fontSize
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。