找React撞个墙

React 练手

昨天看了下  react，试着写了可能或用到的组件
## 开始之前差点题外话，先来说一说，React项目的创建哈，会的小伙伴可以滤过
1 创建react
	npx create-react-app  NanshanCemetery (luckicn-coffee是项目应用名称)
2 启动项目
	npm start
3 删除src
	cd src
	rm -f *
有其他需求的，根据需要添加组件和中间件  例如 Redux（中间件）默认只处理同步 

温馨提示 中间件由于不是React自身的，需要自己安装
安装命令 npm install 中间件名字
cpm install 中间件名字 （电脑配置了淘宝镜像的可以使用）速度会写一些
淘宝镜像配置方法
打开命令提示符，然后输入npm install cnpm -g --registry=https://registry.npm.taobao.org，按回车键，等待安装。（详情请看）

准备工作完成，开始正餐了

##  注册Component
    说起来尴尬，因为偷懒不想自己写样式，就借助了  ant-desigin ,以后再自己写样式了，大家随便看看，不足之处多多指教。废话不多说，先上图


    ![代码图片1](https://img-blog.csdnimg.cn/20201201111159374.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25ld3BlcG9sZQ==,size_16,color_FFFFFF,t_70#pic_center)

   ![代码图片二](https://img-blog.csdnimg.cn/20201201111312157.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25ld3BlcG9sZQ==,size_16,color_FFFFFF,t_70#pic_center)

  源代码如下   `
				import React from 'react';

import ReactDom from ‘react-dom’;

import { Form, Input, Button, Checkbox,Anchor } from ‘antd’;

import Login from ‘…/login/login’
import “./register.css”;
import “antd/dist/antd.css”;
const { Link } = Anchor;
const layout = {
labelCol: { span: 8 },
wrapperCol: { span: 16 },
};
const tailLayout = {
wrapperCol: { span: 24 },
};
const onFinishFailed = errorInfo => {
console.log(‘Failed:’, errorInfo);
};
const onFinish = values => {
console.log(‘Success:’, values);
};
export default function Home(){

return(
    <div>
        <div className="top">注册</div>
        <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" onClick="login">
         注册
        
             <Login/>
        
    </Button>
  </Form.Item>
</Form>
    </div>
)

}
`
原本的想法是准备，做一个相应的注册登录，进行验证跳转的，奈何不知道，组件之间怎么跳转，知道大牛多多指教。

初次接触，多有不足，望大家指出不足。感谢感谢