創(chuàng)建組件
在src目錄下的component內(nèi)創(chuàng)建Login.js的函數(shù)組件
導(dǎo)入React
import React,{Component} from 'react'
定義Login函數(shù)
export default function Login(){
return(
<div>
<input type="text" name="username" value="" placeholder="請(qǐng)輸入您的賬號(hào)" />
<input type="password" name="password" value="" placeholder="請(qǐng)輸入您的密碼" />
</div>
)
}
引入組件
在App.js內(nèi)引入組件
import Login from './components/Login.js'
在標(biāo)簽內(nèi)使用Login組件
<div className="App">
<p>這是我的第一個(gè)React項(xiàng)目</p>
<HelloWorld></HelloWorld>
<section>
<Login></Login>
</section>
</div>
給組件添加樣式
在src目錄下新建css目錄画恰，并在目錄下創(chuàng)建login.css文件
文件內(nèi)定義樣式：
.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文件內(nèi)引入樣式画侣。
import '../css/login.css'
保存成功后实夹，啟動(dòng)項(xiàng)目棋电。
頁(yè)面顯示效果如下：
