react環境搭建教程（圖文）

時間 2019-11-07

標籤 react 環境搭建教程圖文欄目 React 简体版

原文原文鏈接

首先安裝node.js。

windows或mac系統的用戶能夠直接去官網下載安裝包，linux（ubuntu）用戶能夠到官網下載源碼進行配置。html

安裝好以後，打開shell（windows下win+r 輸入cmd回車）。輸入node

node -v

結果如上圖所示表示安裝成功。react

配置React環境（webstorm IDE）

1.新建空項目(file>new>project)

2.打開終端（view>Tool Windows>Terminal）

注意這裏（webstorm）終端和windows下進入當前路徑的shell是同樣的linux

3.初始化React項目

3.1 react初始化（init）webpack

3.2 回車進行默認配置。is this ok？（yes） y 回車web

3.3以後該項目根目錄會出現項目的基本信息package.json文件shell

4.安裝依賴文件

4.1 安裝react、react-domnpm

npm install react react-dom --save

4.2 安裝 babel-core、babel-loader、babel-preset-es201五、babel-preset-reactjson

npm install babel-core babel-loader babel-preset-es2015 babel-preset-react

4.3 安裝 webpack-dev-serverubuntu

npm install webpack-dev-server --save-dev

5.手動建立如下文件和目錄

5.1 webpack.config.js

module.exports = {
    entry:"./src/index.js",
    output:{
        path:"./dist/",
        filename:"bundle.js"
    },
    devServer:{
        inline:true,
        contentBase:'./dist',
        port:333
    },
    module:{
        loaders:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                loader:'babel',
                query:{
                    presets:['es2015','react'],
                }
            }
        ]
    }
};

5.2 dist文件夾和index.html文件

5.2.1 dist文件夾

5.2.2 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">loading</div>
    <script src="bundle.js"></script>
</body>
</html>

5.3 src文件夾和index.js

5.3.1 src文件夾

5.3.2 index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <div>hello world</div>,
    document.getElementById("app")
);

6.最後兩步

6.1 將package.json中添加以下代碼（把 "test":"..."刪除）

"start":"webpack-dev-server"

6.2 運行項目(開始有點慢，喝杯咖啡舒展舒展~~~)

npm start

6.3 運行成功，打開瀏覽器訪問 localhost:333

總算OK了，

---------------------------如下是npm start 出現錯誤的狀況及解決辦法-------------------

1.npm start運行出錯（以下圖）

2.解決辦法

npm i -項目所在的磁盤符號 webpack

//我這裏是G盤
npm i -G webpack

3.npm start(恢復正常）

(若是以上仍是沒能解決，能夠從新安裝webpack,由於上面的報錯表明該react項目中的node_modules中缺乏webpack工具的依賴)

1. "cnpm install webpack" , // 在該項目中安裝webpack

【雖然個人node裏面全局安裝過webpack,可能要去react項目中配置也行。】

2."cnpm start" //開啓服務跑項目

後面命令會提示使用333端口訪問 localhost:333/ ,而且是熱加載，每次作修改，打開頁面都是自動load加載。

相關標籤/搜索

每日一句

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