成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Sourcelink / 995人閱讀

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

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

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

1、創(chuàng)建學(xué)習(xí)目錄

mkdir learn
cd learn

2、npm初始化項(xiàng)目

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

3、安裝相關(guān)react npm包，并且使用es2015（也就是es6支持，需要babel-preset-es2015包），因?yàn)槲抑白鰝€(gè)一些js相關(guān)項(xiàng)目，所以部分npm包已經(jīng)全局安裝，比如webpack等等，大家根據(jù)提示補(bǔ)足自己的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好強(qiáng)大，之后再做詳細(xì)的學(xué)習(xí)）

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編譯源文件，根目錄下直接運(yùn)行webpack，運(yùn)行完成后會(huì)在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，方便在瀏覽器中運(yùn)行

touch build/index.html


  
    
    React環(huán)境搭建

9、瀏覽器直接打開(kāi)index.html，出現(xiàn)Hello world！
10、每次修改完成，運(yùn)行webpack還是很麻煩的，利用webpack-dev-server可以完成自動(dòng)自動(dòng)編譯，自動(dòng)刷新瀏覽器

$ 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]

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

    devServer:{
        contentBase:"./build"
    }

嘗試修改src/index.js的內(nèi)容，頁(yè)面有自動(dòng)刷新了

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/78519.html

相關(guān)文章

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

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

    fuyi501 評(píng)論0 收藏0

  • React 入門學(xué)習(xí)筆記整理目錄

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

    daryl 評(píng)論0 收藏0

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

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

    番茄西紅柿 評(píng)論0 收藏2637

  • 好程序員React精品項(xiàng)目全集：商城管理后臺(tái)（視頻+源碼+筆記）

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

    李世贊 評(píng)論0 收藏0

  • 單頁(yè)面博客從前端到后端

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

    whinc 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<