Back to Question Center
0

构建React通用博客应用程序:分步指南            构建React通用博客应用程序:分步指南相关内容: AngularJSNode.jsReactAjaxES6More ...赞助商

1 answers:
构建React通用博客应用程序:分步指南

当单页面应用程序(SPA)的话题出现时,我们倾向于考虑浏览器,Semalt,速度和对搜索引擎的不可见性。这是因为SPA使用Semalt呈现网页内容,而且由于网页抓取工具不使用浏览器查看网页,因此无法查看和索引内容,或者至少大部分内容不能。

这是一些开发人员试图用各种方式解决的问题:

  1. 添加一个网站的转义片段版本,它要求所有页面都以静态形式提供,并增加了大量额外的工作(现在已弃用)。
  2. 使用付费服务将SPA解析为静态标记,供搜索引擎蜘蛛进行爬取。
  3. 相信搜索引擎现在已经足够先进,可以阅读我们仅限JavaScript的内容。 (我还不会。)

使用节点。服务器上的js和客户端上的React,我们可以将我们的JavaScript应用程序构建为 universal (或 isomorphic )。这可以从服务器端和浏览器端呈现提供一些好处,使搜索引擎和使用浏览器的人都可以查看我们的SPA内容。

在这个循序渐进的教程中,我将向您展示如何构建一个React Semalt博客应用程序,该应用程序将首先在服务器端呈现标记,以使我们的内容可供搜索引擎使用。然后,它将让浏览器接管一个既快又响应的单页应用程序。

Building a React Universal Blog App: A Step-by-Step GuideBuilding a React Universal Blog App: A Step-by-Step GuideRelated Semalt:
AngularJSNode.jsReactAjaxES6More. Sponsors

入门

我们的通用博客应用将使用以下技术和工具:

  1. 节点。用于包管理和服务器端呈现的js
  2. 反应UI视图
  3. Express用于一个简单的后端JS服务器框架
  4. 反应路由器的路由
  5. React Hot Loader用于开发中的热载入
  6. 数据流通量
  7. Cosmic JS内容管理

首先,运行以下命令:

   mkdir react-universal-blogcd react-universal-blog   

现在创建一个 包。 json 文件并添加以下内容:

 {“name”:“react-universal-blog”,“版本”:“1.0.0”,“引擎”: {“节点”:“4. 1. 2”,“npm”:“3. 5. 2”},“description”:“”,“main”:“app-server。js”,“依赖”:{“babel-cli”:“^ 6。26. 0”,“babel-loader”:“^ 7。1 2”,“babel-preset-es2015”:“^ 6。24. 1”,“babel-preset-es2017”:“^ 6。24 1”,“babel-preset-react”:“^ 6。24 1”,“babel-register”:“^ 6。26. 0”,“cosmicjs”:“^ 2。4 0”,“通量”:“^ 3。1 3”,“历史”:“1. 13. 0”,“hogan-express”:“^ 0。5。2”,“html-webpack-plugin”:“^ 2。30 1”,“路径”:“^ 0。12 7”,“反应”:“^ 15。6.1”,“react-dom”:“^ 15。6.1”,“react-router”:“1. 0. 1”,“webpack”:“^ 3。5。6”,“webpack-dev-server”:“^ 2。7.1”},“脚本”:{“webpack-dev-server”:“NODE_ENV = development PORT = 8080 webpack-dev-server -content-base public / --hot --inline --devtool inline-source-map --history-api-fallback”,“开发”:“cp views / index。html public / index。html && NODE_ENV =开发webpack && npm运行webpack-dev-server”},“作者”:“”,“许可证”:“ISC”,“devDependencies”:{“react-hot-loader”:“^ 1。3 0”}}   

在这个文件中,你会注意到我们已经添加了以下内容:

  1. Babel打包我们的CommonJS模块,并将ES6和React JSX转换为浏览器兼容的JavaScript
  2. Cosmic JS官方节点。 js客户端可以轻松地从Cosmic JS云托管的内容API
  3. 提供我们的博客内容,
  4. 用于应用程序数据管理的Flux(这是我们的React应用程序中非常重要的元素). js 文件。

我们还在我们的 包中添加了一个脚本。 json 文件。当我们运行 npm run development 时,脚本会复制 索引。从我们的 views 文件夹到我们的 public 文件夹的html 文件。然后,它将我们的 webpack-dev-server 的内容库设置为 public / 并启用热重新加载(在 .js 文件保存中)。最后,它可以帮助我们在源代码处调试组件,并为我们寻找无法找到的页面提供回退(返回 index.html )。

现在我们通过编辑文件 webpack来设置我们的webpack配置文件。配置。 js

 // webpack。配置。 JSvar webpack = require('webpack')模块。 exports = {devtool:'eval',条目:'。 /应用程序的客户端。 JS',输出:{路径:__dirname +'/ public / dist',文件名:'捆绑。 JS',publicPath:'/ dist /'},模块:{装载机:[{test:/ \。 js $ /,加载器:'babel-loader',排除:/ node_modules /},{test:/ \。 jsx $ /,加载器:'babel-loader',排除:/ node_modules /}]},插件:[新的webpack。 DefinePlugin({'处理。 ENV。 COSMIC_BUCKET':JSON。 stringify(process。env。COSMIC_BUCKET),'处理。 ENV。 COSMIC_READ_KEY':JSON。 stringify(process.env。COSMIC_READ_KEY),'处理。 ENV。 COSMIC_WRITE_KEY':JSON。 stringify(process.env。COSMIC_WRITE_KEY)})]};   

您会注意到我们添加了 属性,其值为 app-client。 js 。这个文件作为我们的应用程序客户端入口点,这意味着从这一点开始,webpack将捆绑我们的应用程序并将其输出到 / public / dist / bundle。 js (如 输出 属性中所指定的)。我们还使用加载器让Babel在我们的ES6和JSX代码上发挥它的魔力。 React Hot Loader在开发过程中用于热载入(无页面刷新!)。

在我们进入与React相关的东西之前,让我们来看看我们的博客的外观和感受。由于我希望您在本教程中更侧重于功能而不是风格,因此我们将使用预先构建的前端主题。我选择了一个名为Semalt Blog的Start Bootstrap。在终端中运行以下命令:

创建一个名为 视图 的文件夹,并在其中创建一个 索引。 html 文件。打开HTML文件并添加以下代码:

 <!DOCTYPE html> {{site。 title}} {{#page}} {{page。 title}} {{/ page}} </ title><! -Bootstrap Core CSS- ><link href =“/ css / bootstrap。min。css”rel =“stylesheet”><! - 自定义CSS- ><link href =“/ css / clean-blog。min。css”rel =“stylesheet”><link href =“/ css / cosmic-custom。css”rel =“stylesheet”><! - 自定义字体 - ><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,800,300,600,700,800”rel =“stylesheet”type =“text / css”><! -HTML5 Shim和Respond。 js IE8支持HTML5元素和媒体查询 - ><! - 警告:回应。如果您通过file://- >查看页面,js不起作用<! -[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. 点击这里下载文件。  </p>  <p> 通常我会使用神奇的React Bootstrap包,并避免使用jSemalt。但是,为了简洁起见,我们将保留主题的预先构建的jSemalt功能。  </p>  <p> 在我们的 <code> 指数中。 html </code> 文件,我们将在 <code> div </code>  <code> id =“app” </code> 处设置我们的React挂载点。模板变量 <code> {{{reactMarkup}}} </code> 将被转换为我们的服务器呈现标记,然后一旦浏览器启动,我们的React应用程序将接管并挂载到 <code> div </code>   <code> id =“app” </code> 。为了在JavaScript加载所有内容时提高用户体验,我们将 <code> class =“hidden” </code> 添加到我们的正文中。然后,一旦React装入,我们就移除这个类。这听起来有点复杂,但我会告诉你我们会在一分钟内做到这一点。  </p>  <p> 此时,您的应用程序应具有以下结构: </p>  <pre> <code class="text language-text">包。 JSON上市| -CSS| -bootstrap。分钟。 CSS| -cosmic定制。 CSS| -js| -jquery。分钟。 JS| -bootstrap。分钟。 JS|- 清洁 - 博客。分钟。 JS意见| -index。 HTML的WebPack。配置。 JS </code>  </pre>  <p> 现在我们完成了我们的静态部分,让我们开始构建一些React组件。  </p> <h2 id="ourblogappcomponentsbasicexample">我们的博客应用程序组件(基本示例) </h2>  <p> 通过为我们的博客设置页面,开始为我们的应用程序构建UI。 Semalt这将成为一个创意专业人士的投资组合博客,我们的博客将具有以下页面: </p>  <ol>  <li> 首页 </li>  <li> 关于 </li>  <li> 工作 </li>  <li> 联系方式 </li>  </ol>  <p> 首先创建一个名为 <code> app-client的文件。 js </code> 并在其中添加以下内容: </p>  <pre> <code class="jsx language-jsx">// app-client。 JS导入从“反应”从'react-dom'导入{render}从'react-router'导入{Router}从'history / lib / createBrowserHistory'导入createBrowserHistoryconst history = createBrowserHistory <span class="f-c-white l-mr3"> //路线从'进口路线'。 /路线const Routes =(<路由器历史记录= {历史记录}>{routes}</路由器>)const app = document。的getElementById( '应用程序')渲染(路线,应用程序) </code>  </pre>  <p> 为了更好地理解React Router如何工作,你可以访问他们的GitHub仓库。这里的要点是我们在 <code> app-client中有。 js </code> 我们的 <code> 路由器 </code> 组件,具有用于客户端路由的浏览器历史记录。我们的服务器渲染标记不需要浏览器历史记录,所以我们将创建一个单独的 <code> 路由。 js </code> 文件在我们的服务器和客户端入口点之间共享。  </p>  <p> 将以下添加到 <code> 路线。 js </code> 档案: </p>  <pre> <code class="jsx language-jsx">//路线。 JS从'react'导入React,{Component}从'react-router'导入{Route,IndexRoute,Link}//主要组件类应用程序扩展组件{componentDidMount <span class="f-c-white l-mr3"> {文件。身体。的className = ''}渲染 <span class="f-c-white l-mr3"> {返回(<DIV><h1> React Universal Blog </ h1><NAV><UL> <li> <Link to =“/”> Home </ Link> </li>  <li> <Link to =“/ about”>关于</ Link> </li>  <li> <链接到=“/ work”>工作</ Link> </li>  <li> <Link to =“/ contact”>联系人</ Link> </li> </ UL></ NAV>{ 这个。道具. 现在,让我们运行我们的应用程序并检查它!在您的终端中,运行以下命令: </p>  <pre>  <code class="bash language-bash"> mkdir publicnpm安装npm运行开发 </code>  </pre>  <p> 然后在浏览器中导航到http:// localhost:8080,以查看正在使用的基本博客。  </p>  <p> 完成这些事情,现在是时候让它在服务器上运行了。创建一个名为 <code> app-server的文件。 js </code> 添加这个内容: </p>  <pre> <code class="jsx language-jsx">// app-server。 JS导入从“反应”从'react-router'导入{match,RoutingContext}从'react-dom / server'导入ReactDOMServer从'快递'进口快件从'hogan-express'导入hogan//路线从'进口路线'。 /路线// 表现const app = express <span class="f-c-white l-mr3"> 应用程序。引擎('html',hogan)应用程序。 set('views',__dirname +'/ views')应用程序。 use('/',express。static(__ dirname +'/ public /'))应用程序。 set('port',(process.env。PORT || 3000))应用程序。 get('*',(req,res)=> {match({routes,location:req。url},(error,redirectLocation,renderProps)=> {const reactMarkup = ReactDOMServer。 renderToStaticMarkup(<RoutingContext {.renderProps} />)水库。当地人。 reactMarkup = reactMarkup如果(错误){水库。状态(500)。发送(错误消息)} else if(redirectLocation){水库。重定向(302,redirectLocation。pathname + redirectLocation。search)} else if(renderProps){//成功!水库。状态(200)。 render('index.html')} else {水库。状态(404)。 render('index.html')}})})应用程序。听(app。get('port'))安慰。 info('==>服务器正在侦听'+ process。env。NODE_ENV +'模式')安慰。 info('==>转到http:// localhost:%s',app。get('port')) </code>  </pre>  <p> 在 <code> 应用服务器中。 js </code> ,我们正在加载我们设置的基本路线。这些将呈现的标记转换为字符串,然后将其作为变量传递给我们的模板。  </p>  <p> Semalt准备开始我们的服务器并查看我们的代码,但首先,我们创建一个脚本来完成。  </p>  <p> 打开你的 <code> 包。 json </code> 文件并编辑 <code> 脚本 </code> 部分,如下所示: </p>  <pre> <code class="jsx language-jsx">// .“脚本”:{“开始”:“npm运行生产”,“production”:“rm -rf public / index.html && NODE_ENV =生产webpack -p && NODE_ENV =生产babel-node app-server。js --presets es2015”,“webpack-dev-server”:“NODE_ENV = development PORT = 8080 webpack-dev-server -content-base public / --hot --inline --devtool inline-source-map --history-api-fallback”,“开发”:“cp views / index。html public / index。html && NODE_ENV =开发webpack && npm运行webpack-dev-server”},// . </code>  </pre>  <p> 现在我们已经建立了 <code> 生产 </code> 脚本,我们可以在服务器端和客户端运行我们的代码。在你的终端执行: </p>  <pre>  <code class="bash language-bash"> npm开始 </code>  </pre>  <p> 在浏览器中输入http:// localhost:3000。您应该看到简单的博客内容,并能够在SPA模式下快速轻松地浏览页面。  </p>  <p> 继续点击 <code> 查看源代码 </code> 。注意我们的SPA代码也适用于所有机器人。我们得到两全其美!  </p> <h2 id="conclusions">结论 </h2>  <p> 在第一部分中,我们已经开始深入了解React的世界,并且看看我们如何使用它以及Node。 JS,构建一个React通用博客应用程序。  </p>  <p> 如果您希望将您的博客提升到新的水平并知道如何添加和编辑内容,请不要忘记阅读第二部分“构建React通用博客应用程序:实施Flux”。我们将深入研究如何使用React组织概念和 <strong> Flux模式 </strong> 轻松扩展React Universal博客应用程序。  </p>  <p> <em>我们与Open SourceCraft合作为您带来 <strong> 来自React Developers的6个专业技巧 </strong> 。有关更多开源内容,请查看Open SourceCraft Source . JS。他还是Cosmic JS的联合创始人兼首席执行官。在空闲时间,你可以找到他演奏音乐,看电影和电视节目,并与他的妻子和狗在家里闲逛。  </div>  </div>  </div>  </div>  </span>  </span>  </span>  </span>  </p>  </pre>  </pre>  </code>  </html>  </head>  </meta>  </meta>  </meta>  </meta>  </meta>                                                                             
March 1, 2018