React学习（六）——搭建简单的个人博客网站

    大家好，我是凯文，通过之前的几篇文章，我们了解了React前端框架的基础架构和使用方法，那么现在我们就通过一个简单的实例来介绍：如何用React框架搭建出一个简单的博客网站。

    关于之前的React相关内容可以参考以下链接：

    React基础项目搭建： https://blog.csdn.net/daxiazouyizou/article/details/79743832

    React组件运用：https://blog.csdn.net/daxiazouyizou/article/details/79748078

    React路由（跟下文有关）：https://blog.csdn.net/daxiazouyizou/article/details/79754021

    下面开始网站搭建，首先我们来对该网站做一个规划

    1、先确定网站的主题为：个人博客网站

    2、网站功能：首页显示文章标签，通过点击来浏览不同的文章

    3、网站性质：由于篇幅有限，这里我们只制作静态网站，也就是不连接后台数据库，直接显示网站内容。

    好了，那我们首先搭建一个的React项目，这里直接采用 React路由 链接中搭建完的页面来进行改造。

    参考 React路由 链接中的教程，我们做了一个主页面，其中包含了三个链接，点击后可以跳转到分页面，如下图所示：

        

    当我们点击下方的三行链接文字时，会跳转到相对应的页面，如下图：

        

    但是，这样只能体现出最简单的跳转功能，十分不美观，我们需要运用到CSS样式来使页面内容更加丰富，各位可以直接采用CSS更改页面样式，这里为了更加方便快捷，我们引入 UI控件 这个概念，所谓的UI控件就是许多开发团队提前制作打包好的样式和组件集合，只要拿来使用就可以展现出各种各样的效果。

    这里我们采用 Semantic-UI ，链接是： https://react.semantic-ui.com/

    下面介绍使用方法，Semantic-UI团队已经做好了许多React组件，我们只需要根据官方网页中的提示引入React组件就可以使用。在使用之前，先要在我们本地的React项目里安装Semantic-UI

    打开CMD命令行，读取项目路径，然后输入：

        cnpm i --save-dev semantic-ui-react   

      （cnpm 获取更快，输入npm效果一样）

      （cnpm安装方法输入： npm install -g cnpm --registry=https://registry.npm.taobao.org   ）

    之后输入：

        cnpm install semantic-ui-css --save

    然后需要引入样式，在index.js文件中 import 一下，如下所示：

import React from 'react' ;

import ReactDOM from 'react-dom' ;

import App from './App' ;

import 'semantic-ui-css/semantic.min.css' ;

ReactDOM . render ( < App /> , document. getElementById ( 'root' ));   

    下面我们就可以愉快地使用Semantic-UI了。

    首先，我们使用 Segment 组件来将页面信息包裹起来，在 Home.js 文件中 import Segment组件，然后在render函数中使用<Segment></Segment>标签把页面标签包裹起来，如下所示：

                    < Segment >< div > This is Home! </ div ></ Segment >

< Segment >

< div >

< Link to = "/Page1/" style = { {color: 'black' } } >

< div > 点击跳转到Page1 </ div >

</ Link >

< Link to =