第一部分主要使用React提供的组件，创建博客页面的展示，包括文章列表页面和文章详情页面。此次系列文章主要面向React和前段初学者，我会把每一步写的都很详细，绝对傻瓜式。 让我们开始吧。。。
React
先粗略的介绍一下React，React是一个用于构建用户界面的 JavaScript 库，它有以下几个特点：
- 声明式
React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图，在数据改变时 React 也可以高效地更新渲染界面。以声明式编写UI，可以让你的代码更加可靠，且方便调试。 - 组件化
创建好拥有各自状态的组件，再由组件构成更加复杂的界面。无需再用模版代码，通过使用JavaScript编写的组件你可以更好地传递数据，将应用状态和DOM拆分开来。 - 一次学习，随处编写
无论你现在正在使用什么技术栈，你都可以随时引入 React 开发新特性。React 也可以用作开发原生应用的框架 React Native.
有关React的基础语法学习，大家可以查看官方教程
创建一个新的项目
使用Create React App初始化是非常方便的，在安装时请先确保你已经安装了node.js(6.0+)
#下载create-ract-app相关组件
npm install -g create-react-app
#创建react-blog
create-react-app react-blog
至此，我们项目结构是这样的，执行下面语句，删除不必要的文件
cd react-blog
rm -f src/*
博客首页
我们创建一个名叫Home的Component，用来展示博客的首页
这里我创建的两个文件夹components和containers用于存放所有的公共组件和页面。
import React, { Component } from 'react';
import style from './style.css';
class Home extends Component {
render() {
return (
<h1>Sam's Blog</h1>
)
}
};
export default Home;
下面修改index.js文件，引入我们刚刚创建的Home
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Home from './containers/Home/Home';
ReactDOM.render(<Home />, document.getElementById('root'));
控制台输入npm start先看一下效果吧
在开始之前，需要先设计一下页面结构，这样可以事半功倍。博客首页主要有三部分：
- 头部信息
- 导航
- 文章列表
依次初始化这三部分：
Header
Header用于展示博主信息，以及之后的登录入口，包含头像，名称，以及一段话
import React, { Component } from 'react';
import './style.css';
const logo = require('./logo.svg');
export default class Header extends Component {
render() {
return (
<div className="header">
<span className="log">
<img src={logo} />
</span>
<h1>Sam's Blog</h1>
<p>If you can't measure it , you can't improve it</p>
</div>
)
}
}
然后在Home中引入Header这个Component
import React, { Component } from 'react';
import './style.css';
import Header from '../../components/Header/Header'
class Home extends Component {
render() {
return (
<div className="container">
<Header />
</div>
)
}
};
export default Home;
现在我们的页面就变成这样了(css部分请查看源代码)
Menu
Menu部分用于展示文章的所有分类，这里我们将会使用到Ant Design中的部分组件
npm install --save antd
安装完成后，我们直接引用其中的Menu模块
import { Menu } from 'antd'
我们先预先定义几个分类:
const categories = ['首页','iOS','Python','ReactJs']
根据antd中的Menu封装博客的导航
import React, { Component } from 'react';
import './style.css';
import { Menu, } from 'antd';
const categories = ['首页','iOS','Python','ReactJs'];
export default class Menus extends Component {
constructor(props) {
super(props)
this.state = {
current: categories[0]
}
}
handleClick = (e) => {
this.setState ({
current: e.key
})
}
render() {
return (
<Menu
onClick={this.handleClick}
selectedKeys={[this.state.current]}
mode="horizontal"
className="menucontainer"
>
{
categories.map((item,index)=>(
<Menu.Item key={item} >
{item}
</Menu.Item>
))
}
</Menu>
)
}
}
constructor方法中可以初始化state，我们设置当前选中的为categories中第一个元素。
Menu模块还有其他的样式供我们选择，搭配Layout可以做出很多样式的基础结构，详情请查阅antd相关资料，需要注意的是，记得引用antd的css文件：
import 'antd/dist/antd.css'
在Home中引入Menus模块：
import React, { Component } from 'react';
import './style.css';
import Header from '../../components/Header/Header';
import Menus from '../../components/Menus/Menus';
class Home extends Component {
render() {
return (
<div className="container">
<Header />
<div className="nav">
<Menus />
</div>
<div className="main">
这里是文章列表
</div>
</div>
)
}
};
export default Home;
现在首页变成如下样式了：
Route
React Router4是一个流行的纯React重写的包。现在的版本中已不需要路由配置，现在一切皆组件。
1.安装
React Router被拆分成三个包：react-router,react-router-dom和react-router-native。react-router提供核心的路由组件与函数。其余两个则提供运行环境（即浏览器与react-native）所需的特定组件。
进行网站（将会运行在浏览器环境中）构建，我们应当安装react-router-dom。react-router-dom暴露出react-router中暴露的对象与方法，因此你只需要安装并引用react-router-dom即可。
npm install --save react-router-dom
2.路由器(Router)
在你开始项目前，你需要决定你使用的路由器的类型。对于网页项目，存在<BrowserRouter>与<HashRouter>两种组件。当存在服务区来管理动态请求时，需要使用<BrowserRouter>组件，而<HashRouter>被用于静态网站。
通常，我们更倾向选择<BrowserRouter>，但如果你的网站仅用来呈现静态文件，那么<HashRouter>将会是一个好选择。
对于我们的项目，将设将会有服务器的动态支持，因此我们选择<BrowserRouter>作为路由器组件。
3.历史(History)
每个路由器都会创建一个history对象并用其保持追踪当前location[注1]并且在有变化时对网站进行重新渲染。这个history对象保证了React Router提供的其他组件的可用性，所以其他组件必须在router内部渲染。一个React Router组件如果向父级上追溯却找不到router组件，那么这个组件将无法正常工作。
4.渲染<Router>
路由器组件无法接受两个及以上的子元素。基于这种限制的存在，创建一个<App>组件来渲染应用其余部分是一个有效的方法（对于服务端渲染，将应用从router组件中分离也是重要的）。
import { BrowserRouter } from 'react-router-dom'
ReactDOM.render((
<BrowserRouter>
<App />
</BrowserRouter>
), document.getElementById('root'))
5.路由(Route)
<Route>组件是React Router中主要的结构单元。在任意位置只要匹配了URL的路径名(pathname)你就可以创建<Route>元素进行渲染。
6.路径(Path)
<Route>接受一个数为string类型的path，该值路由匹配的路径名的类型。例如：<Route path='/roster'/>会匹配以/roster[注2]开头的路径名。在当前path参数与当前location的路径相匹配时，路由就会开始渲染React元素。若不匹配，路由不会进行任何操作[注3]。
<Route path='/roster'/>
// 当路径名为'/'时, path不匹配
// 当路径名为'/roster'或'/roster/2'时, path匹配
// 当你只想匹配'/roster'时，你需要使用"exact"参数
// 则路由仅匹配'/roster'而不会匹配'/roster/2'
<Route exact path='/roster'/>
注意：在匹配路由时，React Router只关注location的路径名。当URL如下时：
http://www.example.com/my-projects/one?extra=false
React Router去匹配的只是'/my-projects/one'这一部分。
7.匹配路径
path-to-regexp 用来决定route元素的path参数与当前location是否匹配。它将路径字符串编译成正则表达式，并与当前location的路径名进行匹配比较。除了上面的例子外，路径字符串有更多高级的选项，详见[path-to-regexp文档]。当路由地址匹配成功后，会创建一个含有以下属性的match对象：
- url ：与当前location路径名所匹配部分
- path ：路由的地址
- isExact ：path 是否等于 pathname
- params ：从path-to-regexp获取的路径中取出的值都被包含在这个对象中
使用route tester这款工具来对路由与URL进行检验。
注意：本例中路由路径仅支持绝对路径[注4]。
8.创建博客的路由
可以在路由器(router)组件中的任意位置创建多个<Route>，但通常我们会把它们放在同一个位置。使用<Switch>组件来包裹一组<Route>。<Switch>会遍历自身的子元素（即路由）并对第一个匹配当前路径的元素进行渲染。
对于本网站，我们希望匹配一下路径：
- / ： 博客首页
- /admin ：后台管理
- /404 ：无效页面
为了在应用中能匹配路径，在创建<Route>元素时必须带有需要匹配的path作为参数。
ReactDOM.render(
<Router>
<div>
<Switch>
<Route path='/404' component={NotFound}/>
<Route path='/admin' component={Admin}/>
<Route component={Front} />
</Switch>
</div>
</Router>
, document.getElementById('root')
);
9.<Route>是如何渲染的？
当一个路由的path匹配成功后，路由用来确定渲染结果的参数有三种。只需要提供其中一个即可。
- component ： 一个
React组件。当带有component参数的route匹配成功后，route会返回一个新的元素，其为component参数所对应的React组件（使用React.createElement创建）。 - render ： 一个返回
React element的函数[注5]。当匹配成功后调用该函数。该过程与传入component参数类似，并且对于行级渲染与需要向元素传入额外参数的操作会更有用。 - children ： 一个返回
React element的函数。与上述两个参数不同，无论route是否匹配当前location，其都会被渲染。
<Route path='/page' component={Page} />
const extraProps = { color: 'red' }
<Route path='/page' render={(props) => (
<Page {...props} data={extraProps}/>
)}/>
<Route path='/page' children={(props) => (
props.match
? <Page {...props}/>
: <EmptyPage {...props}/>
)}/>
通常component参数与render参数被更经常地使用。children参数偶尔会被使用，它更常用在path无法匹配时呈现的'空'状态。在本例中并不会有额外的状态，所以我们将使用<Route>的component参数。
通过<Route>渲染的元素会被传入一些参数。分别是match对象，当前location对象[注6]以及history对象（由router创建）[注7]。
10.嵌套路由
包含在Switch中的都是一级页面的路由，文章列表，文章详情，以及后台管理的页面都没有包含在这里。
在Front组件中，我们将为四种路径进行渲染：
-
/: 对应博客的首页，罗列所有文章 -
/:tag: 罗列指定分类下的所有文章 -
/detail/:id: 渲染文章详情页面 -
/404: 无效页面
import React, {Component} from 'react'
import {
Route,
Switch
} from 'react-router-dom'
import Home from '../Home'
import Detail from '../Detail'
import NotFount from '../NotFount'
import { BackTop } from 'antd'
class Front extends Component {
constructor(props){
super(props);
}
render() {
const {url} = this.props.match;
return(
<div>
<div >
<Switch>
<Route exact path={url} component={Home}/>
<Route path={`/detail/:id`} component={Detail}/>
<Route path={`/:tag`} component={Home}/>
<Route component={NotFound}/>
</Switch>
</div>
<BackTop />
</div>
)
}
}
export default Front;
11.路径参数
有时路径名中存在我们需要获取的参数。例如，在文章列表页，我们要获取用户点击的tag，在文章详情页要获取文章的id。我们可以向route的路径字符串中添加path参数
如'/detail/:id'中:id这种写法意味着/Detail/后的路径名将会被获取并存在match.params.id中。例如，路径名'/detail/234432'会获取到一个对象：
{ id: '234423' } // 注获取的值是字符串类型的
12.Link
现在，我们应用需要在各个页面间切换。如果使用锚点元素（就是）实现，在每次点击时页面将被重新加载。React Router提供了<Link>组件用来避免这种状况的发生。当你点击<Link>时，URL会更新，组件会被重新渲染，但是页面不会重新加载，举个例子：
import { Link } from 'react-router-dom'
const Header = () => (
<header>
<nav>
<ul>
<li><Link to='/'>Home</Link></li>
<li><Link to='/articles'>Articles</Link></li>
<li><Link to='/detail'>Detail</Link></li>
</ul>
</nav>
</header>
)
<Link>使用'to'参数来描述需要定位的页面。它的值即可是字符串也可是location对象（包含pathname，search，hash与state属性）。如果其值为字符串将会被转换为location对象。
13.注释：
[1] locations 是一个含有描述URL不同部分属性的对象：
// 一个基本的location对象
{ pathname: '/', search: '', hash: '', key: 'abc123' state: {} }
[2] 你可以渲染无路径的<Route>，其将会匹配所有location。此法用于访问存在上下文中的变量与方法。
[3] 如果你使用children参数，即便在当前location不匹配时route也将进行渲染。
[4] 当需要支持相对路径的<Route>与<Link>时，你需要多做一些工作。相对<Link>将会比你之前看到的更为复杂。因其使用了父级的match对象而非当前URL来匹配相对路径。
[5] 这是一个本质上无状态的函数组件。内部实现，component参数与render参数的组件是用很大的区别的。使用component参数的组件会使用React.createElement来创建元素，使用render参数的组件则会调用render函数。如果我们定义一个内联函数并将其传给component参数，这将会比使用render参数慢很多。
<Route path='/one' component={One}/>
// React.createElement(props.component)
<Route path='/two' render={() => <Two />}/>
// props.render()
[6]<Route>与<Switch>组件都会带有location参数。这能让你使用与实际location不同的location去匹配地址。
[7] 可以传入staticContext参数，不过这仅在服务端渲染时有用。
文章列表
基本的路由我们已经创建好了，再一次回归一下：
我们在入口index.js文件中创建了一个container Front, 之后这里还会添加后台管理页面的路径，现在先空着：
<Router>
<div>
<Switch>
<Route component={Front} />
</Switch>
</div>
</Router>
在Front中我们嵌套了4个路由，分别对应首页，指定分类文章列表，文章详情，以及无效页面：
<Switch>
<Route exact path={url} component={Home}/>
<Route path={`/detail/:id`} component={Detail}/>
<Route path={`/:tag`} component={Home}/>
<Route component={NotFound}/>
</Switch>
文章列表页的主要交互就是：根据用户在Menus中点击的分类，改变当前的路径，根据路径中的参数渲染当前页面。
Home这个container包含三个部分：
- Header
- Menus
- ArticleList
import React, { Component } from 'react';
import './style.css';
import Header from '../../components/Header';
import Menus from '../../components/Menus';
import ArticleList from '../../components/ArticleList'
import { Redirect } from 'react-router-dom';
class Home extends Component {
render() {
const { tags } = this.props;
return (
<div className="h_container">
<Header />
<div className="nav">
<Menus history={this.props.history} />
</div>
<div className="main">
<ArticleList history={this.props.history} tags={tags} />
</div>
</div>
)
}
};
export default Home;
这里ArticleList主要渲染当前分类下的文章列表：
import React, { Component } from 'react'
import ArticleListCell from '../ArticleListCell'
const items = [{
key: '123',
title: '标题',
time: '2017-10-29',
viewCount: '100',
commentCount: '23'
},{
key: '123332',
title: '标题2',
time: '2017-10-29 12:00:00',
viewCount: '10',
commentCount: '123'
}];
export default class ArticleList extends Component {
constructor(props) {
super(props)
}
render() {
const { tags } = this.props;
return(
<div>
{
items.map((item,index) => (
<ArticleListCell history={this.props.history} key={index} data={item} tags={tags} />
))
}
</div>
)
}
}
先定义一个数组items作文假数据，通过map方法，返回相应的文章内容，这里我们新建了一个组件ArticleListCell:
import React, { Component } from 'react'
import './style.css'
import { Link } from 'react-router-dom'
export default class ArticleListCell extends Component {
render() {
return(
<div className="ac_container" onClick={
() => {
this.props.history.push(`/detail/${this.props.data._id}`, {id: this.props.data_id});
// props.getArticleDetail(props.data_id)
}
}
>
<div className="content">
<div className="title">
<h2>{this.props.data.title} + {this.props.tags}</h2>
</div>
<p className="summary">
这里应该有摘要的，因为设计的数据库表表结构的时候忘记了，后面也是懒得加了，感觉太麻烦了，就算了
</p>
<div>
<div className="info">
<div className="tag">
<img src={require('./calendar.png')} alt="发表日期"/>
<div>{this.props.data.time}</div>
</div>
<div className="tag">
<img src={require('./views.png')} alt="阅读数"/>
<div>{this.props.data.viewCount}</div>
</div>
<div className="tag">
<img src={require('./comments.png')} alt="评论数"/>
<div>{this.props.data.commentCount}</div>
</div>
</div>
<span className="lastSpan">
阅读全文
</span>
</div>
</div>
</div>
)
}
}
这个组件一方面展示文章标题和其他信息，还有一个功能是点击时跳转到文章详情，从代码中可以看到，我给该部分加了一个onClick方法，其内容是：
this.props.history.push(`/detail/${this.props.data._id}`, {id: this.props.data_id});
这里执行了一个react-route提供的方法history.push，实现页面的转换，并将文章id通过路由传递到文章详情页。当然，这里也可以使用Link组件实现跳转。
让我们来看一下，当前页面的样子：
文章详情
文章详情页面主要包含标题，以及文章内容。内容部分要支持Markdown。
首先安装一下remark和remark-react两个模块，用户渲染Markdown内容
npm install --save remakr
npm install --save remark-react
来看一下Detail这个页面的具体内容：
import React, { Component } from 'react'
import remark from 'remark'
import reactRenderer from 'remark-react'
import '../Home/style.css'
import '../../components/Header/style.css'
import './style.css'
const articleContent = "## 标题 \n```code``` \n jlkfdsjal"
class Detail extends Component {
render() {
return(
<div className="h_container">
<div className="header">
<h1>文章标题在这里</h1>
</div>
<div className="main">
<div id='preview' className="main">
<div className="markdown_body">
{remark().use(reactRenderer).processSync(articleContent).contents}
</div>
</div>
</div>
</div>
)
}
}
export default Detail;
articleContent是我们文章的内容，mardown_body是我预先下载的github主题的marksown css文件，当然你也可以下载其他的主题。
<div id='preview' className="main">
<div className="markdown_body">
{remark().use(reactRenderer).processSync(articleContent).contents}
</div>
</div>
完成这部分内容后，将Detail引入到Front页面里：
class Front extends Component {
constructor(props){
super(props);
}
render() {
const {url} = this.props.match;
return(
<div>
<div >
<Switch>
<Route exact path={url} component={Home}/>
<Route path={`/detail/:id`} component={Detail}/>
<Route path={`/:tag`} component={Home}/>
<Route component={NotFound}/>
</Switch>
</div>
<BackTop />
</div>
)
}
}
这是，你在点击文章列表中的ArticleListCell，就可以看到文章详情了：
总结
到此为止，我们的博客展示页面就算完成了，使用到的技术有：
- react
- react-router
本篇文章的源码在这里：React技术栈+Express+Mongodb实现个人博客 -- Part 1
下一篇文章主要内容是使用Ant Design创建后台管理页面：
- 标签管理(添加和删除)
- 新建文章
- 文章管理(修改，删除)
系列文章
React技术栈+Express+Mongodb实现个人博客
React技术栈+Express+Mongodb实现个人博客 -- Part 1 博客页面展示
React技术栈+Express+Mongodb实现个人博客 -- Part 2 后台管理页面
React技术栈+Express+Mongodb实现个人博客 -- Part 3 Express + Mongodb创建Server端
React技术栈+Express+Mongodb实现个人博客 -- Part 4 使用Webpack打包博客工程
React技术栈+Express+Mongodb实现个人博客 -- Part 5 使用Redux
React技术栈+Express+Mongodb实现个人博客 -- Part 6 部署
