react项目实战--简单登录注册
- 补充:
在windows系统中查看,进入到需要查看的目录后,按住shift键,然后单击鼠标右键,选择“在此处打开命令窗口”,输入命令
目录下的所有目录:tree
目录下的所有目录和文件:tree /f
项目目录树
src
│ index.js
│ routes.js
│
├─components
│ │ App.js
│ │ NavigationBar.jsx
│ │
│ └─singup
│ SingupForm.jsx
│ SingupPage.jsx
│
└─reducers
auth.js
index.js
为了方便,我在public下的index.html中引入了bootstrap.css文件
public/indes.html
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.css" rel="stylesheet">
index.js
import React from 'react'; import ReactDOM from 'react-dom'; import logger from 'redux-logger'; import thunk from 'redux-thunk' import { composeWithDevTools } from 'redux-devtools-extension'; import { createStore, applyMiddleware } from 'redux'; import { Provider } from "react-redux"; import rootReducer from './reducers'; import routes from './routes' import { BrowserRouter as Router } from 'react-router-dom' import NavigationBar from './components/NavigationBar' const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(logger, thunk))); ReactDOM.render( <Provider store={store}> <Router routes={routes}> <NavigationBar /> {routes} </Router> </Provider>, document.getElementById('root') );
routes.js
import React from 'react' import { Route } from 'react-router-dom' import App from './components/App' import SingupPage from './components/singup/SingupPage' export default ( <div className="container"> <Route exact path="/" component={App}></Route> <Route path="/singup" component={SingupPage}></Route> </div> )
components/App.js
import React from 'react'; class App extends React.Component { constructor() { super() } render () { return ( <div className="jumbotron"> <h1>Hi React Redux Login</h1> </div> ); } } export default App;
components/NavigationBar.jsx
import React from 'react'; import {Link} from 'react-router-dom'; class NavigationBar extends React.Component{ render(){ return( <nav className="navbar navbar-expand-lg navbar-light bg-light mb-3"> <div className="container"> <Link className="navbar-brand" to="/">Login功能</Link> <button className="navbar-toggler" type="button" data-toggler="collapse" data-target=""> <span className="navbar-toggler-icon"></span> </button> <div className="collapse navbar-collapse" id="navbarsEcample05"> <ul className="navbar-nav mr-auto"> <li className="nav-item"> <Link className="nav-link" to="/singup">注册</Link> </li> </ul> </div> </div> </nav> ) } } export default NavigationBar;
components/singup/SingupForm.js
import React from 'react' export default class SingupForm extends React.Component{ constructor(props){ super(props); this.state = { username: '', email: '', password: '', passwordConfirmation: '' } } onChange = (e) => { console.log(e.target.value); this.setState({ [e.target.name]: e.target.value }); console.log([e.target.name]); } onSubmit = (e) => { e.preventDefault(); console.log(e); console.log(this.state); } render(){ return ( <form onSubmit={this.onSubmit}> <h1>Join our community</h1> <div className="form-group"> <label className="control-label">Username</label> <input type="text" name="username" value={this.state.username} onChange={this.onChange} className="form-control"/> </div> <div className="form-group"> <label className="control-label">Email</label> <input type="email" name="email" value={this.state.email} onChange={this.onChange} className="form-control"/> </div> <div className="form-group"> <label className="control-label">password</label> <input type="password" name="password" value={this.state.password} onChange={this.onChange} className="form-control"/> </div> <div className="form-group"> <label className="control-label">passwordConfirmation</label> <input type="password" name="passwordConfirmation" value={this.state.passwordConfirmation} onChange={this.onChange} className="form-control"/> </div> <div className="form-group"> <button className="btn btn-primary btn-lg">注册</button> </div> </form> ) } }
components/singup/SingupPage.js
import React from 'react' import SingupForm from './SingupForm' export default class SingupPage extends React.Component{ render(){ return( <div className="row"> <div className="col-md-3"></div> <div className="col-md-6"> <SingupForm /> </div> <div className="col-md-3"></div> </div> ) } }
components/reducers/auth.js
const auth = (state = {}, action) => { switch (action.type) { default: return state; } } export default auth;
components/reducers/index.js
import { combineReducers } from "redux"; import auth from "./auth"; const rootReducer = combineReducers({ auth }) export default rootReducer;
持续更新中.......