创建组件
在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'
保存成功后，启动项目。
页面显示效果如下：
