reactjs放cdn,react 動態載入js

本文目錄一覽：

• 1、React.js 究竟解決了什麼問題
• 2、next.js cdn部署
• 3、react視頻播放器組件
• 4、create-react-app腳手架項目打包CDN部署
• 5、如何評價 React 實現的前端 UI 庫 material-ui

React.js 究竟解決了什麼問題

React

通常和其他的

JavaScript

框架同時被提及，但是說「React

對比

Angular」卻講不通，因為它們之間是不可比較的。Angular

是一個完整的框架（包括一個

view

層），React

卻並不是。這也是

React

很難於理解的原因，它雖然抽離自一個具備完整框架的生態系統中，但僅僅是一個

view

層。

React

提供了模板語法以及一些函數鉤子用於基本的

HTML

渲染。這就是

React

全部的輸出——HTML。你把

HTML

/

JavaScript

合到一起，被稱為「組件」，允許把它們自己內部的狀態存到內存中（比如在一個選項卡中哪個被選中），不過最後你只是吐出

HTML。

next.js cdn部署

文檔

打包命令中指定環境 REACT_APP_ENV

next.config.js 文件

一種實現方式

在 next.config.js 中添加 env 配置

在需要的地方

next.js官網

react視頻播放器組件

通過NPM安裝視頻反應和對等依賴項

npm install–save video-react react react-dom redux

link rel=”stylesheet” href=”” /(在index.html引入)

import React from ‘react’;

import {Player} from ‘video-react’;

export default (props) = {

         return(

              Player

                   playsInline

                       src=””

               /

          );

   };

如果無法解決你的問題請進入一下鏈接看是否能有所幫助：

create-react-app腳手架項目打包CDN部署

因為react項目多為SPA項目，用於生產部署時，存在首屏響應過慢導致用戶難以忍受等待時間從而流失問題。一般導致首頁響應過慢的原因有很多，網路問題是其中之一。本文記錄通過七牛雲免費CDN部署react項目。

1.create-react-app創建react項目,並啟動項目。

2.項目打包。

此時如果只是普通部署，不要求體驗效果時，把build文件下的文件拷貝到靜態伺服器即可。

接下來考慮如何靜態文件CDN部署。

3.修改webpack文件，打包文件的引用路徑省車過為CDN路徑。

     1. config文件夾下paths.js（修改pathname為cnd的域名）

    2. config文件夾下webpack.config.js 修改output文件名，使用絕對路徑。

修改後重新打包，發現index.html中引入css,js的路徑皆改成cdn路徑。

附加: 上傳打包文件至七牛雲CDN。（upload.js）

如何評價 React 實現的前端 UI 庫 material-ui

非常厲害，做一些功能為主，不需要過多品牌調性的 WebApp

只需要前端+交互就可以快速構建做出非常不錯的產品

（icon還是有點點難度，有設計比較專業的人員跟著做產品的質量會更加「產品級」一些）

框架用了很多 MD 的視覺元素，但是還是只是「看著像」，交互，動畫世界觀之類的實現距離最理想的 MD 還是有差距，不過基本感覺可以忽略不計。

非要挑刺的話，就是 Menu 部分的動畫設計感覺有點粗糙，做得不夠好（MD 的世界觀，所有東西的誕生都是「擴散」出來，而不是「縮放」出來的，還有就是先「慢_快」的緩動做得還是差一點點）