const mapStateToProps = state => {
return {
user: state.login.user
}
};
import React, {Component} from 'react';
import Header from './component/Header';
import Hemlet from './aplication';
export default class Home extends Component {
render(){
return(
<div>
<Hemlet title='Главная страница'/>
<Header/>
<h1>Добро пожаловать</h1>
</div>
);
}
}
import React, { Component } from 'react';
import { Redirect } from 'react-router';
import { Link } from 'react-router-dom';
export default class Header extends Component{
logout = () => {
localStorage.removeItem('persist:root');
};
render(){
if(!localStorage.getItem('persist:root')) {
return <Redirect to='/'/>;
}
return(
<nav className="navbar navbar-light bg-faded">
<h1 className="navbar-brand">Holland</h1>
<ul className="nav navbar-nav">
<li className="nav-item">
<Link to="/index" className='nav-link'>Главная страница<span className="sr-only">(current)</span></Link>
</li>
<li className="nav-item">
<Link to="#" className="nav-link">База знаний</Link>
</li>
<li className="nav-item">
<Link to="#" className="nav-link">Тренинги</Link>
</li>
<li className="nav-item">
<Link to="#" className="nav-link">Тестирование</Link>
</li>
<li className="nav-item">
<form className="form-inline">
<input type="text" placeholder="Поиск" className="form-control"/>
<button type="submit" className="btn btn-outline-success">Найти</button>
</form>
</li>
<li className="nav-item pull-xs-right">
<label className="nav-link" onClick={this.logout}>Выйти</label>
</li>
</ul>
</nav>
);
}
}
dispatch(loginSuccess(res.data));
делать передать пользователя или не обязательно? По логике он же должен в store хранится? {
"presets": [
"es2015",
"react",
"stage-0"
]
}
{
"name": "trainingportal",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node bin/server.js",
"webpack-dev": "npx webpack --config webpack.dev.js",
"webpack-prod": "npx webpack --config webpack.prod.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/hollandit/trainingPortal.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/hollandit/trainingPortal/issues"
},
"homepage": "https://github.com/hollandit/trainingPortal#readme",
"dependencies": {
"axios": "^0.17.1",
"bcrypt": "^1.0.3",
"bluebird": "^3.5.1",
"koa": "^2.4.1",
"koa-body": "^2.5.0",
"koa-logger": "^3.1.0",
"koa-passport": "^4.0.1",
"koa-router": "^7.3.0",
"koa-session": "^5.5.1",
"koa-static": "^4.0.2",
"koa-views": "^6.1.3",
"lodash": "^4.17.4",
"material-ui": "^0.20.0",
"mysql": "^2.15.0",
"passport-local": "^1.0.0",
"path": "^0.12.7",
"pug": "^2.0.0-rc.4",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-helmet": "^5.2.0",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-tap-event-plugin": "^3.0.2",
"redux": "^3.7.2",
"redux-form": "^7.2.1",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"clean-webpack-plugin": "^0.1.17",
"css-loader": "^0.28.8",
"eslint": "^4.15.0",
"eslint-plugin-react": "^7.5.1",
"node-sass": "^4.7.2",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.1",
"webpack": "^3.10.0",
"webpack-merge": "^4.1.1"
}
}
case LOGIN_SUCCESS:
return {
...state,
isLoading: false,
shouldRedirect: false,
};
<div className='error'>{if(isError) return 'Неправильный логин или пароль'}</div>
<div className='error'>{if(isError) isError.payload}</div>
const Router = require('koa-router'),
router = new Router();
router
.get('/', async ctx => {
await ctx.render('index');
})
module.exports = router;
import React from 'react';
import ReactDOM from 'react-dom';
import Helmet from '../aplication';
import TextField from 'material-ui/TextField';
import RaiseButtin from 'material-ui/RaisedButton';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
class UserForm extends React.Component{
state = {
login: "",
password: "",
};
handleChange = e => {
const { name, value } = e.target;
this.setState({
[name]: value,
});
}
render(){
const { login, password } = this.state;
return(
<div>
<Helmet title='Авторизация'/>
<form method='post' action="/">
<MuiThemeProvider>
<TextField
hintText="Введите логин"
name="login"
fullWidth={true}
value={login}
required={true}
onChange={this.handleChange}
/>
</MuiThemeProvider>
<MuiThemeProvider>
<TextField
hintText="Введите пароль"
type="password"
name="password"
fullWidth={true}
value={password}
required={true}
onChange={this.handleChange}
/>
</MuiThemeProvider>
<MuiThemeProvider>
<RaiseButtin label="Войти" fullWidth={true} className="authForm-button"> <input type="submit" className="authForm-input" /> </RaiseButtin>
</MuiThemeProvider>
</form>
</div>
);
}
}
ReactDOM.render(
<UserForm />,
document.getElementById('content')
);
import React from 'react';
import { Helmet } from 'react-helmet';
class Application extends React.Component{
constructor(prop){
super(prop);
}
render(){
return(
<div className='application'>
<Helmet>
<meta charSet='utf-8' />
<title>{this.props.title}</title>
</Helmet>
</div>
);
}
}
module.exports = Application;
Вот как это выглядит
https://github.com/hollandit/trainingPortal
React полностью находится в public/js