学习使用React一步步搭建普通博客应用_html/css

开始

博客应用的基本组价

React Universal Blog

Home

About

Work

Contact

NoMatch

结论

집

웹 프론트엔드

HTML 튜토리얼

学习使用React一步步搭建普通博客应用_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:52 AM

当我们考虑一些单页应用的时候（SPAs），一般考虑浏览器，JavaScript和速度，对搜索引擎是不可见的。由于单页应用使用JavaScript来渲染页面中的内容，同时web网络爬虫不通过浏览器来查看整个网页，这样就不能看到和索引页面中所有的内容。或者，更好的说，其中大部分是不能。一些开发人员试图以各种方式来解决这个问题。

在服务器端使用Node.js在客户端使用React，我们可以构建通用的JavaScript应用程序。这可以从服务器端和浏览器端的渲染中提供许多好处，允许搜索引擎和人类使用浏览器来查看单页应用中的内容。

在这个教程中分为两个部分，我将向您展示如何通过服务器端渲染大搭建一个普通的React博客应用系统来使应用对搜素引擎可见。然后，它能够使该应用在浏览器中快速和响应式。

开始

该博客系统将使用到以下一些技术和工具：

Node.js用于包管理和服务端渲染
React用于视图层
Express作为一个简单的后端JS服务端框架
React Router用于路由
React Hot Loader 用于开发中的热加载
Flux 用于数据流
Cosmic JS用于内容管理

开始之前，首先在命令行中运行一下内容：

mkdir react-universal-blogcd react-universal-blog

로그인 후 복사

新建一个 package.json文件，在里面添加一下内容：

{  "name": "react-universal-blog",  "version": "1.0.0",  "description": "",  "main": "app-server.js",  "dependencies": {    "babel": "^5.8.29",    "babel-core": "^5.8.32",    "babel-loader": "^5.3.2",    "cosmicjs": "^2.0.0",    "events": "^1.1.0",    "express": "^4.13.3",    "flux": "^2.1.1",    "history": "^1.14.0",    "hogan-express": "^0.5.2",    "lodash": "^3.10.1",    "react": "^0.14.1",    "react-dom": "^0.14.1",    "react-router": "^1.0.1",    "webpack": "^1.12.2"  },  "scripts": {    "development": "cp views/index.html public/index.html && NODE_ENV=development webpack && webpack-dev-server --content-base public/ --hot --inline --devtool inline-source-map --history-api-fallback"  },  "author": "",  "license": "ISC",  "devDependencies": {    "react-hot-loader": "^1.3.0",    "webpack-dev-server": "^1.12.1"  }}

로그인 후 복사

在这个文件中你应该已经注意到了我们添加了一下内容：

Babel 用于打包符合 CommonJS模块规范，同时将ES6和React JSX的语法格式转换为浏览器兼容的JavaScript。
Cosmic JS官方的Node.js客户端能够通过Cosmic JS云端内容接口服务于我们的博客内容系统。
Flux用于应用的数据管理（这在React 应用程序中非常重要）。
React 用于服务器和浏览器的视图管理
Webpack将所有文件打包成一个bundle.js文件。

同时我们在 package.json文件中加入了一个脚本文件，当我们运行 npm run development时，脚本将从我们的 views文件夹复制 index.html文件到 public文件夹。

配置webpack文件， webpack.config.js:

// webpack.config.jsif(process.env.NODE_ENV === 'development'){  var loaders = ['react-hot','babel']} else {  var loaders = ['babel']}module.exports = {  devtool: 'eval',  entry: './app-client.js',  output: {    path: __dirname + '/public/dist',    filename: 'bundle.js',    publicPath: '/dist/'  },  module: {    loaders: [{      test: /\.js$/,      loaders: loaders,      exclude: /node_modules/    }]  }};

로그인 후 복사

注意到我们这里添加了一个 entery属性，属性的值为 app-client.js。这个文件将作为我们应用的入口点，意味着webpack将从这个点开始打包我们的应用，并且将其输出到路径 /public/dist/bundle.js。同时使用加载器使 Babel在包含 ES6和 JSX的代码中运行。

在讲解与React相关的一些技术内容之前，先来看一些我们完成整个博客将要展现的样子。由于次教程中我们这里希望你能够将更多的精力放在搭建应用的功能性上而不是博客的样式上面，这里我们选择使用已经建好的前端样式主题，选择 Start Bootsrtap样式里面的 Clean Blog

新建一个文件夹，命名为 views，在文件夹内新建文件 index.html在html文件中添加一下代码：

<!DOCTYPE html><html lang="en"><head>  <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1">  <meta name="description" content="">  <meta name="author" content="">  <title>{{ site.title }}{{# page }} | {{ page.title }}{{/ page }}</title>  <!-- Bootstrap Core CSS -->  <link href="/css/bootstrap.min.css" rel="stylesheet">  <!-- Custom CSS -->  <link href="/css/clean-blog.min.css" rel="stylesheet">  <link href="/css/cosmic-custom.css" rel="stylesheet">  <!-- Custom Fonts -->  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">  <link href="//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">  <link href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->  <!--[if lt IE 9]>    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>  <![endif]--></head><body class="hidden">  <div id="app">{{{ reactMarkup }}}</div>  <script src="/js/jquery.min.js"></script>  <script src="/js/bootstrap.min.js"></script>  <script src="/js/clean-blog.min.js"></script>  <script src="/dist/bundle.js"></script></body></html>

로그인 후 복사

所有的公共JS和CSS文件下载 GitHub repository。点击这里下载

通常为了防止使用jQuery，一般我会选择经典的 React Bootstrap。然而为了简洁，在主题框架中使用了部分jQuery的功能。

在 index.html文件中，我们在 id="app"的 div结点上搭建自己的 React点。

在这个点上，你的应用程序拥有以下结构：

package.jsonpublic  |-css    |-bootstrap.min.css    |-cosmic-custom.css  |-js    |-jquery.min.js    |-bootstrap.min.js    |-clean-blog.min.jsviews  |-index.htmlwebpack.config.js

로그인 후 복사

搭建好静态目录之后，开始建立React的组件。

博客应用的基本组价

开始搭建博客的应用界面，博客包括以下页面：

Home
About
Work
Contact

开始建立新的文件，命名 app-clietn.js，具体内容如下：

// app-client.jsimport React from 'react'import {render} from 'react-dom'import {Route} from 'react-router'import createBrowserHistory from 'history/lib/createBrowserHistory'const history = createBrowerHistory()// Routesimport routes from './routes'const Routes =　(    <Router history={history}>        {routes}    </Router>)const app = document.getElementById('app')render(Routes, app)

로그인 후 복사

如果你想进一步了解有关 React Router的工作原理，可以访问 Github 地址。 app-client.js文件中 Router组件使得浏览器客户端路由，服务器端渲染不需要浏览器历史记录，所以这里我们需要建立一个分开的 routes.js文件用来共享服务端和客户端的入口点。

添加 routes.js文件：

// routes.jsimport React, {Component} from 'react'import { Route, IndexRoute, Link} from 'react-router'//Main componentclass App extends Component{    componentDidMount(){        document.body.className=''    }    render(){        return (            <div>                <h1 id="React-Universal-Blog">React Universal Blog</h1>                   <nav>                      <ul>                         <li><Link to="/">Home</Link></li>                         <li><Link to="/about">About</Link></li>                         <li><Link to="/work">Work</Link></li>                         <li><Link to="/contact">Contact</Link></li>                      </ul>                   </nav>                { this.props.children }              </div>                )    }}//Pagesclass Home extends Component{    render(){        return (          <div>            <h2 id="Home">Home</h2>            <div>Some home page content</div>          </div>        )    }}class About extends Component {  render(){    return (      <div>        <h2 id="About">About</h2>        <div>Some about page content</div>      </div>    )  }}class Work extends Component {  render(){    return (      <div>        <h2 id="Work">Work</h2>        <div>Some work page content</div>      </div>    )  }}class Contact extends Component {  render(){    return (      <div>        <h2 id="Contact">Contact</h2>        <div>Some contact page content</div>      </div>    )  }}class NoMatch extends Component {  render(){    return (      <div>        <h2 id="NoMatch">NoMatch</h2>        <div>404 error</div>      </div>    )  }}export default (  <Route path="/" component={App}>    <IndexRoute component={Home}/>    <Route path="about" component={About}/>    <Route path="work" component={Work}/>    <Route path="contact" component={Contact}/>    <Route path="*" component={NoMatch}/>  </Route>)

로그인 후 복사

到目前为止，我们搭建好了一个基本的包含不同页面的博客应用例子。现在，让我们来具体运行一下应用，在终端中运行一下内容：

mkdir publicnpm installnpm run development

로그인 후 복사

在浏览器中输入网址 http://localhost:8080来查看博客运行的基本效果。

上述步骤完成之后，现在运行至服务器端，新建文件 app-server.js并添加以下内容：

// app-server.jsimport React from 'react'import { match, RoutingContext } from 'react-router'import ReactDOMServer from 'react-dom/server'import express from 'express'import hogan from 'hogan-express'// Routesimport routes from './routes'// Expressconst app = express()app.engine('html', hogan)app.set('views', __dirname + '/views')app.use('/', express.static(__dirname + '/public/'))app.set('port', (process.env.PORT || 3000))app.get('*',(req, res) => {  match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {        const reactMarkup = ReactDOMServer.renderToStaticMarkup(<RoutingContext {...renderProps}/>)    res.locals.reactMarkup = reactMarkup    if (error) {      res.status(500).send(error.message)    } else if (redirectLocation) {      res.redirect(302, redirectLocation.pathname + redirectLocation.search)    } else if (renderProps) {            // Success!      res.status(200).render('index.html')        } else {      res.status(404).render('index.html')    }  })})app.listen(app.get('port'))console.info('==> Server is listening in ' + process.env.NODE_ENV + ' mode')console.info('==> Go to http://localhost:%s', app.get('port'))

로그인 후 복사

在 app-server.js文件中，我们载入了基本的路由文件 route.js.这些都是呈现标记转换成一个字符串,然后将它作为变量传递给我们的模板。

在接下来的步骤中，我们将建立文件 app.js这可以使我们在 Node.js中使用ES6是语法格式。文件包含以下内容：

//app.jsrequire('babel/register')require('./app-server.js')

로그인 후 복사

我们将从该文件启动我们的服务，不过首先，让我们先创建一个脚本。

打开 package.json文件，编辑里面的脚本部分文件如下：

// ..."scripts": {  "development": "cp views/index.html public/index.html && NODE_ENV=development webpack && webpack-dev-server --content-base public/ --hot --inline --devtool inline-source-map --history-api-fallback",  "production": "rm -rf public/index.html && NODE_ENV=production webpack -p && NODE_ENV=production node app.js",  "start": "npm run production"}// ...

로그인 후 복사

到目前为止，已经部署好了生产环境的脚本代码，我们可以同时在服务器d端和客户端运行代码，终端中运行以下内容：

npm start

로그인 후 복사

在浏览器地址栏中输入 http://localhsot:3000.你就可以看到你的博客单页应用了。

在浏览器中点击查看源码。

结论

在这部分中，我们初步了解了使用React和Node.js一起搭建一个React普通博客应用。

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7333

자바 튜토리얼

1627

Cakephp 튜토리얼

1351

라라벨 튜토리얼

1262

PHP 튜토리얼

1209

Related knowledge

공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? Mar 04, 2025 pm 12:32 PM

공식 계정 웹 페이지 업데이트 캐시, 이것은 간단하고 간단하며 냄비를 마시기에 충분히 복잡합니다. 공식 계정 기사를 업데이트하기 위해 열심히 노력했지만 사용자는 여전히 기존 버전을 열었습니까? 이 기사에서는이 뒤에있는 비틀기와 회전을 살펴 보고이 문제를 우아하게 해결하는 방법을 살펴 보겠습니다. 읽은 후에는 다양한 캐싱 문제를 쉽게 처리 할 수있어 사용자가 항상 가장 신선한 콘텐츠를 경험할 수 있습니다. 기본 사항에 대해 먼저 이야기 해 봅시다. 액세스 속도를 향상시키기 위해 브라우저 또는 서버는 일부 정적 리소스 (예 : 그림, CSS, JS) 또는 페이지 컨텐츠를 저장합니다. 다음에 액세스 할 때 다시 다운로드하지 않고도 캐시에서 직접 검색 할 수 있으며 자연스럽게 빠릅니다. 그러나 이것은 또한 양날의 검입니다. 새 버전은 온라인입니다.