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

admin管理员组

文章数量:1794759

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

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

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

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

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

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

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

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

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

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

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

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

        

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

        

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

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

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

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

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

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

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

    之后输入：

        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）

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

      下面引入 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 ;

    然后页面就变成了这样：

    点击菜单里的按钮，下方就会出现对应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 >

    

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

    现在我们完成了标题图片和导航栏的添加，现在我们来对 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样式设置：blog.csdn/daxiazouyizou/article/details/79758558

    显示效果如下所示：

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

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

    

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

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

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

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

本文标签： 博客网站简单React