402 react hello hosted - qianxueseng-com/guides GitHub Wiki

部署一个React hello

课前要求

  • 基本的javascript知识

知识点

  • npm，包括npm install --save和npm install --save-dev和利用package.json配置npm的命令行
  • 基本命令行操作
  • babel，从JSX转到普通的javascript
  • browserify，在浏览器中实现require

要点

  • 把jsx转换为javascript
  • 把React连到DOM上
  • 部署到服务器上

安装React和React-dom

npm install react react-dom --save

JSX转换为javascript

  • 利用babel
npm install babel-cli --save-dev 
npm install babel-plugin-transform-react-jsx --save-dev
 ./node_modules/.bin/babel --plugins transform-react-jsx public/js/main.js  > public/js/bundle.js

把这个命令设置为一个可以快速运行的快捷键，在package.json中写成这样

  "scripts": {
    "start": "node server.js",
    "babel": "./node_modules/.bin/babel --plugins transform-react-jsx public/js/main.js  > public/js/bundle.js"
  },

需要修改我们的index.html，把main.js改成bundle.js

    <script src="js/bundle.js"></script>

需要处理module系统，引入browserify，并加入package.json

npm install browserify --save-dev

再次把这个命令设置为一个可以快速运行的快捷键，在package.json中写成这样

  "scripts": {
    "start": "node server.js",
    "babel": "./node_modules/.bin/babel --plugins transform-react-jsx public/js/main.js  > public/js/bundle.js",
    "browserify": "./node_modules/.bin/browserify public/js/bundle.js  > public/js/bundle-final.js"
  },

再次修改index.html，改成

    <script src="js/bundle-final.js"></script>

最后把这两个命令合成一个，修改package.json为

  "scripts": {
    "start": "node server.js",
    "babel": "./node_modules/.bin/babel --plugins transform-react-jsx public/js/main.js  > public/js/bundle.js",
    "browserify": "./node_modules/.bin/browserify public/js/bundle.js  > public/js/bundle-final.js",
    "build": "npm run babel && npm run browserify"
  },

大功告成，以后只需要

npm run build
lean up
lean deploy
Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️