基本的前置環(huán)境搭建
react作為全世界使用人數(shù)最多的前端框架之一初嘹，里面的設(shè)計和優(yōu)雅不言而喻柏蘑，可是對于新人前端磁椒，這種搭設(shè)還不是很友好走越，今天我們就來手動的假設(shè)一個環(huán)境吧.
其實我們react最好的就是使用我們的腳手架進行安裝慨默，雖然是寫給初學(xué)者看的文章贩耐，但是即使在工作中，我們?nèi)稳幌Ｍ蠹沂褂霉俜教峁┑哪_手架進行搭建厦取，省去我們自行配置需要踩的坑.
首先潮太，確保我們的node.js環(huán)境是正常安裝。我們在命令行使用node -v進行查看，沒有報錯的話铡买。證明我們的node環(huán)境是正常的更鲁。如果有問題請大家去node.js官方網(wǎng)站進行下載我們的node.js并進行安裝。
- 命令行檢測node.js 是否安裝正常
node -v- 在安裝正常后奇钞，我們通過npm安裝我們的腳手架工具
npm install -g create-react-app
npm install -g yarn
經(jīng)過一些列的讀條澡为，可能會比較慢一點，但是我們的正確安裝怎么都不會遲到吧景埃。除非你真的是很倒霉媒至，否則現(xiàn)在的源速度基本可以保證安裝的成功。
開始搭建react基本環(huán)境
通過這一步搭建我們基本可以完成一個可以運行的前端環(huán)境谷徙，并且在這個基礎(chǔ)上拒啰，我們可以加入react-redux和react-router的組件。
架設(shè)我們的運行環(huán)境在d:\WebstrormProjects\reactdemo下完慧，我們進入該文件目錄下谋旦。使用我們的腳手架命令創(chuàng)建工程。
- 在命令行執(zhí)行
create-react-app demo02
經(jīng)過一頓猛如虎的操作骗随，相信大家已經(jīng)能看到以下的目錄：
我們將src/index.js文件內(nèi)容改成為
import React from 'react';
import ReactDOM from 'react-dom';
import HelloReact from './Pages/HelloReact';
ReactDOM.render(<HelloReact />, document.getElementById('root'));
在src下創(chuàng)建Pages目錄鸿染，然后創(chuàng)建HelloReact.js來與我們的之前修改的index.js文件對應(yīng)指蚜，存放我們的頁面組件代碼，在react下萬物皆組件涨椒，頁面也是一樣摊鸡。
HelloReact.js 頁面內(nèi)容如下：
import React, {Component} from 'react';
class HelloReact extends Component {
render() {
return (
<div>
Hello React.
</div>
);
}
}
export default HelloReact;
進過我們的調(diào)整，最終的目錄和文件結(jié)構(gòu)如下：
我們在進入 d:\WebstrormProjects\reactdemo\demo02 運行 npm run start 查看下我們的頁面是否運行正常蚕冬。
這是瀏覽器彈出免猾，顯示我們輸入的頁面信息。到這里我們的React基本環(huán)境就已經(jīng)搭建完成囤热，接下來猎提，我們就要搭建我們的react-redux環(huán)境。
redux 和 react-redux包的安裝與配置
在react中我們的組件之間狀態(tài)的傳遞數(shù)據(jù)旁蔼，只能是父組件向子組件傳遞锨苏，而子組件只能接受這些信息。但是這不符合我們的實際操作邏輯棺聊，因為數(shù)據(jù)是共享的伞租，誰都能改才符合共享的原則。相關(guān)的redux概念很多限佩，我在這里就不多講葵诈。還是以搭建為主裸弦。
接著上面的例子，我們在d:\WebstrormProjects\reactdemo\demo02目錄下執(zhí)行以下命令
- 安裝redux和react-redux
yarn add redux react-redux
redux安裝完成作喘，這個redux相當于我們的數(shù)據(jù)倉庫理疙，為了有這個倉庫，我們就需要在src代碼中創(chuàng)建store目錄徊都，來存放我們的相關(guān)操作文件
我們在src/store下創(chuàng)建index.js輸入以下代碼
import {createStore} from 'redux';
import reducer from './reducer'; // 相當于倉庫管理員
const store = createStore(reducer); // 創(chuàng)建倉庫放入管理員
export default store;
然后還是在src/store/下創(chuàng)建reducer.js文件輸入以下代碼
const defaultStates = {
inputValue: '寫入任務(wù)',
list: [
'睜眼起床',
'下床刷牙',
'穿衣出門',
],
};
export default (previousState = defaultStates, action) => {
return previousState;
}
到這里我們的倉庫已經(jīng)搭建完成沪斟。接下來需要我們通過react-redux與我們的Pages中的頁面結(jié)合了。
首先我們需要修改src/index.js代碼如下：
import React from 'react';
import ReactDOM from 'react-dom';
import HelloReact from './Pages/HelloReact';
import {Provider} from "react-redux"; // 引入Provider組件
import store from "./store";
// 無狀態(tài)組件
const App = () => {
// 包裹在Provider之間的組件都可以進行對數(shù)據(jù)倉庫數(shù)據(jù)的操作
return (
<Provider store={store}>
<HelloReact/>
</Provider>
);
};
ReactDOM.render(<App/>, document.getElementById('root'));
為了測試我們的react-redux環(huán)境是否搭建成功暇矫，我們修改src\Pages\HelloReact.js來做個todolist的例子主之。修改HelloReact.js代碼如下：
import React, {Component} from 'react';
import {connect} from "react-redux";
import store from "../store";
class HelloReact extends Component {
constructor(props) {
super(props);
this.state = store.getState();
}
render() {
return (
<div>
<div>
<input type="text" style={{height: '17px'}} placeholder={this.props.inputValue}
value={this.props.inputValue}
onChange={this.props.inputChange}/>
<button style={{verticalAlign: 'middle'}} onClick={this.props.clickBtn}>添加</button>
</div>
<div>
<ul>
{this.props.list.map((item, index) => {
return (<li key={item + index}>{item}</li>);
})}
</ul>
</div>
</div>
);
}
}
// 隱射關(guān)系把原來的state映射成組件中的props屬性
const stateToProps = (state) => {
return {
inputValue: state.inputValue,
list: state.list,
};
};
const dispatchToProps = (dispatch) => {
return {
inputChange(e) {
let action = {
type: 'inputChange',
value: e.target.value,
};
dispatch(action);
},
clickBtn() {
let action = {
type: 'addItem',
};
dispatch(action);
}
};
};
export default connect(stateToProps, dispatchToProps)(HelloReact);
因為上面代碼有dispath，所以我們的src/store/reducer.js是可以接收到的李根。所以我們要修改里面的代碼來處理接收到的信息槽奕。
const defaultStates = {
inputValue: '寫入任務(wù)',
list: [
'睜眼起床',
'下床刷牙',
'穿衣出門',
],
};
export default (previousState = defaultStates, action) => {
if (action.type === 'inputChange') {
let newState = JSON.parse(JSON.stringify(previousState));
newState.inputValue = action.value;
return newState;
}
if (action.type === 'addItem') {
let newState = JSON.parse(JSON.stringify(previousState));
newState.list.push(newState.inputValue);
newState.inputValue = '';
return newState;
}
return previousState;
}
到這里我們的基本假設(shè)就已經(jīng)完成了。謝謝大家觀看房轿。
本文源代碼地址：代碼傳送門
