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

mkdir react-universal-blogcd react-universal-blog

{ "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" }}

// 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/ }] }};

          {{{ reactMarkup }}}    

package.jsonpublic |-css |-bootstrap.min.css |-cosmic-custom.css |-js |-jquery.min.js |-bootstrap.min.js |-clean-blog.min.jsviews |-index.htmlwebpack.config.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 =　(  {routes} )const app = document.getElementById('app')render(Routes, app)

// routes.jsimport React, {Component} from 'react'import { Route, IndexRoute, Link} from 'react-router'//Main componentclass App extends Component{ componentDidMount(){ document.body.className='' } render(){ return ( 
React Universal Blog
  { this.props.children } ) }}//Pagesclass Home extends Component{ render(){ return ( 
Home
 Some home page content ) }}class About extends Component { render(){ return ( 
About
 Some about page content ) }}class Work extends Component { render(){ return ( 
Work
 Some work page content ) }}class Contact extends Component { render(){ return ( 
Contact
 Some contact page content ) }}class NoMatch extends Component { render(){ return ( 
NoMatch
 404 error ) }}export default (       )

mkdir publicnpm installnpm run development

// 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() 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.jsrequire('babel/register')require('./app-server.js')

// ..."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"}// ...

npm start