🐙

Reactの基本をやってみる

2020/12/06に公開

React

JSX

tech

チュートリアルプロジェクトを作成する！

まず、Reactで一番早くプロジェクトを作成する方法は以下のコマンドをうつことです。

npx create-react-app your-project-name-here

このコマンドをうてば自動的にチュートリアルプロジェクトが作成されます。Reactに慣れるにはそのプロジェクトに変更を加えるなどするのが手っ取り早いと思います。

APIを使う！

次に、ReactからAPIを使う方法です。

ReactからAPIコールを行うにはReactのライフサイクルメソッドの一つであるcomponentDidMount()を使います。

componentDidMount(){
    fetch("https://api.jikan.moe/v3/search/manga?q=Grand%20Blue&page=1").then(res=>res.json()).then(
        result=>{
            this.setState({manga:result["results"][0]["title"]});
        }
    )
}

さらに、APIの結果を（変数に）保存しておくためにReactのステートを使います。

constructor(props){
    super(props);
    this.state={
        manga:[]
    };
}

render() {
  return (
  <div>
      <h2>{this.state.manga}</h2>
  </div>
  )
}

ルーター(Router)を使う！

まずは以下のコマンドでパッケージをインストールします。

npm install react-router-dom

次に、jsファイル内で以下をインポートします。

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

そしてrender()内のreturn()の中に以下のように記述します。

    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>

Routeコンポーネント内のそれぞれのコンポーネントは簡潔に以下のように記述しておきます。

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

もちろん、別のファイルにコンポーネントのクラスを記述してインポートすることもできます。

ShowJojo.js

import React from 'react';

class ShowJojo extends React.Component {
    render(){
        return (
            <div>
                <img alt="jojo" src="https://img4.hulu.com/user/v3/artwork/3f2ffb64-2424-44a5-b229-4371dccb1d6f?base_image_bucket_name=image_manager&base_image=f3242b25-670c-4bec-b5ca-c5d6189e4ad2&size=320x480&format=jpeg"></img>
            </div>
        )
    }
}

export default ShowJojo;

App.js

import ShowJojo from "./components/showJojo.js";

今記事は以上です。

チュートリアルプロジェクトを作成する！

APIを使う！

ルーター(Router)を使う！

Discussion