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';