🏃♀️
React100本ノック① ~HelloWorld編~
はじめに
Reactに毎日触れるためにQiitaでみたReact100本ノックを始めようと思います。 この方はReactロードマップに関する記事も上げてくれています↓(自分も現在挑戦中)。
実装
今回はHello Worldという文字を画面中央に寄せるためのコンポーネントを作る問題でした。
import styled from 'styled-components';
const P = styled.p`
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
`
export const HelloWorld = () => {
return <P>Hello World</P>;
};
display: flex;は要素を横並びにするときによく使われますが今回はjustify-contentで要素を中央寄せにするために使われてます。高さを指定してalign-items: center;にするとその高さの中央に配置されます。
おわりに
次回はCounterです↓！
Discussion