react webpack專案實際開發應用

2022-09-11 10:09:14 字數 2892 閱讀 2294

1.知其然不知其所以然,你只會了jsx語法,卻只能照貓畫虎,卻不知道react背後的基礎知識,如果你連jsx最後會編譯成js都不知道,或者編譯成的js都讀不懂,那更不用談靈活擴充套件和開發了。

2.乙個專案要想開發出來僅僅需要只知道react還需要知道很多知識,比如現在很多教程和專案都是webpack構建打包的,如果你不會webpack那麼,你甚至連基礎的開發環境都配置不出來。當然還有很多react和react周邊的知識,單純乙個hello word 或者 幾個函式和語法的使用介紹是搞不定的。

​ 至少你需要知道一下知識,才能順利的完成乙個完整的專案:

​ 首先是關於react的:

​ 1.jsx語法

​ 2.狀態

​ 3屬性

​ 4.元件

​ 5.元件生命週期

​ 6.事件

​ 然後是基礎工作:

​ es6

​ bebel編譯

​ webpack

​ 然後是資料互動和儲存和常用的功能

​ 1.路由

​ 2.資料互動

​ 3.資料持久化

3.日常我們看例子的時候很多是「套件化」,很多人都是用 react+flux等,一旦你不用你就不會了,還有人使用

引入link方式開發react,還有人npm去安裝,還有人用wepack各種技術組合亂七八糟,五花八門,加上技術更新快

很多例子都跑步起來了在新的語法下,即使老的很多時候不得不面對網路fq的問題。

​ 針對這些問題,我分三部分去說,

​ 1.es6基礎知識

​ 箭頭函式

​ class

​ 模組匯入匯出

​ 解釋下jsx編譯後成js的**的原理和意思。

​ 入門的react小例子

​ 2.react生產環境 注意是生產不是開發,區別在於是實際專案而不是演示,兩者不同。

​ npm搭建環境

​ webpack使用

​ bebel的使用

​ react路由

​ react熱插拔

​ 元件巢狀和資料傳遞

​ 3.資料互動與持久化

​ 這裡的es6知識並不是告訴你準確的東西,而是讓你在一分鐘之內了解es6,讓你順利的學習react,而不是耗費精力在細枝末節上,當然es6絕對是重中之重,理解react的必備,但是這個教程是讓你迅速上手出活,而不是教你原理。

直接上es6對比es6

​ let ->var

​ const ->var 當時不能改,常量

​ import 相當於 src

​ class es5裡面的 物件

​ arr.map函式

​ 箭頭函式 直接說

([param] [, param]) => 

param => expression

() => // 零個引數用 () 表示;

x => // 乙個引數可以省略 ();

(x, y) => // 多引數不能省略 ();

好,我們繼續回到正題,模組化的使用react,前面我們使用過引用react庫的方式,而實際專案中更常見的方式是我們通過npm/yarn等,管理專案功能和模組,不多說我們還是從乙個最簡單的hello world開始。

直接上安裝react和相關環境,

cd hello-world

npm start

注意,很多教程是從webpack, babel and eslint等配置開始的,其實不用,上面的工作其實就是幫你配置這些,當然了,你如果能夠了解如何配置更好,但是現在是學react所以我盡量不引人新知識,想讓大家會用。

注意這個是開發過程,如果是上線 使用命令

npm runbuild 最後會將上線檔案放到 build資料夾下

render()

}我們對比一下之前函式的寫法

reactdom.render(

hello, world!h1>,

document.getelementbyid('root')

);

注意:推薦大家使用第一種寫法,為什麼?因為第一種寫法有狀態,函式的寫法沒有。後面我們會說為什麼。

2.下面我們說下,在react中的屬性使用

render()

}reactdom.render(

document.getelementbyid('div1');

);3.下面說一下個對應第乙個第一篇文章的狀態管理。先看**

constructor();

}update(e));

}render() />

);}

}

import react,  from 'react';

constructor();

this.update = this.update.bind(this);

}update(e));

}render() update= />

this.state.txt} update= />

this.state.txt} update= />

);}

}const widget = (props) => />

);}

5.作為例子肯定少不了列表迴圈

constructor(),,,

]};

}render() data = />

});return (

rowsli>

ul>

);}

}const personrow = (props)=>-----li>

);}三、實際專案生產環境搭建

四、webpack的配置和使用

五、react 模組路由 元件巢狀等。

六、資料互動和持久化

React webpack模組組織關係

現代前端開發離不開打包工具,以 webpack 為代表的打包工具已經成為日常開發必備之利器,拿 react 技術棧為例,我們 es6 形式的源 需要經過 webpack 和 babel 處理,才能生成發布版檔案,在瀏覽器中執行。今天就結合 react 來梳理一下 webpack 打包時模組的組織結構...

distribute crawler專案實戰

使用pip安裝 pip install scrapyubuntu 軟體包sudo apt keyadv keyserver hkp keyserver ubuntu com 80 recv 627220e7 echo deb scrapy main sudo tee etc apt sources....

react webpack中js和css的引入

今天,打算寫第乙個頁面,結果遇到了些阻力,沒有想象的那麼簡單,有些特定的配置,還有元件的引用,還有css和js的載入模式。在index.js裡面引入元件模組 reactdom.render document.getelementbyid root 注意格式,index.html和之前的一樣 保留的 ...