前端大白的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，後邊將會涉及。