前端大白的React笔记其二

上一篇应用create-react-app脚手架工具以及引入了antd组件库。

由于我还不知道写什么来练手，因此就用UI组件拼个登陆页吧（想到学校里的课程大多都是从注册登陆开始的）。

JSX与Component

一个最简单的组件是一个或者多个html标签构成，JSX是为了让开发者方便的书写组件。设想一下一段很长的html代码，你须要用多少引号和加号去拼接(ES6后有模版字符串稍微好一点)，JSX可让你在js中不须要任何引号就书写html标签，以下

const SimpleComponent = <div>Hello World</div>
复制代码

在JSX中也很方便去嵌入咱们的“数据”，你能够将一段JSX表达式做为js对象去看待，把它当作变量、参数等等，也能够在属性中，经过{}标记去书写js代码。

不少地方都有Component的概念。React引入了组件化的设计思想，把UI拆分各个组件，不只可以实现复用，还能帮助开发者更方便的去维护。

经过函数，类或者React的API等，配合JSX，能够很方便的建立一个React组件

function SampleComponent() {
  return (
  	<div>Hello World</div>
  )
}

// 继承React.Component，编写render()方法
class SampleComponent extends React.Component {
  render() {
    return (
      <div>Hello World</div>
    )
  }
}
复制代码

一个简单的登陆页

antd已编写了不少表单相关的UI组件，只要简单的import就能够直接使用了。布局咱们可使用栅格。定义一个Login组件，继承React.Component，编写render()方法

import React from 'react'
import { Input, Button, Form, Row, Col} from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons'

class Login extends React.Component {
  render() {
    return (
      <Row>
        <Col span={9} />
        <Col span={6} className='flex-box'>
          <div className='title-font login-title'>xxx后台管理系统</div>
          <Form name="normal_login" className="login-form">
            <Form.Item name="username" rules={[{ required: true, message: '请输入用户名!' }]}>
              <Input prefix={<UserOutlined/>} placeholder="用户名" />
            </Form.Item>
            <Form.Item name="password" rules={[{ required: true, message: '请输入密码!' }]}>
              <Input prefix={<LockOutlined />} type="password" placeholder="密 码"/>
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit" className="parent-width">
                登 录
              </Button>
            </Form.Item>
          </Form>
        </Col>
        <Col span={9} />
      </Row>
    )
  }
}

export default Login
复制代码

在App.js或者其余组件中引入Login这个组件，简易的登陆页就作好了

To Be Continue

本篇笔记主要引入JSX和Component两个概念，利用antd编写了简单的一个登陆页。

这里还未涉及与数据相关内容，在React中如何监听事件，若是维护数据以及状态管理Redux，后边将会涉及。