React學習筆記1：環境搭建

時間 2019-12-08

標籤 react 學習筆記環境搭建欄目 React 简体版

原文原文鏈接

本文的書寫環境爲mac，以後會補充windows下的差別node

一、建立學習目錄react

mkdir learn
cd learn

二、npm初始化項目webpack

npm init //根據相關提示完善信息，入口js文件：src/index.js

三、安裝相關react npm包，而且使用es2015（也就是es6支持，須要babel-preset-es2015包），由於我以前作個一些js相關項目，因此部分npm包已經全局安裝，好比webpack等等，你們根據提示補足本身的npm包便可es6

npm install --save react react-dom babel-preset-react babel-preset-es2015 babel-loader

四、建立相關文件目錄結構web

mkdir src   //存放源文件
mkdir build //存放編譯後的js文件

五、建立webpack配置文件（webpack好強大，以後再作詳細的學習）npm

touch webpack.config.js

var path = require('path');
module.exports = {
  entry:[
    './src/index.js'
  ],
  output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
          test: /\.jsx?$/,
          exclude: /(node_modules|bower_components)/,
          loader: 'babel-loader', // 'babel-loader' is also a legal name to reference
          query: {
            presets: ['es2015','react']
          }
        }]
    },
    devServer:{
        contentBase:'./build'
    }
};

六、建立index.js源文件，書寫經典的Hello World！windows

touch src/index.js

var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

七、利用webpack編譯源文件，根目錄下直接運行webpack，運行完成後會在build目錄生成bundle.js文件瀏覽器

$ webpack
Hash: 32a8e736b4323f7ec350
Version: webpack 1.12.9
Time: 1318ms
    Asset    Size  Chunks             Chunk Names
bundle.js  676 kB       0  [emitted]  main
   [0] multi main 28 bytes {0} [built]
    + 159 hidden modules

八、建立index.html承載體文件，引入bundle.js，方便在瀏覽器中運行babel

touch build/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React環境搭建</title>
  </head>
  <body>
    <div id="example"></div>
  </body>
  <script src="bundle.js"></script>
</html>

九、瀏覽器直接打開index.html，出現Hello world！
十、每次修改完成，運行webpack仍是很麻煩的，利用webpack-dev-server能夠完成自動自動編譯，自動刷新瀏覽器

$ webpack-dev-server
http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from ./build
Hash: 67262048da84a36a0a5c
Version: webpack 1.12.9
Time: 1325ms
    Asset    Size  Chunks             Chunk Names
bundle.js  676 kB       0  [emitted]  main
chunk    {0} bundle.js (main) 643 kB [rendered]

瀏覽器進入http://localhost:8080/webpack...輸出Hello world！
webpack的配置指定了webpack-dev-server的根目錄

devServer:{
        contentBase:'./build'
    }

嘗試修改src/index.js的內容，頁面有自動刷新了

OK，到此完成環境的基本搭建！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。