🏋️
【実践】React 100本ノック No.1：Hello, World
はじめに
はじめまして！@haganenoubik（アライ リョータ）です。
現在、ReactとTypeScriptを学習中です。
Reactの基礎的な学習をある程度終えた（TypeScriptは触り程度）ので、アウトプット主体で理解度を深めるために、下記のQiita記事シリーズを参考に、課題のミニアプリを作成していきます。
※良い機会なので、記事はZenn CLIを使用して作成しました
使用環境
手軽に環境構築できるため、基本的にはStackblitzを使用していく予定。
Stackblitz
課題
- "Hello World"コンポーネントの作成
成果物
達成条件
- "Hello World"というテキストが画面中央に表示されている
- スタイリング等は自由
技術スタック
- Vite
- React
- TypeScript
- Styled Components ※スタイリングについては適宜変更予定
実装の大まかな流れ
前提
- Stackblitzで「React（TypeScript）」を選択して新規プロジェクト作成
- プロジェクト作成辞にデフォルトで設定されているCSS等は一旦削除して開始
- HelloWorldコンポーネントの作成
- （一応）FCでのHelloWorldコンポーネントの型定義
- pタグでテキスト表示
- Appコンポーネント内へのHelloWorldコンポーネントの配置
- Styled Componentsのインストール
- スタイリングを画面中央に配置
完成 🙌
コード
App.tsx
import './App.css'
import { HelloWorld } from './components/HelloWorld'
function App() {
return (
<HelloWorld />
)
}
export default App
components/HelloWorld.tsx
import { FC } from 'react';
import styled from 'styled-components';
export const HelloWorld: FC = () => {
return (
<SP>
Hello, World
</SP>
);
};
const SP = styled.p`
display: flex;
justify-content: center;
align-items: center;
text-align: center;
height: 100vh;
`;
補足：Styled Components
CSS-in-JSライブラリ。
→ CSSファイルではなく、JavaScript系ファイル（.js, .jsx等）に直接スタイルを記述できる。
使用例
// styledをimportする
import styled from 'styled-components';
export const App = () => {
return <SButton>ボタン</SButton>;
};
// 変数名に決まりはないが、Styled Componentsを使用していることがわかりやすいよう、"S + タグ名"で設定
// const スタイルタグ名 = styled.タグ名` ~CSS形式でスタイルを記述 `;
const SButton = styled.button`
background: palevioletred;
color: white;
`;
総括
今回の実装は超基礎的な内容だったので、特に問題なく実装できました。
CSSは雰囲気で実装している部分もあるので、副次的に学習する良い機会になりそうです。
おわりに
他の学習等と並行しつつなので、更新は不定期になるかと思いますが、コードの記法やファイル構造で、ベターな方法があればアドバイスいただけるとありがたいです！
それではまた次回！👋
Discussion