Reactアプリ100本ノックを実践する 〜01 Hello World〜

はじめに

こちらの記事は、@Sicut_studyさんがアップしている【Reactアプリ100本ノック】シリーズに相乗りし、アウトプットを行うための記事になります。

• 実装ルールや成果物の達成条件は元記事に従うものとします。
• 元記事との差別点として、具体的に自分がどんな実装を行ったのか（と必要に応じて解説）を記載します。

@Sicut_studyさんのノック100本についていき、Reactを100日間学ぶのが目標です。

今回の元記事はこちら

問題

"Hello World" React コンポーネントの作成

ルール

元記事より引用

• 主要なライブラリやフレームワークはReactである必要がありますが、その他のツールやライブラリ（例: Redux, Next.js, Styled Componentsなど）を組み合わせて使用することは自由
• TypeScriptを利用する

達成条件

元記事より引用

1. Reactの新しいプロジェクトが正しくセットアップされていること。
2. 画面に"Hello World"というテキストが中央に表示されていること。

実装

npx create-react-app my-hello-world-app --template typescript
cd my-hello-world-app

でプロジェクトを作成＆移動。

npm install @emotion/react @emotion/styled

でEmotionを入れ、レイアウトの実装準備（普通にcssファイルで実装しても良いかと思います）。

後はApp.tsxに実装して完了。

src/App.tsx

/** @jsxImportSource @emotion/react */
import styled from "@emotion/styled";
import React from "react";

// スタイルの定義
const AppWrapper = styled.div`
  text-align: center;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const HelloWorld = styled.p`
  font-size: 2rem;
  color: blue;
`;

const App = () => {
  return (
    <AppWrapper>
      <HelloWorld>Hello World</HelloWorld>
    </AppWrapper>
  );
};

export default App;

あるいは、こんな風に書いてもいいと思います。

src/App.tsx

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import React from 'react';

// スタイルの定義
const appStyle = css`
  text-align: center;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const textStyle = css`
  font-size: 2rem;
  color: blue;
`;

const App = () => {
  return (
    <div css={appStyle}>
      <p css={textStyle}>Hello World</p>
    </div>
  );
}

export default App;

完成

npm start

で画面を確認します。

良さそうですね。

最後に

Reactアプリ100本ノックを100回分完走するつもりです。
応援してくれる方はぜひフォローいただけると嬉しいです。
いいね、ストックもお待ちしております。

ではまた。

次回の記事