【教學】如何開始React網頁最簡單的方式

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

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

Javascript 如何從fetch返回Promise取到[[PromiseValue]]值

如下將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);
}

Laravel 5 使用 ReactJS 開發設定

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

React Router 4子路由使用Layout設定

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

react-router 4 index路由始終處於active狀態

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.js + <canvas>

react+canvas

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

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

一探究竟了解React-router 4簡易教學

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

很多剛使用react的同學,在接觸到react-router的時候往往開始會比較無概念,都會很難進入狀況,什麼react-routerreact-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'));

© UCAMC. All rights reserved.
Powered by CITIAR.