Configure create-react-app with the static Babel page from the previous chapter.

The directory structure

Depend on the configuration

package.json

{
  "name": "react_ssr"."version": "0.1.0 from"."private": "true"."dependencies": {
    "babel-node": "0.0.1 ws-security"."babel-plugin-transform-decorators-legacy": "^ 1.3.5." "."babel-preset-env": "^ 1.7.0"."babel-preset-react": "^ 6.24.1"."express": "^ 4.16.4"."react": "^ 16.6.3"."react-dom": "^ 16.6.3"."react-scripts": 2.1.1 ""
  },
  "devDependencies": {
    "cross-env": "^ 5.2.0." "
  },
  "scripts": {
    "server": "cross-env NODE_ENV=test nodemon --exec babel-node src/server.js"."start": "react-scripts start"."build": "react-scripts build"."test": "react-scripts test"."eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browsersList": [
    "0.2%" >."not dead"."not ie <=11"."not op_mini all"]."browserslist": [
    "0.2%" >."not dead"."not ie <= 11"."not op_mini all"]}Copy the code

.babelrc

{
    "presets": [
        "env"."react"]."plugins": [
        "transform-decorators-legacy"]}Copy the code

Page rendering

/src/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>.document.getElementById('root'));Copy the code

/src/App.js

import React, { Component } from 'react'
export default class App extends Component {
    sayHello(){
        alert('Hello! ')}render() {
        return (
            <div>
                <button onClick={this.sayHello}>hello</button>
            </div>)}}Copy the code

/src/server.js

import express from 'express'
import App from './App'
import React from 'react'
import {renderToString} from 'react-dom/server'
import fs from 'fs'
var app=express()
app.get('/'.function(req,res){
    const html=fs.readFileSync('./build/index.html')
    const content=renderToString(<App/>)
    res.send(html.toString().replace(`<div id="root"></div>`.`<div id="root">${content}</div>`))
})
app.use('/',express.static('build'))
app.listen(3002.function(){
    console.log('listening on 3002! ')})Copy the code

Finally, NPM Run Server starts the server

If there are changes in APP components, you need to rebuild and start the server again with NPM Run Server. Script tags will be added compared to the previous version.

The configuration varies depending on the way state and function representations are written, but the above is used when state is written in constructor.

If state is written outside, install @babel/plugin-proposal-class-properties and modify.babelrc

{
  "presets": ["@babel/preset-env"."@babel/preset-react"]."plugins": ["@babel/plugin-proposal-class-properties"]}Copy the code

The following state syntax is ES7 syntax and is not supported by browsers at present. You need to install @babel/plugin-proposal-class-properties and configure it in plugins in. Babelrc.

import React from 'react'
export default class App extends React.Component {
  state = {
    count: 0
  }

  render() {
    return <div>{this.state.count}</div>}}Copy the code