创建组件

在src目录下的component内创建Login.js的函数组件

导入React

import React,{Component} from 'react'

定义Login函数

export default function Login(){
  return(
    <div>
        <input type="text" name="username" value="" placeholder="请输入您的账号" />
        <input type="password" name="password" value="" placeholder="请输入您的密码" />
    </div>
  )
}

引入组件

在App.js内引入组件

import Login from './components/Login.js'

在标签内使用Login组件

  <div className="App">
      <p>这是我的第一个React项目</p>
        <HelloWorld></HelloWorld>
        <section>
            <Login></Login>
        </section>
    </div>

给组件添加样式

在src目录下新建css目录，并在目录下创建login.css文件
文件内定义样式：

.login{
    display: flex;
    flex-direction: column;
    background-color: #282c34;
    margin: 0 auto;
    width: 400px;
    height: 200px;
    padding: 30px ;
}

.login input{
    border: none;
    outline: none;
    margin-bottom: 10px;
    padding: 10px;
}

引入样式

在Login.js文件内引入样式。

import '../css/login.css'

保存成功后，启动项目。
页面显示效果如下：