自分用のメモ
Contents
環境の準備
実行環境
- VS code：v1.62.3
- Node.js：v14.17.3
- React：v17.0.2
プロジェクトの作成
Next Create Appで作成します。
Next Create Appで作成されたソースの変更
style-jsxを使わない実装
- 6、10、16行目で変数で定義して、JSXで適用しています。
import Head from 'next/head'
const Home = () => {
let title = 'Next.js page'
let message = 'React Next.js sample page.'
const h1 = {
textAlign: 'right',
paddig: '5px 15px'
}
const p = {
textAlign: 'left',
margin: '0px 5px',
color: '#669',
fontSize: '18pt'
}
const subtitle = {
textAlign: 'center',
margin: '0px 5px',
color: '#99d',
fontSize: '24pt',
fontWeight: 'bold'
}
return (
<div>
<Head>
<title>{title}</title>
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css' crossOrigin='anonymous'></link>
</Head>
<h1 className='bg-primary text-white display-4' style={h1}>React</h1>
<div className='container'>
<h4 className='my-3' style={subtitle} id={subtitle}>{title}</h4>
<div className='alert alert-primary text-center'>
<p className='h5' style={p}>{message}.</p>
</div>
</div>
</div>
)
}
export default Homestyled-jsxを使った実装
- 12～29行目で、自動的にタグにstyleが適用されるようになります。
import Head from 'next/head'
const Home = () => {
let title = 'Next.js page'
let message = 'React Next.js sample page.'
return (
<div>
<Head>
<title>{title}</title>
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css' crossOrigin='anonymous'></link>
</Head>
<style jsx>{`
h1 {
text-align: center;
}
h2 {
text-align: center;
margin: 0px 5px;
color: #aad;
font-size: 36pt;
fon-weight: bold;
}
p {
text-align: left;
margin: 0px 5px;
color: blue;
font-size: 18pt;
}
`}</style>
<h1 className='bg-primary text-white display-4'>React</h1>
<div className='container'>
<h2 className='my-3 subtitle'>{title}</h2>
<div className='alert alert-primary text-center'>
<p className='h5'>{message}.</p>
</div>
</div>
</div>
)
}
export default Homeあとがき
特になし
コメントを残す