React特点
1.声明式设计 −React采用声明范式，可以轻松描述应用。
2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单
使用 create-react-app 快速构建 React 开发环境
create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。
create-react-app 自动创建的项目是基于 Webpack + ES6 。
执行以下命令创建项目：
$ cnpm install -g create-react-app//搭建脚手架
$ create-react-app my-app//创建项目
$ cd my-app//进入项目文档
$ npm start//打开项目文档manifest.json 指定了开始页面 index.html，一切的开始都从这里开始
我们在尝试修改 src/App.js 文件代码
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>文件中修改的内容</h2>
</div>
<p className="App-intro">
你可以在 <code>src/App.js</code> 文件中修改。
</p>
</div>
);
}
}
export default App;
React组件的使用
接下来我们封装一个输出 "Hello World！" 的组件，组件名为 HelloMessage：
function HelloMessage(props) {
return <h1>Hello World!</h1>;
}
const element = <HelloMessage />;
ReactDOM.render(
element,
document.getElementById('example')
);我项目中的登录页面的格式
import React from 'react';
import './enter.css';
import axios from 'axios'
import { Form, Input, Button, Checkbox, Layout,message} from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
const { Header, Sider, Content } = Layout;
export default class Enter extends React.Component {
constructor(props) {
super(props);
this.state = {
usrname:[{required: true,message: '请输入您的用户名!'}],
usrpassw:[{required: true,message: '请输入您的密码！'}],
list:[],
uname:'',
pas:''
}
}
inputChange(e){
this.setState({
uname:e.target.value
})
}
inputChanges(e){
this.setState({
pas:e.target.value
})
}
getData=()=>{
//通过axios获取服务器数据
console.log(this.state.uname,this.state.pas)
var api='http://192.168.1.107:7777/enter.html?name='+this.state.uname+'&pas='+this.state.pas+''; //接口后台允许了跨域
let than =this
axios.get(api)
// 箭头函数改变this指向
.then(function(res) {
if(res.data == 0){
message.success('登录成功');
sessionStorage.setItem('key',than.state.uname)
sessionStorage.setItem('key2',than.state.pas)
than.props.history.push('/detail/1')
}else{
message.error('请输入正确的用户名和密码');
return false
}
})
.catch(function(error) {
});
}
render() {
return (
<div className="box">
<div >
<Layout>
<Header className="title"><h1>学生管理系统</h1></Header>
<Content className="entera">
<div className="enter">
<Form
name="normal_login"
className="login-form"
>
<Form.Item
name="用户名"
rules={this.state.usrname}
>
<Input prefix={<UserOutlined className="site-form-item-icon" />}
onChange={(e)=>this.inputChange(e)}
placeholder="用户名" />
</Form.Item>
<Form.Item
name="密码"
rules={this.state.usrpassw}
>
<Input
prefix={<LockOutlined className="site-form-item-icon" />}
type="password"
placeholder="密码"
onChange={(e)=>this.inputChanges(e)}
/>
</Form.Item>
<Form.Item>
<Form.Item name="remember" valuePropName="checked" noStyle>
<Checkbox>记住密码</Checkbox>
</Form.Item>
<a className="login-form-forgot" href="">
忘记密码
</a>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" className="login-form-button"
onClick={this.getData}
>
登录
</Button>
或立即 <Button type="primary" className="login-form-button"
onClick={() => this.props.history.push('detail')}>
注册
</Button>
</Form.Item>
</Form>
</div>
</Content>
</Layout>
</div>
</div>
)
}
}
除了格式就是路由
使用React构建的单页面应用，要想实现页面间的跳转，首先想到的就是使用路由。在React中，常用的有两个包可以实现这个需求，那就是react-router和react-router-dom。本文主要针对react-router-dom进行说明。
先安装react-router-dom的脚手架npm install react-router-dom --save-dev
使用时
import React from 'react';
import {HashRouter, Route, Switch} from 'react-router-dom';//引入路由组件
import Home from '../register/register.js';//链接页面的组件
import Enter from '../enter/enter.js';//链接页面的组件
import Main from "../main/main.js"//链接页面的组件
import Bu_1 from "../bu_1/bu_1.js"//链接页面的组件
import Bu_2 from "../bu_2/bu_2.js"//链接页面的组件
import Bu_3 from "../bu_3/bu_3.js"//链接页面的组件
const BasicRoute = () => (
<HashRouter>
<Switch>
<Route exact path="/" component={Enter}/>
<Route exact path="/detail" component={Home}/>
<Route exact path="/detail/1" component={Main}/>
<Route exact path="/detail/Bu_1" component={Bu_1}/>
<Route exact path="/detail/Bu_2" component={Bu_2}/>
<Route exact path="/detail/Bu_3" component={Bu_3}/>
</Switch>
</HashRouter>
);
export default BasicRoute;
然后把它引入到index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Router from './components/router/Router.js';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<Router/>,
document.getElementById('root')
);
这样就使用事件跳转路由了
onClick={() => this.props.history.push('Bu_1')}//点击后跳转到/detail/Bu_1页面
这是React的初步使用，谢谢大家的阅读围观！！！