react前端框架环境搭建

1、创建react应用程序

Create React App可在macOS，Windows和Linux上运行。

npx create-react-app mytest
cd mytest
npm start 或 yarn start 启动项目

如果您以前create-react-app通过进行了全局安装npm install -g create-react-app，建议您使用卸载软件包，npm uninstall -g create-react-app以确保npx始终使用最新版本。

 

浏览器打开localhost:3000就可以看到react页面了

详细详细可查看https://github.com/facebook/create-react-app

 

2、安装依赖包

npm install antd

npm install axios

npm install react-router-dom

...

 

3、登录页

 

import React from "react";

 

import { Form, Input, Button, Checkbox } from 'antd';

 

const layout = {

labelCol: { span: 8 },

wrapperCol: { span: 16 },

};

const tailLayout = {

wrapperCol: { offset: 8, span: 16 },

};

 

function LoginForm(props) {

 

const onFinish = values => {

console.log('Success:', values);

};

 

const onFinishFailed = errorInfo => {

console.log('Failed:', errorInfo);

};

 

return (

<Form

{...layout}

name="basic"

initialValues={{ remember: true }}

onFinish={onFinish}

onFinishFailed={onFinishFailed}

>

<Form.Item

label="Username"

name="username"

rules={[{ required: true, message: 'Please input your username!' }]}

>

<Input />

</Form.Item>

 

<Form.Item

label="Password"

name="password"

rules={[{ required: true, message: 'Please input your password!' }]}

>

<Input.Password />

</Form.Item>

 

<Form.Item {...tailLayout} name="remember" valuePropName="checked">

<Checkbox>Remember me</Checkbox>

</Form.Item>

 

<Form.Item {...tailLayout}>

<Button type="primary" htmlType="submit" >

登录

</Button>

</Form.Item>

</Form>

);

}

 

export default LoginForm

 

4、路由

App.js中

import React from 'react';

import { HashRouter, Route, Switch } from "react-router-dom";

 

// import BasicLayout from "./layout/commonLayout";

import Login from "./pages/Login";

import './App.css';

 

function App() {

return (

<HashRouter>

<Switch>

<Route path="/login" component={Login} />

{/* <Route path="/" component={BasicLayout} /> */}

{/* <Route path="/demo" exact component={FeeTest} /> */}

</Switch>

</HashRouter>

);

}

 

export default App;

 

 

这里用的react和antd都是比较新的包

 

打开页面后如果antd样式没有出来，在index.js文件头部引入     import 'antd/dist/antd.min.css';