A JavaScript library for building user interfaces
用於構建用戶界面的 JavaScript 庫。
React 是 facebook 官方所維護的開放原始碼 JavaScript 函式庫，可以降低互動式網頁應用程式開發難度，自動處理各種複雜 UI 組件與資料間的連動關係，改善應用程式執行效能。

使用React這套 JavaScript 函式庫，可以很有效率的開發前端互動式網頁應用，且是許多開源來自世界的社群開發者都在使用，並發展了許多好的 plugins 模組等，所以很多東西都不用自行再造輪子，只要懂得怎麼使用，你可以很快的製造好一台跑車。當然 React 也解決了許多前端開發的痛，讓網頁設計真的可以達到前後端分離，不管你的後端使用的是什麼語言，前端只有 Javascript、CSS、HTML，任何的資料請求都經由 AJAX ，你完全拋離了過去靠著使用者請求 Server，Server 在 render 出網頁的方式，這說明了網頁可以做出互動性高的應用。

如下將fetch寫成函數，返回值時會發現，控制台顯示我的數據Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]，這樣的方式要如何取得資料來應用呢?。

將提取api fetch寫成函式調用

function apiGetAll (api) {
    return fetch(api, {
        headers: { "content-type": "application/json" }
    })
        .then(response => response.json().then(json => ({ json, response })))
        .then(({ json, response }) => {
            if (!response.ok) {
                return Promise.reject(json);
            }

            return json;
        })
        .then(response => response, error => error);
}

在這篇文章中，我想與大家分享如何在 PHP Laravel 框架中使用 react js 建置開發環境。在這個例子中，您可以學習如何為 laravel reactjs 應用程序構建設置。

再過去版本中可使用IndexRoute作為設定首頁進入點，但在React Router 4設定上有所改變，全都使用Route，而需要設定為首頁加入exact屬性。在Layout方面本來使用Route帶入元件，在React Router 4直接使用react元件，如下在Layout元件中使用this.props.children顯示子路由。

react-router 4中NavLink可加入activeClassName='active'屬性，使得選單在切換時class加入active，可對這個active class寫css style樣式，達到選單切換的效果。

設定成以下，to="/"表示index首頁，但是他都會一只處於active狀態，並不會因為像切換其他的選單而改變。

<NavLink activeClassName='active' to="/">
   Home
</NavLink>

React.js + <canvas>

我們有React，它可以幫助我們處理大量的可變DOM。

但想描述一種使用React的方法，它可以幫助您處理“<canvas>元素？是的，這聽起來很奇怪。但它運作得很好。

介紹

SheetJS js-xlsx 是一款能夠讀寫Excel的.xls、.xlsx格式表格的插件，瀏覽器支持良好，並且能在多個平台上使用，目前在github上有12602個star，在這邊的範例主要使用React，再加上SheetJS js-xlsx及react-input-files，讓你一個按鈕，簡單的實現直接選檔上傳。

React-router和React-router-dom的選擇

很多剛使用react的同學，在接觸到react-router的時候往往開始會比較無概念，都會很難進入狀況，什麼react-router和react-router-dom？下面我們就來一探究竟。

React-router

React-router提供了一些router的核心api，包括Router, Route, Switch等，但是它沒有提供dom操作進行跳轉的API。

React-router-dom

React-router-dom提供了BrowserRouter, Route, Link等API，我們可以通過dom的事件控制路由。
例如點擊一個按鈕進行跳轉，大多數情況下我們是這種情況，所以在開發過程中，我們更多是使用React-router-dom。

使用npm安裝如下:

npm i react-router-dom --save

React-router-dom的核心用法

HashRouter和BrowserRouter

它們兩個是路由的基本，就像蓋房子必須有地基一樣，我們需要將它們包裹在最外層，我們只要選擇其一就可以了。現在講它們的不同：

HashRouter

如果你使用過react-router2或3或者vue-router，你經常會發現一個現象就是url中會有個#，例如localhost:3000/#，HashRouter就會出現這種情況，它是通過hash值來對路由進行控制。如果你使用HashRouter，你的路由就會默認有這個#。

這就是HashRouter的使用情況。下面是對應的代碼。

ReactDOM.render(
    <HashRouter>
        <Route path="/" component={home}></Route>
    </HashRouter>
),document.getElementById('root'));

react提出一種Refs概念，使用這個方法，我們就可以抓取到react裡面的DOM元素，那hooks該如何使用Refs呢？

useRef

語法

const refContainer = useRef(initialValue);

this.props.history.push

在導航時，您可以將傳遞道具傳遞給歷史對象

this.props.history.push({
    pathname: '/template',
    search: '?query=abc',
    state: { detail: response.data }
})