React CheatSheet

如果你是一個react的新手，那么你不得不記住很多語法還有一些react的特殊用法，你需要了解很多react的基礎(chǔ)知識，比如jsx語法，比如生命周期，比如hook的用法，比如組件的值傳遞等等，而通過react cheatsheet這個網(wǎng)站，你就可以方便地查看它們。

React Dev Tools

在開發(fā)原生js的時候，我們經(jīng)常使用瀏覽器自帶的開發(fā)者工具，它足以幫助我們查看和調(diào)試js中變量的各種信息，但是對于react框架來說，因為它是采用動態(tài)渲染生成的代碼結(jié)構(gòu)，因此，我們需要一種可以分析react代碼結(jié)構(gòu)和變量狀態(tài)的工具，而react dev tools 就是這樣的工具，通過安裝這個瀏覽器擴展，我們就可以輕松地分析react框架中各個變量狀態(tài)信息，還可以分析react路由等信息，總之，有了它對于我們調(diào)試我們的react應(yīng)用將會起到巨大的作用，幾乎是開發(fā)調(diào)試react的必備應(yīng)用。

React Sight

這也是一個瀏覽器擴展，它需要你在安裝上面的react dev tools擴展之后才能使用。安裝它之后，你能夠看到一個可視化的界面，通過它你可以讓您直觀地看到應(yīng)用程序的結(jié)構(gòu)。

Bundle Analyzer

當(dāng)我們對我們的應(yīng)用進行打包的時候們，我們總是希望我們的應(yīng)用越小越好，bundel analyzer能夠分析出各個插件，各個模塊占用空間的大小，方便我們對它進行優(yōu)化。

useHooks

Hooks是 React 中的新增功能，可讓我們在不編寫類的情況下使用狀態(tài)和其他 React 的功能。對于鉤子如何使用很多人還不是很理解，不過這沒關(guān)系，有人已經(jīng)總結(jié)了很多關(guān)于鉤子的使用方式，并且提供了詳細的案例幫助我們理解，你只需要訪問usehooks這個網(wǎng)站就可以查看并使用它們。

Storybook

Storybook 是一個開源工具，用于獨立構(gòu)建 UI 組件和頁面。它簡化了 UI 開發(fā)、測試和文檔編制。Storybook 是一個強大的前端工作室環(huán)境工具，它允許團隊設(shè)計、構(gòu)建和組織 UI 組件而不會被業(yè)務(wù)邏輯和管道絆倒。編寫一次story，然后重用它們來支持自動化測試。Storybook 讓我們能夠輕松地將技術(shù)文檔包含在我們的設(shè)計系統(tǒng)中，從而使開發(fā)組件變得更加簡化。

Formik

表單處理是網(wǎng)頁開發(fā)經(jīng)常會遇到的問題，而Formik是一個可以在React中構(gòu)建表單的組件。它是一個小型庫，可以讓表單的各個狀態(tài)都能被保存，對于錯誤的處理和表單的驗證，它都提供了非常友好的處理方式，可以說它就是專門為表單處理而誕生的。

ESLINT

ESLint是一個靜態(tài)分析工具，它可以非?？焖俚锥ㄎ话l(fā)現(xiàn)項目代碼中的問題，并且可以自動修復(fù)大部分問題。它采用語法感知技術(shù)，不會在修改的時候引入其它的錯誤。

ESLint內(nèi)置了許多預(yù)處理規(guī)則，可以讓你在幾乎零配置的情況下處理大部分問題，當(dāng)然，你也可以自定義規(guī)則，讓ESLint按照你的方式處理代碼。

React Hot Loader

React Hot Loader 是一個熱重載插件，它允許 React 組件在不丟失狀態(tài)的情況下實時重新加載。

它與支持熱模塊替換 (HMR) 和 Babel 插件的 Webpack 和其他打包器一起使用。通過使用它，可以讓你的開發(fā)效率得到大大提升。

總結(jié)

react是一個非常強大的UI框架，無論是它的聲明式語法，還是組件化的封裝，都讓它變得越來越受歡迎，一次學(xué)習(xí)，多端運行更是讓你可以體會到它的強大，多學(xué)習(xí)一門技能總是沒有錯誤的，特別是像react這種被眾多大廠認可的框架。