React+mongodb의 사용 및 구성
- 不言원래의
- 2018-07-13 16:58:032459검색
이 글은 주로 참고할만한 가치가 있는 React+mongodb의 사용과 구성을 소개합니다. 이제 필요한 친구들이 참고할 수 있도록 하겠습니다.
React 환경 구축(단계별)
React 기본 구성
(React는 사용자 인터페이스를 구축하는 데 사용되는 JAVASCRIPT 라이브러리입니다. React는 주로 UI를 구축하는 데 사용됩니다. 많은 사람들이 React
가 MVC의 V(뷰)라고 생각합니다.)
인터넷에 많은 튜토리얼이 있지만( 하지만 스스로 빌드할 수는 없습니다. 함정에 부딪혀 직접 해결하고 단점을 깨달았습니다)
npm install -g create-react-app 전역 설치
create-react-app React_mongodb (이것은 내 프로젝트 이름입니다 )
다음은 내 설치 과정입니다
4. npm start 프로젝트를 입력하면 프로젝트가 성공적으로 빌드되었음을 알 수 있습니다.
5. 모두가 이해할 수 있도록 디렉토리 구조를 분석해 보겠습니다.
6. webpack 구성을 열거나(npm 실행 꺼내기) 직접 구성하세요
명령을 실행하면 다음 디렉토리가 표시됩니다
redux의 기본 사용
-
모두가 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></app>, document.getElementById('root')); } render() // 更新后重新渲染 store.subscribe(render) // ReactDOM.render(<app></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> </p><h1> hello <br> {num} </h1> <button> store.dispatch(addgun())}>加一</button> <button> store.dispatch(removegun())}>减一</button> <button> store.dispatch(addgunAsync())}>异步添加</button> ) } } * 这里你可以打开浏览器查看效果 -
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> <app></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>
</p><h1>
hello
<br>
{this.props.num}
</h1>
<button>加一</button>
<button>减一</button>
<button>异步添加</button>
)
}
}
const mapStatetoProps = (state)=> {
return { num: state }
}
const actionCreators = { addgun, removegun, addgunAsync }
// 装饰器的使用 connect 链接过后可以用 this.props 获取
App = connect(mapStatetoProps, actionCreators)(App)
export default App;
** 这里是不是感觉比store.subscribe方便一点
(调试react 推荐谷歌插件 Redux DevTools) 在谷歌商店下载需要翻墙
react-router4
*注意点*： 下载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>
<browserrouter>
<p>
</p>
<ul>
<li>
<link>嘻嘻嘻
</li>
<li>
<link>关于
</li>
<li>
<link>我的
</li>
</ul>
<switch>
{/* {Switch} 默认只会匹配第一个 */}
<route></route>
<route></route>
{/* match.params.id 取值 */}
<route></route>
</switch>
</browserrouter>
{/* <app></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> this.handleClick()}>加一</button>
)
}
}
export default withRouter(Info);
后续更新全部！！！！
위는 이 글의 요약입니다. 모든 내용이 학습에 도움이 되기를 바랍니다. 더 많은 관련 콘텐츠를 보려면 PHP 중국어 웹사이트를 주목하세요!
관련 권장 사항:
위 내용은 React+mongodb의 사용 및 구성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.