React CheatSheet

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

React Dev Tools

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

React Sight

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

Bundle Analyzer

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

useHooks

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

Storybook

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

Formik

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

ESLINT

ESLint是一個靜態分析工具，它可以非常快速底定位發現項目代碼中的問題，并且可以自動修復大部分問題。它采用語法感知技術，不會在修改的時候引入其它的錯誤。

ESLint內置了許多預處理規則，可以讓你在幾乎零配置的情況下處理大部分問題，當然，你也可以自定義規則，讓ESLint按照你的方式處理代碼。

React Hot Loader

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

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

總結

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