在服务器端使用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文件中添加一下代码：
{{ site.title }}{{# page }} | {{ page.title }}{{/ page }} {{{ reactMarkup }}}
查看更多关于学习使用React一步步搭建普通博客应用_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did114523