用react編寫一個hello world

時間 2019-12-09

標籤 react 編寫一個 hello world 欄目 React 简体版

原文原文鏈接

我要分享的是用react搭建一個簡單的hello world, 一個小demo, 大神請略過javascript

首先看一下目錄結構html

建立一個目錄, 用於存放demojava

mkdir reactHello
cd reactHello

初始化一個package.json文件 node

npm init

會讓你輸入一些參數, 一直回車就能夠react

安裝必要的依賴包webpack

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
    "start:dev": "webpack-dev-server --progress --colors --host localhost --port 3001 --inline --hot",
    "start:prod": "webpack && node server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "webpack": "^3.1.0",
    "webpack-dev-middleware": "^1.11.0",
    "webpack-dev-server": "^2.5.1"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "webpack": "^3.1.0",
    "webpack-dev-server": "^2.5.1"
  },
  "babel": {
    "presets": [
      "es2015",
      "react"
    ]
  }
}

這個是安裝好的, 你能夠直接把這段代碼拷貝到你的package.json文件中, 讓後執行 npm install 就把全部的依賴都安裝好了web

建立一個dev文件夾,在下面建立 index.jsx文件npm

import React, {Component} from 'react';
import ReactDom from 'react-dom';

class HelloWorld extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>Hello World</div>
        );
    }
}

ReactDom.render(
    <HelloWorld />,
    document.getElementById('container')
);

在根目錄下建立 index.html文件, 做爲項目的入口json

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>React</title>
</head>
<body>
    <div id="container"></div>
</body>
<script type="text/javascript" src="output/index.js"></script>
</html>

配置webpack選項, 用於啓動和打包項目建立webpack.config.js數組

// 引入模塊
var webpack = require('webpack');
var path = require('path');

// 解析目錄地址
var DEV = path.resolve(__dirname, 'dev'); // dev目錄
var OUTPUT = path.resolve(__dirname, 'output'); // output目錄

// 配置
var config = {
    entry: {
        index: [DEV + '/index.jsx'] // 入口配置，支持 string|object|array，具體參考 https://doc.webpack-china.org/configuration/
    },
    output: {
        // webpack 如何輸出結果的相關選項

        path: OUTPUT,
        // 全部輸出文件的目標路徑
        // 必須是絕對路徑（使用 Node.js 的 path 模塊）

        filename: '[name].js',

        chunkFilename: (new Date()).getTime() + '[id].chunk.js',
        // 「入口分塊(entry chunk)」的文件名模板

        publicPath: '/output/'
        // 輸出解析文件的目錄，url 相對於 HTML 頁面
    },
    module: {

        // 加載器
        loaders: [
            {
                include: DEV,
                loader: 'babel-loader'
            }
        ]
    },

    // 插件
    plugins: [new webpack.HotModuleReplacementPlugin()]
};

module.exports = config;

建立server.js文件, 用於啓動項目的服務器

var webpack = require('webpack');
var webpackDevMiddleware = require("webpack-dev-middleware");
var webpackDevServer = require('webpack-dev-server');
var config = require("./webpack.config.js");

// 在入口文件數組中添加兩個選項
// webpack-dev-server/client?http://localhost:3001
// webpack/hot/dev-server
config
  .entry
  .index
  .unshift('webpack-dev-server/client?http://localhost:3001', 'webpack/hot/dev-server');

  // 合併一個 devServer到配置文件
Object.assign(config, {
  devServer: {
    hot: true,
    inline: true
  }
})

// 編譯
var compiler = webpack(config);

// 初始化一個webpack-dev-server
new webpackDevServer(compiler, {
    publicPath: config.output.publicPath,
    historyApiFallback: false,
    stats: {
      colors: true
    }
  }).listen(3001, 'localhost', function (error) {
  if (error) {
    console.error(error);
  }
});