React Progate(無料枠)完了

2023.05.26

少しずつ、暑くなってきて自宅で勉強するのが辛くなってきました、、、
できれば、エアコンのかかったところで、、、と考え始めた今日この頃です。

今日は、React勉強で、Progateの無料枠が終わったのでその備忘録です。

第一部 : React I

JSXを学ぼう

JSX

HTMLと同様のタグが使えるようになる。
EJSのようなテンプレートエンジのような感じと考えています。

    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>

上記のようにHTMLを入れることができました。

ただ、JSXでは、下記のように複数の要素があるとエラーを起こすようです。

render() {
　return {
　　<h1>Hello CodeSandbox</h1>
  <h2>Start editing to see some magic happen!</h2>
　　<p>test text</p>
}

}

imgタグ

imgタグは、HTMLでは、<img src=’画像のURL’>のように閉じタグが必要ありませんでした。

一方、JSXでは閉じタグが必要になります。<img src=’画像のURL’ />のように、タグの終わりにスラッシュ「/」を記述します。

https://prog-8.com/react/study/1/4#/9

JSXにも専用のルールがあるようです。
imgタグには、タグの終わりに 「スラッシュ」’/’ を入れる必要があるようです。

App.js

Progateでは、App.jsファイルに

import React from "react";　　　　　Reactをimprot

class App extends React.Component {　　　React.Component を継承するクラスの定義
  render (){
      return (
        <h1>Hello React</h1>　　　　　JSXを戻り値とするrenderメソッドを定義
      );
    };
} 

export default App;　　　　クラスをexport

JSXとJS

class App extends React.Component {　
  render (){
      return (
　　　　　　　　　　JSX部分
      );
    };
}

青色マーカー : JS部分

緑色文字 : JSX部分

JSを記述すると
class App extends React.Component {　
  render (){
　　　　　const text = 'Hello World';
      return (

      );
    };
}

return以外のところ(緑の文字)であれば、JavaScriptが書けました。

JSXにJSを埋め込む時は
render (){
　　　　　const text = 'Hello World';
      return (
　　　　　　　　　<div>{ text }</div>　中括弧でJavaScriptを埋め込める
      );
    };

stateとイベントを学ぼう

表示切り替えの準備

render内にJSXを記述していきました。

onClickイベント

イベントの書き方として(アロー関数では)

<button イベント名={ () => { 処理 }} ></button>
               ここでイベント名と処理を確定する

上記は、クリックされた時に処理を実行する onClickイベントを使用しています。

state

stateとは、ユーザーの動きに合わせて変わる値のこと指すようです。

それを、onClickイベントを用いて
ボタンを押すとstateが代わり、表示される名前が変わるような動き表現します。

stateの定義は、基本的にオブジェクトを使うようです。

下記は、備忘録でオブジェクトです。

const user = { name : "にんじゃわんこ" , age :14 };

console.log(user.age)

ブルーのマーカー : オブジェクト
赤いテキスト : 値
青いテキスト：プロパティ
緑のテキスト：「定数名前.プロパティ名」で値を取得

stateは、constructorの中で、オブジェクトとして定義すること。
ここで定義したオブジェクトがstateの初期値となる。

class App extends React.Component {
　constructor(props) {
　　super(props);
　　this.state = { name: 'にんじゃわんこ' }
　}
}

stateの表示

stateの表示は、this.stateで取得できるようです。

また、プロパティ名に対応した値を取得するには、this.state.プロパティ名で取得できるようです。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: 'にんじゃわんこ'};
  }
  
  render() {
    return (
    	<div>
        {/* 「こんにちは、にんじゃわんこさん！」の名前の部分をstateを使って置き換えてください */}
    	  <h1>こんにちは、{this.state.name}さん！</h1>
    	  
        <button onClick={() => {console.log('ひつじ仙人')}}>ひつじ仙人</button>
        <button onClick={() => {console.log('にんじゃわんこ')}}>にんじゃわんこ</button>
      </div>
    );
  }
}

stateの変更

stateの値の変更は、this.setState({ プロパティ名 : 変更する値 }) でできるようです。

今回のコードでは、ボタンがクリックされた時に、名前の表示を変更するためにsetStateをonClick内で行いました。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: 'にんじゃわんこ'};
  }
  
  render() {
    return (
    	<div>
    	  <h1>こんにちは、{this.state.name}さん！</h1>
    	  {/* onClickの処理に、stateを変更する処理を加えてください */}
        <button onClick={() => {this.setState({name:'ひつじ仙人'})}}>ひつじ仙人</button>
        
        {/* onClickの処理に、stateを変更する処理を加えてください */}
        <button onClick={() => {this.setState({name:'にんじゃわんこ'})}}>にんじゃわんこ</button>
        
      </div>
    );
  }
}

※stateの変更の注意点 :
Reactでは、「state の値に直接代入してはいけない」という決まりがあるそうです。なので、値を変更した場合は、setStateを使わなければいけないようです。

メソッドの作成

クラスの中で、メソッド名() { 処理 } とすると
メソッドはクラスの中で定義できるようです。

class App extends React.Component {
  constructor(props) {
    super(props);
  }
　　メソッド名() {
　　　　　　// 処理
　　}
}

メソッドをイベント内で呼び出すには、

class App extends React.Component {
  constructor(props) {
    super(props);
  }
　　handleClick() {
　　　　　　// 処理
　　}

  render() {
     return {
         <button onClick= { () => {this.handleClick()} }>ボタン</button>
     }
  }
}

カウントアップ機能を作ろう

カウントアップ機能を作ろう(1)

今までの復習としてstateの定義とstateの変更をしてみました。

class App extends React.Component {
  constructor(props) {
    super(props);
    // stateを定義してください
    this.state={count:0}
    
  }
  
  render() {
    return (
      <div>
        <h1>
          {/* stateの値を表示してください */}
          {this.state.count}
          
        </h1>
        {/* <button>タグを追加してください */}
        <button>+</button>
        
      </div>
    );
  }
}

カウントアップ機能を作ろう(2)

実際にカウンターを動かすようにするには、

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: 0};
  }
  
  // handleClickメソッドを定義してください
  handleClick() {
    this.setState({count:this.state.count + 1})
  }
  
  render() {
    return (
      <div>
        <h1>
          {this.state.count}
        </h1>
        {/* <button>タグ内でonClickイベントを追加してください */}
        <button onClick={()=>{this.handleClick()}}>+</button>
        
      </div>
    );
  }
}

export default App;

とすると、カウンターが動きました。

第二部 : React Ⅱ

Reactの表示の仕組みを学ぼう

Reactの表示の仕組み

App.jsに書かれているJSXは最終的にHTMLに変換されて、ブラウザに表示されます。Reactのコードを実際にブラウザに表示するには、App.js以外にもindex.jsとindex.htmlというファイルが必要になります。

https://prog-8.com/react/study/2/1#/2
App.jsとindex.jsの関係

表示の流れを見ていきましょう。

index.js内で「ReactDOM.render(<App />, …」と書くことで、App.jsのJSXが、HTMLに変換されます。

この書き方は定型文のようなものなので、暗記しておく必要はありません。

https://prog-8.com/react/study/2/1#/3
index.jsとindex.htmlの関係

さらに「…, document.getElementById(‘id名’));」と書くことで、変換されたHTMLがindex.htmlの指定したid名の要素の中に挿入されます。

今回は、id名rootを指定しています。最終的に、index.htmlの内容がブラウザに表示されます。

https://prog-8.com/react/study/2/1#/4

App.jsファイル内

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello World</h1>
        <p>一緒にReactを学びましょう！</p>
      </div>
    );
  }
}

export default App;

index.jsファイル内

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
// 以下に指定されたコードを貼り付けてください 
ReactDOM.render(<App />, document.getElementById('root'));

index.htmlファイル内

<!DOCTYPE html>
<html>
  <head>
    <title>React App</title>
  </head>
  <body>
    <!-- idを指定してください -->
    <div id='root'></div>
    
    <script src="bundle.js"></script>
  </body>
</html>

これを見ると、
index.jsには、

import React from 'react'

と記載があるため、ReactのJSXが使えてApp.jsのクラスAppを参照できる、

そして、

ReactDOM.render(<App />, document.getElementById('root'));

とあるので、index.htmlファイル内のid名がrootのところにレンダリングするのだろうなと理解できました。

CSSをつけよう

JSXでは、クラス名を指定する際は、class=”クラス名”ではなく、className=”クラス名”とするそうです。

  • Reactがどういうものなのか
  • JSXについて
  • stateの機能について

など、基礎の基礎については学べたかなと思いました。

以上で、Progateの無料版までの備忘録は終了しました。

次回からは、freecodecamp で学んだことを記事にできたらと思います。

質問・助言等よろしくお願いいたします！！

タイトルとURLをコピーしました