使用 create-react-app 構建 react應用程式流程及開發注意點
一.瞭解
1.什麼是React.js
React.js 是 Facebook 推出的一個用來構建使用者介面的 JavaScript 庫。
React 中,把一切東西都看成元件,而且所有元件有其狀態。什麼是狀態?簡單來說,一個元件有多種有限的狀態,但同時只能是一種狀態,不過條件處罰就會變成另一種狀態。學術上叫有限狀態機。React.js 是一個新興的 JavaScript 庫,有很多經典的思想值得我們學習。
2.什麼是create-react-app
Facebook 官方推出Create-React-App腳手架,基本可以零配置搭建基於webpack的React開發環境,內建了熱更新等功能。
二.安裝
(1).安裝node環境
怎麼搭建react的環境呢?要搭建react的環境需要藉助node.js的npm的包管理器,所以先去看下NodeJS、NPM安裝配置步驟。
(2).安裝react專案
1.安裝create-react-app
npm install -g create-react-app /* 安裝create-react-app,建議使用cnpm */
2.找到建立專案的目錄 :e盤 cd ylz_project
create-react-app myreact /* 使用命令建立應用,myreact為專案名稱 */
注意:有可能遇到問題
npm 版本低 導致一些操作有問題,所以需要更新最新版本
①這時只要
使用 npm install -g [email protected] 更新下npm,之後使用管理執行npm 重新試下就ok了。如果npm install -g [email protected]報錯的話,執行cnpm install -g [email protected] 更新下npm
②或是設定npm代理,執行命令
npm config set registry http://registry.cnpmjs.org
再從重新建立專案:
create-react-app myreact
3.找到專案:
cd myreact
4.啟動專案:npm start
專案結構
三.谷歌--React開發者工具
安裝React Developer Tools
四.專案部署
1.顯示webpack配置
生成專案後,腳手架為了“優雅”... ...隱藏了所有的webpack相關的配置檔案,此時檢視myreact資料夾目錄,會發現找不到任何webpack配置檔案。執行以下命令:
npm run eject
再檢視myreact資料夾,可以看到完整的專案結構:
2.安裝scss的依賴
①找到專案:npm install sass-loader node-sass --save-dev
②在config檔案中找到webpack-config-dev.js和webpack-config-prod.js檔案
{
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader'],
}
exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/, /\.scss$/],
安裝less-loader
和 less
npm install less-loader less --save-dev
修改webpack配置
修改 webpack.config.dev.js 和 webpack.config-prod.js 配置檔案
改動1:
/\.css$/ 改為 /\.(css|less)$/,, 修改後如下:
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.(css|less)$/,
/\.json$/,
/\.bmp$/,
/\.gif$/,
/\.jpe?g$/,
/\.png$/,
],
改動2:
test: /\.css$/ 改為 /\.(css|less)$/
test: /\.css$/ 的 use 陣列配置增加 less-loader
修改後如下:
{
test: /\.(css|less)$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
{
loader: require.resolve('less-loader') // compiles Less to CSS
}
],
},
3.安裝 ant design和ant-mobile
①找到專案執行:npm install antd --save npm install antd-mobile --save
②然後在元件頁面中引入
import { DatePicker } from 'antd';//這樣引用直接就會有css
class App extends React.Component {
render() {
const user = '表單處理';
return (
<div>
<h1>{user}!</h1>
<DatePicker/>
</div>
);
}
}
export default App;
注意
以下的操作是按需載入,ant design 需要以下操作 css才可以自動出來,而antd-mobile 需要引入css (import 'antd-mobile/dist/antd-mobile.css')
就是在package.json裡面直接新增這行程式碼。當然前提也是需要先安裝依賴:cnpm install babel-plugin-import --save
"plugins": [
["import",{ "libraryName": "antd","style": "css"}]
]
4.安裝 redux 和 react-redux、
①找到專案執行:npm install --save redux react-redux
npm install redux-thunk --save-dev
redux是本地資料庫使用,react-redux幫助你完成資料訂閱,redux-thunk可以放你實現非同步action,redux-logger是redux的日誌中介軟體。
②引用
import { createStore ,applyMiddleware} from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';//是中介軟體
import reducer from './reducer';//自己reducer檔案裡面的index.js 來計算state的值
//1.新建store
const store = createStore(reducer,applyMiddleware(thunk));
ReactDOM.render(
<Provider store={store}>
</Provider>
,
document.getElementById('root')
);
5.安裝 React-router4
①找到專案執行:npm install react-router-dom --save
②引入
import {BrowserRouter,Route,Link} from 'react-router-dom' //需要什麼元件就引用什麼
6.引入css
require('./assets/css/App.css');
7.登出
{/*Switch只渲染第一路由 它的子路由是不渲染的*/}
8.引入圖片
import logos from '../../assets/images/logos.png';//src/assets
render() {
return (
<img alt="logo" src={logos} />
)
}
9.元件屬性型別檢測 prop-types
(1).安裝prop-types模組
npm install --save prop-types
(2).引用
import PropTypes from 'prop-types';
加上isRequired表示是必填的
static propTypes = {
name: PropTypes.string.isRequired,//檢測字串
age:PropTypes.number.isRequired,//檢測數字
user:PropTypes.object.isRequired,//檢測物件
num:PropTypes.array.isRequired,//檢測陣列型別
bool:PropTypes.bool.isRequired//檢測布林型別
fu: PropTypes.func.isRequired,//檢測函式(Function型別)
Symbol: PropTypes.symbol.isRequired//ES6新增的symbol型別
}
10.由於瀏覽器相容問題---babel-polyfill
ie10以下有些es6函式不支援:語法相容性問題
所以需要安裝:babel-polyfill(Babel是一個廣泛使用的轉碼器,可以將ES6程式碼轉為ES5程式碼)
安裝命令----cnpm install --save babel-polyfill
引用的時候:
import 'babel-polyfill';
// 或者
require('babel-polyfill');
相關推薦
使用 create-react-app 構建 react應用程式流程及開發注意點
一.瞭解 1.什麼是React.js React.js 是 Facebook 推出的一個用來構建使用者介面的 JavaScript 庫。 React 中,把一切東西都看成元件,而且所有元件有其狀態。什麼是狀態?簡單來說,一個元件有多種有限的狀態,但同時只能是一種狀態,不
create-react-app 構建 react應用程式 (一)(react-scripts)
踩了一個坑又一個坑,以前都是自己手動建立react的開發環境,要安裝webpack、babel、react、react-dom的元件,還需要修改、新增各種配置檔案。 正為這個環境新建犯愁時,突然發現了 react-scripts。用來構建了一個專案試試: 第
react學習筆記(一)用create-react-app構建 React 開發環境
打開 img 配置 快速 reat webpack src class info React 可以高效、靈活的用來構建用戶界面框架,react利用高效的算法最小化重繪DOM。 create-react-app 是來自於 Facebook,通過該命令不需配置就能快速構建 R
webpack + create-react-app 構建react專案
1.肯定參考facebook關於react官網咯 快速搭建 create-react-app npm install -g create-react-app //切記專案名稱不能大寫 create-react-app firstapp cd firstapp npm run start 這樣
利用create-react-app結合react-redux、react-router4構建單頁應用
app pro json 裝飾器 ans install 組件 orm alt 1.創建項目: a.全局安裝create-react-app: npm install create-react-app -g b.執行create-react-app
如何開發由Create-React-App 引導的應用(四)
lis 觀察者模式 with add emp chan 項目路徑 deploy 寫入 此文章是翻譯How to develop apps bootstrapped with Create React App 官方文檔 系列文章 如何開發由Create-React-Ap
create-react-app搭建react專案
1.全域性安裝create-react-app npm install -g create-react-app 2.建立專案 create-react-app 專案資料夾名 3.進入專案 3.1 cd 專案資料夾名 建立之後的專案目錄
由create-react-app的react項目使用局部css
設置 加載 為什麽 rtl roc processor class cif 才會 為什麽webpack項目中使用局部css 在項目中,尤其是大項目中,很可能因為使用相同的css,在vue中可以直接在style中加入scope屬性,而在create-react-app的rea
我是如何使用React+Redux構建大型應用的
背景 我們團隊有個專案由於開發時間較長,且是前後端雜糅的開發方式,維護成本很高,在線上暴露的問題很多。而且因為對接了公司一百多條產品線,每天都會接到大量的客訴和產品線反饋的問題。2017年11月份以產品為主導,從產品層面對流程進行重新設計,對該專案進行了前後端
create-react-app建立react專案配置scss
第一步:安裝相關依賴 npm install sass-loader node-sass --save-dev 第二步:找的配置檔案 node_modules/react-scripts/config/webpack.config.dev.js node_module
如何使用JavaScript UI控制元件(WijmoJS)構建Electron應用程式
概述 What is Electron? Electron是一個使用JavaScript、HTML和CSS構建跨平臺桌面應用程式的框架。 您可以將Electron與純JavaScript或您選擇的JavaScript框架一起使用: React Angular Vue 構建
【webpack外掛使用】在開發中快速掌握並使用Webpack構建web應用程式
1.webpack-dev-server外掛的基本使用 入門程式 const path = require('path'); // 匯出一個Webpack的配置物件(通過node中的模組操作,向外暴露了一個配置物件) module.exports = { // 需要在這裡手動指定入口
基於Vue+Electron構建桌面應用程式實踐
Electron 是由 GitHub 開發的開源庫,用於構建擁有 HTML、CSS 和 JavaScript 的跨平臺桌面應用程式。Electron 通過把 Chromium 和 Node.js 組合到一個執行時來實現這一點,並且可以為 Mac、Windows 和 Linux 打包應用程式
5個構建移動應用程式的優秀框架
使用原生代碼是一種流行的做法。但它不總是在商業意義上最好的選擇。為多個平臺建立相同的應用程式可以是一個巨大的時間。 HTML5移動UI框架允許構建跨平臺混合移動應用程式。他們還保持本地的感覺和外觀。 使用預先知識(HTM5,CSS,JavaScript),開發人員以最小的能
手寫MFC應用程式流程---第二課
手寫MFC應用程式流程的步驟: 1.建立 Win32 專案 -》空專案–》 修改屬性中 配置屬性-》常規-》MFC的使用,改為:在共享DLL中使用MFC(預設為使用標準Windows) 2.新增標頭檔案,cpp檔案 MFC視窗建立的流程: 標頭檔案中: 建立兩個類: 應用
如何使用axis構建SOAP應用程式
你可以根據將其中的SoapServer和SoapClient匯入Eclipse,將axis放入tomcat的webapps中。 1.基本概念 1.1 SOAP的概念 SOAP即簡單物件訪問協議,是交換資料的一種協議規範,是一種輕量的、簡單的、基於X
Android Launcher啟動應用程式流程原始碼解析
帶著問題看原始碼 點選桌面Launcher圖示後做了哪些工作? 應用程式什麼時候被建立的? Application和MainActivity的onCreate()方法什麼時候被呼叫的? 概述 在Android系統中,啟動四大元件中的任何一個都可以啟動應用程式。但絕大部分時候我們是通過點選Laun
IOS開發8---APP應用程式圖示 及 程式啟動畫面設定
我們著重看下 Add Icon files in Info.plist這一項。 首先:我們必須開啟xx.Info.plist,對其進行編輯。 空白區域右鍵點選,選擇Add Row,選擇Icon files。 繼續新增條目: Iphone 和Ipad有不同,可
用 Ext JS 構建 Ajax 應用程式
一種用於富因特網應用程式開發的 JavaScript 框架 文件選項 列印本頁 未顯示需要 JavaScript 的文件選項 英文原文級別: 中級 2008 年 7 月 21 日 Ext JS 是一種強大的 JavaScript™ 庫,它通過使用可重
改善Azure App Service託管應用程式效能的幾個技巧
本文介紹了幾個技巧,這些技巧可以改善Azure App Service託管應用程式的效能。其中一些技巧是你現在就可以進行的配置變更, 而其他技巧則可能需要對應用程式進行一些重新設計和重構。 開發者都希望從部署在Azure的App Services中壓榨出最佳效能。更好的效能不僅能夠