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

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

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

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

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

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

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

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

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

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

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

参考 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="/Page2/" style={{color:'black'}}>

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

 </Link>

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

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

 </Link>

 </div>

 </Segment>

美观起见，我们给页面设置外边距为10px，修改App.js的内容，给div添加style属性，如下所示：

            <Router >

 <div style={{margin:'10px'}}>

 <Route exact path="/" component={Home} />

 <Route path="/Page1" component={Page1} />

 <Route path="/Page2" component={Page2} />

 <Route path="/Page3" component={Page3} />

 </div>

 </Router>

然后，我们就可以看到页面变成了下图的状态：（开启项目命令 npm start 网页地址 localhost:3000）

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

一般的网站都会有一个导航栏，通过点击导航栏中的按钮来实现页面跳转，这里我们也采用这种方式。

下面引入 Semantic-UI 的 menu 组件，改造 Home.js 文件，代码如下：

import React from 'react';

import { Link } from 'react-router-dom';

import { Segment, Menu } from 'semantic-ui-react';

class Home extends React.Component{

 render(){

 return(

 <div>

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

 <Menu>

 <Menu.Item>

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

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

 </Link>

 </Menu.Item>

 <Menu.Item>

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

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

 </Link>

 </Menu.Item>

 <Menu.Item>

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

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

 </Link>

 </Menu.Item>

 </Menu>
 
 </div>
 );
 }
}

export default Home;

然后页面就变成了这样：

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

点击菜单里的按钮，下方就会出现对应Page组件里的内容，这里注意，在App.js文件中，把第一条Route标签的exact属性去掉，不然切换页面的话上方的导航栏就会消失。

我们还可以进行进一步的改善，在This is Home 的位置替换上图片，替换方式如下

找一张长方形的标题图片，先把图片放到 src 目录下，创建一个img文件夹

然后如下所示改造 Home.js 文件，引入Image组件，并将标题替换为该标签，src属性中 require（'该图片的路径'）

import React from 'react';

import { Link } from 'react-router-dom';

import { Segment, Menu, Image } from 'semantic-ui-react';

class Home extends React.Component{

 render(){

 return(

 <div>

 <Image rounded src={require('./img/2331.jpg')}/>

 <Menu>

 <Menu.Item>

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

 <div>Page1</div>

 </Link>

 </Menu.Item>

好，现在我们来看一下效果，是不是更美观了呢（图片可自行替换）

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

现在我们完成了标题图片和导航栏的添加，现在我们来对 Page1.js 这个文件进行改造，代码如下：

import React from 'react';

import { Segment } from 'semantic-ui-react';

class Page1 extends React.Component{

 render(){

 return(

 <div>

 <Segment 

 style={{

 textAlign:'center',width:'60%',margin:'10px auto'

 }}>
 文章一——长恨歌

 </Segment>

 <Segment 

 style={{

 textAlign:'center',margin:'10px auto'

 }}>

 汉皇重色思倾国，御宇多年求不得。<br/>

 杨家有女初长成，养在深闺人未识。<br/>

 天生丽质难自弃，一朝选在君王侧。<br/>

 回眸一笑百媚生，六宫粉黛无颜色。<br/>

 春寒赐浴华清池，温泉水滑洗凝脂。<br/>

 侍儿扶起娇无力，始是新承恩泽时。<br/>

 </Segment>

 </div>
 );
 }
}

export default Page1;

在页面中添加了两对Segment标签，显示第一篇文章，其中使用了行内CSS样式，使用方法可以参考我之前的文章：

React样式设置：https://blog.****.net/daxiazouyizou/article/details/79758558

显示效果如下所示：

React学习（六）——搭建简单的个人博客网站如图所示，一篇古文（也可以是博客什么的）就呈现在了页面中，其构成十分简单，各位可以自由发挥，搭建出自己想要的页面样式。Semantic-UI 中还有许多实用的组件，也可以自行创建CSS样式。

下面，我们对另外两个页面进行改造，页面效果如下：

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

现在，我们成功地搭建出了可切换的文章页面（虽然一开始说是博客，结果变成了古文？问题不大效果一样）

本文章只是简单介绍网站页面的搭建方法，各位可以自行学习实践，搭建出满意的页面。

谢谢各位支持，之后还会有React相关文章更新。

下一篇，简单的用户名密码验证实现：https://blog.****.net/daxiazouyizou/article/details/80306084

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

相关推荐