一.瞭解

1.什麼是React.js

React.js 是 Facebook 推出的一個用來構建使用者介面的 JavaScript 庫。

React 中，把一切東西都看成元件，而且所有元件有其狀態。什麼是狀態？簡單來說，一個元件有多種有限的狀態，但同時只能是一種狀態，不過條件處罰就會變成另一種狀態。學術上叫有限狀態機。React.js 是一個新興的 JavaScript 庫，有很多經典的思想值得我們學習。

2.什麼是create-react-app 

Facebook 官方推出Create-React-App腳手架，基本可以零配置搭建基於webpack的React開發環境，內建了熱更新等功能。

詳細文件可前往連結：Create-React-App文件

二.安裝

(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 npm@latest 更新下npm，之後使用管理執行npm 重新試下就ok了。如果npm install -g npm@latest報錯的話，執行cnpm install -g npm@latest 更新下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} />
		)
	}

React 元件引用本地圖片問題

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型別
	}

react檢測型別

10.由於瀏覽器相容問題---babel-polyfill

ie10以下有些es6函式不支援:語法相容性問題
所以需要安裝：babel-polyfill（Babel是一個廣泛使用的轉碼器，可以將ES6程式碼轉為ES5程式碼）

安裝命令----cnpm install --save babel-polyfill

引用的時候：

import 'babel-polyfill';
// 或者
require('babel-polyfill');