成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

React學習筆記1：環(huán)境搭建

Sourcelink / 1051人閱讀

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

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

本文的書寫環(huán)境為mac，之后會補充windows下的差異

1、創(chuàng)建學習目錄

mkdir learn
cd learn

2、npm初始化項目

npm init //根據(jù)相關(guān)提示完善信息，入口js文件：src/index.js

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

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

4、創(chuàng)建相關(guān)文件目錄結(jié)構(gòu)

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

5、創(chuàng)建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、創(chuàng)建index.js源文件，書寫經(jīng)典的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、創(chuàng)建index.html承載體文件，引入bundle.js，方便在瀏覽器中運行

touch build/index.html


  
    
    React環(huán)境搭建

9、瀏覽器直接打開index.html，出現(xiàn)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的內(nèi)容，頁面有自動刷新了

OK，到此完成環(huán)境的基本搭建！

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/78519.html

相關(guān)文章

  • 前端相關(guān)大雜燴

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

    fuyi501 評論0 收藏0

  • React 入門學習筆記整理目錄

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

    daryl 評論0 收藏0

  • 在Windows下搭建React Native Android開發(fā)環(huán)境，android開發(fā)mvp模式

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

    番茄西紅柿 評論0 收藏2637

  • 好程序員React精品項目全集：商城管理后臺（視頻+源碼+筆記）

    摘要：今天給大家?guī)砹撕贸绦騿T實戰(zhàn)項目商城管理后臺。配合項目學習會讓你更快掌握它的使用方法下面就來看看好程序員這套實戰(zhàn)項目課程介紹好程序員項目本項目是一個使用開發(fā)的商城系統(tǒng)的管理后臺，里面登錄判斷，接口調(diào)用，數(shù)據(jù)展示和編輯，文件上傳等后臺功能。 眾所周知，項目經(jīng)驗對于一個程序員變得越來越重要。在面...

    李世贊 評論0 收藏0

  • 單頁面博客從前端到后端

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

    whinc 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<