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 (

{...layout}

name="basic"

initialValues={{ remember: true }}

onFinish={onFinish}

onFinishFailed={onFinishFailed}

>

label="Username"

name="username"

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

>

 

label="Password"

name="password"

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

>

 

Remember me

 

登录

);

}

 

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 (

{/* */}

{/* */}

);

}

 

export default App;

 

 

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

 

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