学习使用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 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

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

7697

자바 튜토리얼

1640

Cakephp 튜토리얼

1393

라라벨 튜토리얼

1287

PHP 튜토리얼

1229

Related knowledge

HTML은 초보자를 위해 쉽게 배우나요? Apr 07, 2025 am 12:11 AM

HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.

HTML, CSS 및 JavaScript의 역할 : 핵심 책임 Apr 08, 2025 pm 07:05 PM

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

HTML의 시작 태그의 예는 무엇입니까? Apr 06, 2025 am 12:04 AM

anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.

HTML, CSS 및 JavaScript 이해 : 초보자 안내서 Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.