【React+TypeScript開発】最初の画面(HelloWorld)を作成する

こんばんは。今日は、ReactNativeの開発を少しお休みして、Reactでアプリ開発をしております。

ReactNative開発を始める前に少し触っていたのですが、時間が開くとすっかり忘れてしまうものですね笑

記憶の整理も兼ねて、今度はちゃんと記事に方法を残しておこうと思います。

今日は、create-react-appライブラリを使って作成したデフォルトアプリに手を加えていく最初のステップとして、新規画面を作成する方法について整理しておこうともいます。

それでは早速参ります。

ディレクトリの作成

Reactプロジェクトのディレクトリ構成については、公式ページにも言及があります。が特に決まったルールはなく、目的等に応じてやりやすい方法を採用すれば良い、と書いています。

https://ja.reactjs.org/docs/faq-structure.html

今回は、srcディレクトリ配下にscreens, componentsディレクトリを作成したいと思います。

あえてscreenとcomoponentに分けるのは、将来的に１つの画面で複数の画面コンポーネントを呼び出せるようにするためです。（例えば、ヘッダコンポーネントとメインコンポーネントとフッタコンポーネント）

アプリコードファイルの作成

次に、各ディレクトリ内に空のアプリコードファイルを作成します。

名前は何でも良いですが、分かりやすいように＜任意の名前＞.comoponent.tsx,＜任意の名前＞.screen.tsxとします。

コードの開発

以下の通りコードを記述します。以下のように記述することで、

App -> menuScrenn -> menuComponentと順に呼び出しが行われます。

・App.tsx

import logo from './logo.svg';
import './App.css';
import { menuScreen } from './screens/menu.screen';

function App() {
  return (
    menuScreen()
  );
}

export default App;

・menu.screen.tsx

import { menuComponent } from "../components/menu.component";

export const menuScreen = () => {
    return(
        menuComponent()
    )
}

・menu.component.tsx

import React from "react"

export const menuComponent = () => {
    return(
        <React.Fragment>
            <div>Hello World!</div>
        </React.Fragment>
    )
}

これでローカルでアプリを立ち上げてみましょう。

なんとも味気ないですが、Hello Worldを表示させることができました！

続く

[番外編] もっとReact.jsを学ぶには・・・

React.jsをもっと学びたい方、以下におすすめの学習コンテンツをまとめましたので、よろしければご活用いただければと思います！

土台のJavaScript/TypeScriptに不安がある方は、こちらもまとめましたので、ご参考になりましたら幸いです。