前言
作爲前端現行主流 JS 庫之一，React 受到越來越多的開發者以及項目團隊的青睞。我們可以使用它很高效地開發出一系列前端項目，或者使用 React-native 開發原生應用
上一篇 RN環境搭建，簡單地介紹了一下 React-Native 開發所需要的環境配置。然而想要使用 React-native 進行原生開發，我們就必須先了解 React 的使用。從這一篇開始，我將記錄下來 React 學習的點滴，分享給有需要的小夥伴，也留作筆記
如果文章中有出現紕漏、錯誤之處，還請看到的小夥伴多多指教，先行謝過
以下↓
初識
接觸一種新的技術，在我的學習認知中，首先有這麼三個東西需要先去了解：
- 它是什麼
- 我們可以使用它做什麼
- 它有什麼樣的特點
React 是一個用於構建用戶界面的 JavaScript 庫。主要用於構建 UI ，很多人認爲 Reatc 是 MVC 中的 V（視圖）
我們可以使用 React 高效地開發出一個前端項目，還可以使用 Node 進行服務器渲染，或使用 React-native 開發原生移動應用
React 具有以下特點：
- 聲明式設計
- 組件化：組件化設計，更易複用
- 高效：
React通過對Dom的模擬，最大限度的減少與Dom的交互 - 靈活：可以與已知的框架或庫很好的配合
- JSX：是
js語法的擴展，不一定使用，但建議用 - 單向響應的數據流：
React實現了單向響應的數據流，從而減少了重複代碼，這也是解釋了它爲什麼比傳統數據綁定更簡單
初步瞭解了 React 之後，其實我們現在不必對它的每一個特點去深究，通過一些具體的實例和項目，相信你就會慢慢地瞭解並掌握它
下面，就讓我們一起通過一些具體的實例，去了解 React 中的一些概念吧
準備工作
首先，我們需要創建一個簡單的項目結構，大概是長這個樣子的
-
main.js: 書寫我們的JS邏輯 -
.babelrc: 對React語法以及JSX進行轉義 -
webpack.config.js: 書寫webpack邏輯
我們還需要下載一些項目所必須的依賴：
-
react：React中的核心庫 -
react-dom: 提供與DOM相關的功能 -
babel相關：對react以及JSX語法進行轉義 -
webpack以及webpack-cli：webpack配置相關
對於依賴相關，需要注意的是 babel-loader 最新爲 8.x 版本，與 babel-preset-react 以及 babel-preset-env 版本有衝突，這裏需要使用 7.x 的版本
.babelrc 配置:
至於 webpack 的簡單配置，想要了解的小夥伴可以看一下這裏 webpack基本配置，也可以查看 完整demo
在這裏我們需要添加的地方就是
Round 1
首先，我們不使用 JSX 的方式來創建一個簡單的 react 頁面
React 中提供了 React.createElement() 方法來創建一個 react 元素，然後通過 react-dom 提供的 render 方法將元素渲染到頁面
運行項目，應該可以看到成功的效果了
Round 2
想象一下，如果我們直接使用前面原生的方式去生成 react 元素，對於簡單的嵌套元素來說，前一種方式完全可以滿足我們的需求。但是，當我們的項目元素嵌套比較複雜的時候，雖然也可以通過前一種方式去實現，可以這樣很不直觀，對於我們之後的開發或者維護無疑增加了難度
所以，我們知道了 JSX
JSX，是一個 JavaScript 的語法擴展。我們建議在 React 中配合使用 JSX，JSX 可以很好地描述 UI 應該呈現出它應有交互的本質形式
React 不強制要求使用 JSX，使用 JSX 會在視覺上有輔助作用。它還可以使 React 顯示更多有用的錯誤和警告消息
實際上，JSX 僅僅只是 React.createElement() 函數的語法糖,也就是說，我們所寫的 JSX 最終也會被 React 轉義爲 React.createElement() 的方式
Round 3
我們也可以通過普通函數去創建 react 元素
Round 4
使用普通函數創建 JSX 元素，那麼，如果我們需要進行組件傳遞數據應該怎麼操作呢
Round 5
我們也可以使用 class 去創建一個有狀態的組件,在 class 中的 render 函數中直接使用 this.props 的方式獲取組件傳遞的數據
Round 6
之所以說普通函數創建的組件是無狀態組件，而通過 class 創建的組件是有狀態組件，就是因爲在 class 中 state 的存在
後記
以上就是 React 運行的基本配置以及它當中的一些基礎概念，有興趣的小夥伴可以 點擊這裏查看完整實例 DEMO
關於 React 的內容還有很多很多，感興趣的小夥伴可以關注一波。當然，如果你想了解更多前端問題，也可以點擊這裏，歡迎 star 關注
技術路漫漫，做一個善學者，每天進步一點點