>,一简单的登录注册
本教程旨在帮助想学习react的前端新手快速入门使用,共分为三步,带领大家完成登录注册功能的同时学习并完善框架。
文章有描述不当或者有错误时请提醒我,能力有限,不喜勿喷!!!
第一篇:带领大家完成登录注册
第二篇:加入redux
第三篇:框架持续优化
安装 create-react-app并生成项目,进入命令行输入:
yarn global add create-react-app
create-react-app react-demo
create-react-app 是官方提供快速生成react项目的命令行工具,可以帮助我们节省配置开发环境的时间。
使用 yarn 替代 npm,yarn对比npm具体优势百度上可以查到,相关命令请参考<<从npm迁移到yarn>>
create-react-app生成的项目结构如下:
node_modules public src App.css App.js App.test.js index.js index.css logo.svg registerServiceWorker.js package.json README.md yarn.lock
registerServiceWorker.js 主要是用于在生产环境中为用户在本地创建一个service worker
来缓存资源到本地,提升应用的访问速度。
启动服务:
npm start
服务启动成功,浏览器会自动打开主页,修改代码则会自动编绎,快动手试下吧!!!
书写注册页面结构:
修改App.js为Reg.js,App.css为Reg.css,记得更改页面引用:
// Reg.js import \'./App.css\'; => import \'./Reg.css\'; // index.js import App from \'./App\'; => import Reg from \'./Reg\'; ReactDOM.render(<App />, document.getElementById(\'root\')) => ReactDOM.render(<Reg />, document.getElementById(\'root\'));
Reg.js 提供用户输入用户名密码以及确认注册按钮,结构如下:
import React, { Component } from \'react\'; import \'./Reg.css\'; class Reg extends Component { constructor(props){ super(props); this.state = { // 初始化state username: \'\', password: \'\' } }
stateChange(e){
const target = e.target;
this.setState({
[target.name]: target.value
})
} render() { return ( <div onChange={(e)=>this.stateChange(e)}> <input name="username" value={this.state.username} placeholder="请输入用户名"/> <input name="password" value={this.state.password} placeholder="请输入密码"/> <button>立即注册</button> </div> ); } } export default Reg;
我们在constructor()中做state初始化工作,在constructor中使用this,必须在之前执行super(),不然无法正确访问this。
react 绑定值语法是 { 变量名 }。
react 中无法直接在input输入,必须通过监听input onChange事件修改对应的state来达到输入的效果,如果页面input过多,可以在父级监听onChange事件修改对应的state,修改state使用setSate(),该方法是异步的,则在该方法之后立即访问state可能还是老数据。如果想在state改变时立即获取新state:
// 回调方式 this.setState({ username : 123}, ()=> { console.log(this.state) // 新的 }) // 或者 this.state.username = 123;
console.log(this.state.username)
为button按钮增加点击事件:
<button onClick={()=>this.saveUser()}>立即注册</button>
// 或者
<button onClick={this.saveUser.bind(this)}>立即注册</button>
// 不可以这样,会出现this指向问题
<button onClick={this.saveUser}>立即注册</button>
()=>{} 是es6箭头函数,参考阮一峰<<es6入门>>
我们在saveUser()里加入用户名密码不能为空的验证:
saveUser() { const { username, password } = this.state; if(!username) return alert(\'用户名不能为空\'); if(!password) return alert(\'密码不能为空\'); }
const { username, password } = this.state es6的解构赋值语法。
用户填写用户名以及密码,调用服务器注册接口,这里采用fetch.js,当然也可以使用$.ajax:
安装
yarn add isomorphic-fetch --save-dev
saveUser()新增代码:
......
fetch(\'http://123.206.99.172:3005/reg\', { method: \'GET\', mode: "cors", headers: { "Content-Type": "application/json" }, body: { username,password } }).then( res => res.json() ).then( res => { // 成功, 处理逻辑 alert(\'恭喜您注册成功了\'); })
别忘在头部引用:
import fetch from \'isomorphic-fetch\';
可以动手尝试在ajax请求时加入简单的loading。
注册页面已完成,我们现在复制一份Res.js 命名为 Login.js 做为登录页面
index.js 引用
import Login from \'./Login\';
接下来集成route,完成路由跳转
安装
yarn add react-router-dom --dev-save
index.js :
import React from \'react\'; import ReactDOM from \'react-dom\'; import \'./index.css\'; import Reg from \'./Reg\'; import Login from \'./Login\'; import registerServiceWorker from \'./registerServiceWorker\'; import { HashRouter, Route } from \'react-router-dom\'; const getConfirmation = (message, callback) => { const allowTransition = window.confirm(message) callback(allowTransition) } const supportsHistory = \'pushState\' in window.history; ReactDOM.render( <HashRouter basename=\'/\' forceRefresh={supportsHistory} getUserConfirmation={getConfirmation} keyLength={6}> <div> <Route exact path=\'/\' component={Reg}></Route> <Route exact path=\'/login\' component={Login}></Route> </div> </HashRouter>, document.getElementById(\'root\')); registerServiceWorker();
forceRefresh 如果为true,则路由器将在页面导航中使用全页刷新。 您可能只希望在不支持HTML5历史记录API的浏览器中使用此功能;
keyLength location.key的长度。 默认为6;
basename 为所有位置添加一个基准URL;
getUserConfirmation 导航到此页面前执行的函数,默认使用 window.confirm
具体配置参数以及用法请移步<<初探 React Router 4.0>>
路由集成完毕,接下来我们加入注册成功时自动跳转至登录页面
Reg.js 注册成功回调里增加:
this.props.history.push(\'Login\')
至此登录与注册功能已全部完成,由于此处只做演示用,服务端并没有区分登录与注册。