[react]reactプロジェクトを作成、コンポーネント呼び出し

9469 ワード
メモ React メモ テキストリンク

Reactを学びたい

React開発の初期構築手順、コンポーネント呼び出しの仕方の学習を記録します。自宅で学習したことの個人用メモ程度ですが、参考になる方がいらっしゃれば嬉しいです。環境はMacです。

作成しましょう

nodeはインストール済みです。
コマンドは以下の通り。

プロジェクト作成
npx create-react-app my-app

※ちなみに一度以下エラーになったんですが、大文字のアプリケーション名は使用できないようですね。なんでだろう・・・

  • name can no longer contain capital letters

とりあえず作成できました。サーバを動かすとローカル起動ができて画面が見られます。

サーバ起動
npm start

いろいろいじってみる

標準のApp.jsを以下のように変えてみました。

App.js
import React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';

import PageOne from './pages/Pageone';

const PageTwo = () => {
  return (
    <div>
      PageTwo
      <Link to="/">
        <button>
          show PageOne when you click this!!
        </button>
      </Link>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <BrowserRouter>
        <div>
          <Route path="/" exact component={PageOne} />
          <Route path="/pagetwo"  component={PageTwo} />
        </div>
      </BrowserRouter>
    </div>
  );
};

export default App;

ここではrouterとコンポーネントの呼び出しを書いてみてます。
参考にさせていただいたページ→React Routerでのページ遷移を簡単に説明

あとせっかくなのでコンポーネントを分割してみました。
PageOneというコンポーネント（ページ？）をpagesというフォルダに別出ししています。

中身はこんな感じ。

PageOne.js
import React from 'react';
import { Link } from 'react-router-dom';

import Aisatsu from '../components/Aisatsu';

const PageOne = () => {

    return (
      <div>
        <Aisatsu greet="こんにちは！" />
        PageOne
        <Link to="/pagetwo">
          <button>
            show PageTwo when you click this!!
          </button>
        </Link>
      </div>
    );  
  }


  export default PageOne;

export defaultというのが、コンポーネントを呼び出すためには必要らしいです。
また、Aisatsuというコンポーネントを呼んでいます。
Aisatsuはこちら。

Aisatsu.js

import React, { Component } from 'react';

class Aisatsu extends React.Component {
    render() {
      return (
        <h1>{this.props.greet}</h1>
      );
    }
  }

export default Aisatsu;

propsの使い方などもなんとなくわかりました。

ちなみに画面はこんな感じ。

とりあえずは勉強あるのみということで・・・。
引き続き作っていきます。