React學習筆記1：環境搭建

Sourcelink 發布于2019-08-19 17:26 / 993人閱讀

摘要：新搭建的個人博客，本文地址學習筆記環境搭建本文的書寫環境為，之后會補充下的差異創建學習目錄初始化項目根據相關提示完善信息，入口文件安裝相關包，并且使用也就是支持，需要包，因為我之前做個一些相關項目，所以部分包已經全局安裝，比如等等，大家

新搭建的個人博客，本文地址：React學習筆記1：環境搭建

本文的書寫環境為mac，之后會補充windows下的差異

1、創建學習目錄

mkdir learn
cd learn

2、npm初始化項目

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

3、安裝相關react npm包，并且使用es2015（也就是es6支持，需要babel-preset-es2015包），因為我之前做個一些js相關項目，所以部分npm包已經全局安裝，比如webpack等等，大家根據提示補足自己的npm包即可

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

4、創建相關文件目錄結構

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

5、創建webpack配置文件（webpack好強大，之后再做詳細的學習）

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"
    }
};

6、創建index.js源文件，書寫經典的Hello World！

touch src/index.js

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

ReactDOM.render(
  Hello, world!,
  document.getElementById("example")
);

7、利用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

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

touch build/index.html



  
    
    React環境搭建

9、瀏覽器直接打開index.html，出現Hello world！
10、每次修改完成，運行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，到此完成環境的基本搭建！

云服務器 GPU云服務器學習筆記搭建云筆記學習筆記一基礎學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78519.html

前端相關大雜燴

摘要：希望幫助更多的前端愛好者學習。前端開發者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實踐譯者張捷滬江前端開發工程師當你問起有關與時，老司機們首先就會告訴你其實是個沒有網絡請求功能的庫。前端基礎面試題(JS部分) 前端基礎面試題(JS部分) 學習 React.js 比你想象的要簡單原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 評論0 收藏0
React 入門學習筆記整理目錄

摘要：入門學習筆記整理一搭建環境入門學習筆記整理二簡介與語法入門學習筆記整理三組件入門學習筆記整理四事件入門學習筆記整理五入門學習筆記整理六組件通信入門學習筆記整理七生命周期入門學習筆記整理八入門學習筆記整理九路由React 入門學習筆記整理（一）——搭建環境 React 入門學習筆記整理（二）—— JSX簡介與語法 React 入門學習筆記整理（三）—— 組件 React 入門學習筆記整理（...

daryl 2019-04-23 11:57 評論0 收藏0
在Windows下搭建React Native Android開發環境，android開發mvp模式

摘要：在這個過程中可能會出現一些問題，導致失敗你沒有配置需要再系統變量中加入這個，指到目錄。所以面試沒有其他的訣竅，只看你對這些知識點準備的充分程度。本文已被開源項目學習筆記總結移動架構視頻大廠面試真題項目實戰源碼收錄在這個過程中可能會出現一些問題，導致build失敗： 1. 你沒有配置ANDROID_HOME,...

番茄西紅柿 2021-11-29 10:50 評論0 收藏2637
好程序員React精品項目全集：商城管理后臺（視頻+源碼+筆記）

摘要：今天給大家帶來了好程序員實戰項目商城管理后臺。配合項目學習會讓你更快掌握它的使用方法下面就來看看好程序員這套實戰項目課程介紹好程序員項目本項目是一個使用開發的商城系統的管理后臺，里面登錄判斷，接口調用，數據展示和編輯，文件上傳等后臺功能。眾所周知，項目經驗對于一個程序員變得越來越重要。在面...

李世贊 2021-11-11 16:55 評論0 收藏0
單頁面博客從前端到后端

摘要：說到底，當自己獨自開發從搭建開發環境，到前端的每一個組件，到動作交互，再到和后端的數據交互，難免遇到不少問題。單頁面博客從前端到后端基于和的權限驗證與的設計引入來實現富文本編輯器是開源的用于構建富文本編輯器的框架。不會后端的前端，不會寫單頁面應用... 單頁面應用的概念已經被提出很長時間了，無論是基于 vue, angular 還是 react，相信大家或是耳濡目染，或是設身處地都有...

whinc 2019-08-20 17:20 評論0 收藏0