这篇文章主要介绍了关于React+mongodb的使用与配置，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
（React 是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI，很多人认为 React
是 MVC 中的 V（视图）。）
虽然网上有很多教程（但是自己搭建会遇到一些坑 所以自己去解决 从中体会到自己的不足）
npm install -g create-react-app 全局安装
create-react-app react_mongodb (这个我的项目名)
下面是我的安装过程
![41093614-5b46bba86de34_articlex[1].png](https://img.php.cn//upload/image/883/142/160/1531471691517594.png "1531471691517594.png")
4.进入项目 npm start 看到以下效果 说明项目已经搭建成功了
![2116975101-5b46bc2286837_articlex[1].png](https://img.php.cn//upload/image/528/229/104/1531471709427414.png "1531471709427414.png")
5.给大家分析一下目录结构 易懂
![2091548278-5b46bd7048f7f_articlex[1].png](https://img.php.cn//upload/image/415/618/546/1531471720904884.png "1531471720904884.png")
6.打开webpack配置（npm run eject） 或者自己配置
运行命令后看到以下目录
![735270793-5b46bf489b503_articlex[1].png](https://img.php.cn//upload/image/637/883/495/1531471731799200.png "1531471731799200.png")
带领大家入门 redux
1> 首先下载 npm i redux --save
2> 当我们看过redux的例子过后 现在我们把代码拆分
3> 同步异步介绍 (react处理异步需要 redux-thunk插件)
* redux.js
const ADD = '嘻嘻'
const REMOVE = '呵呵'
// reducer
export function counter(state = 0, action) {
switch (action.type) {
case ADD:
return state + 1;
case REMOVE:
return state - 1;
default:
return 10;
}
}
// action creator
export function addgun() {
return { type: ADD }
}
export function removegun() {
return { type: REMOVE }
}
// 异步函数操作
export function addgunAsync() {
return dispatch => { // dispatch参数
setTimeout(() => {
dispatch(addgun())
}, 2000)
}
}
* 在index.js中引入
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux'; // applyMiddleware 处理中间键
import thunk from 'redux-thunk'; // 中间键
import registerServiceWorker from './registerServiceWorker';
import App from './App';
import { counter, addgun, removegun, addgunAsync } from './redux';
// 创建一个store counter执行reducer方法
const store = createStore(counter, applyMiddleware(thunk))
// const store = createStore(counter)
function render() {
ReactDOM.render(<App store={store} addgun={addgun} removegun={removegun} addgunAsync={addgunAsync} />, document.getElementById('root'));
}
render()
// 更新后重新渲染
store.subscribe(render)
// ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
* App.js 组件
import React, { Component } from 'react';
export default class App extends Component {
render() {
const store = this.props.store
const num = store.getState()
// 由父组件中传入
const addgun = this.props.addgun
const removegun = this.props.removegun
const addgunAsync = this.props.addgunAsync
return (
<p>
<h1>
hello
<br />
{num}
</h1>
<button onClick={()=> store.dispatch(addgun())}>加一</button>
<button onClick={()=> store.dispatch(removegun())}>减一</button>
<button onClick={()=> store.dispatch(addgunAsync())}>异步添加</button>
</p>
)
}
}
* 这里你可以打开浏览器查看效果react-redux使用 安装npm i react-redux -S(是--save的简写)
Provider 组件应用在最外层, 传入store,只调用一次
connect 负责从外部获取组件需要的参数
connect 可以用装饰器的方式来写
& 下面是修改过的代码: 依然使用redux.js
修改了**App.js index.js**
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware, compose } from 'redux'; // applyMiddleware 处理中间键
import thunk from 'redux-thunk'; // 中间键
import { Provider } from 'react-redux';
import registerServiceWorker from './registerServiceWorker';
import App from './App';
import { counter } from './redux';
// 创建一个store counter执行reducer方法
const store = createStore(counter, compose(
applyMiddleware(thunk),
window.devToolsExtension ? window.devToolsExtension() : f => f
))
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root'));
registerServiceWorker(); App.js 组件
import React, { Component } from 'react';
// 连接使用
import { connect } from 'react-redux';
import { addgun, removegun, addgunAsync } from './redux/index.redux';
class App extends Component {
render() {
return (
<p>
<h1>
hello
<br />
{this.props.num}
</h1>
<button onClick={this.props.addgun}>加一</button>
<button onClick={this.props.removegun}>减一</button>
<button onClick={this.props.addgunAsync}>异步添加</button>
</p>
)
}
}
const mapStatetoProps = (state)=> {
return { num: state }
}
const actionCreators = { addgun, removegun, addgunAsync }
// 装饰器的使用 connect 链接过后可以用 this.props 获取
App = connect(mapStatetoProps, actionCreators)(App)
export default App;
** 这里是不是感觉比store.subscribe方便一点![2169363067-5b4846bd4f8a4_articlex[1].png](https://img.php.cn//upload/image/576/146/192/1531471810494589.png "1531471810494589.png")
(调试react 推荐谷歌插件 Redux DevTools) 在谷歌商店下载需要翻墙
![1302327887-5b484843043d3_articlex[1].png](https://img.php.cn//upload/image/407/301/721/1531471817661186.png "1531471817661186.png")
*注意点*： 下载router包 npm i react-router-dom --save
react-router-dom 也有2个路由参数
HashRouter（带#路由）
BrowserRouter （不带#号） 如果使用这种路由 和Vue一样需要后台配置
下面提供代码 供朋友参考：
import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import { createStore, applyMiddleware, compose } from 'redux'; // applyMiddleware 处理中间键
import thunk from 'redux-thunk'; // 中间键
import { Provider } from 'react-redux';
import { BrowserRouter, Route, Link, Redirect, Switch } from 'react-router-dom';
import App from './App';
import { counter } from './redux/index.redux';
// 创建一个store counter执行reducer方法
const store = createStore(counter, compose(
applyMiddleware(thunk),
window.devToolsExtension ? window.devToolsExtension() : f => f
))
class about extends React.Component {
render () {
return (
<h1>关于详情: {this.props.match.params.id}</h1>
)
}
}
function home() {
return <h1>我的详情</h1>
}
ReactDOM.render(
(
<Provider store={store}>
<BrowserRouter>
<p>
<ul>
<li>
<Link to="/">嘻嘻嘻</Link>
</li>
<li>
<Link to="/about">关于</Link>
</li>
<li>
<Link to="/home">我的</Link>
</li>
</ul>
<Switch>
{/* {Switch} 默认只会匹配第一个 */}
<Route path="/" exact component={App}></Route>
<Route exact path='/about/:id' component={about} />
{/* match.params.id 取值 */}
<Route path="/home" component={home}></Route>
</Switch>
</p>
</BrowserRouter>
{/* <App /> */}
</Provider>
),
document.getElementById('root'));
registerServiceWorker();
*react-router4与其他版本跳转不一致
如果使用一下跳转方式 会包错 push
this.props.history.push('/about')
在4.x 中提供了一个高阶组件 withRouter
import { withRouter } from "react-router-dom";
eg: 以下事例
import React, { Component } from 'react';
import { withRouter } from "react-router-dom";
class Info extends Component {
handleClick() {
this.props.history.push('/about')
}
render() {
return (
<button onClick={() => this.handleClick()}>加一</button>
)
}
}
export default withRouter(Info);
后续更新全部！！！！以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
Atas ialah kandungan terperinci React+mongodb的使用与配置. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Perbezaan antara mongodb dan mysql
arahan permulaan mongodb
Bagaimana untuk memadam data dalam MongoDB
penyahpepijatan node.js
Perisian pangkalan data yang biasa digunakan
Apakah kawasan aplikasi mongodb?
Yang manakah mempunyai kelajuan bacaan yang lebih pantas, mongodb atau redis?
Bagaimana untuk memadam sepenuhnya mongodb jika pemasangan gagal
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
