PROGRAMMING

JSXとStateを学習【React.js】

今日はReactの学習をしていきたいと思います。

なぜReactなのかというと、友人のラーメン屋のホームページを作ろうと考えていて、それをReactで作ろうかなーって考えているからです。

今月中に完成できたらいいなーって考えているんですけど、終わりますかね。。

それでは、今日の学習内容をやっていこうと思います。

今回の内容
・JSXについて学ぶ
・Stateについて

今回はこんな感じでReactについてやっていこうと思います。

学習内容

JSXについて学習する

JSX

JSXとは簡単にいうとJavaScriptの中でHTMLがかける部分とという感じですかね。

そのくらいの理解でいいと思うのですが、より深く理解が必要な場合は下記を参考にします。

コードで表すとこの部分のことです。

import React from 'react';

class App extends React.Component {
  render() {
    return (
  // ここからJSX
      <div>
        <h1>Hello World</h1>
        <p>React</p>
      </div>
  // ここまで
    );
  }
}

export default App;

上の<div></div>のひとまとまりの部分をJSXといいます。

一つのまとまりにまとめてあげないとエラーが出てしまうので、注意しましょう。

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

この部分はコンポーネントをここで定義するコードです。これはコンポーネントを定義する場合はこういうものだと思いましょう。

このJSXの書き方は主にHTMLとあまり変わらないのですが、imgタグなどは少し変化します。

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello World</h1>
        <p>React</p>
        <img src="https://iseblog.xyz/wp-content/uploads/2020/11/hannah-tasker-ZBkH8G4_yyE-unsplash-1.jpg"/>
      </div>
    );
  }
}

export default App;

imgタグの囲い方がHTMLでは<img>ですが、JSXでは<img/>のようになります。

JSXとJS

JSXについて学んだので、JavaScriptをどこに記述すればいいのかをやっていきます。

結論を言うと、JSXの外にJSがかけます。

renderの中の、returnの外の部分です。

実際にコードで書いてみます。

import React from 'react';

class App extends React.Component {
  render() {
    const name = 'React学習';
    const imgUrl = 'https://iseblog.xyz/wp-content/uploads/2020/11/hannah-tasker-ZBkH8G4_yyE-unsplash-1.jpg';
    return (
      <div>
        <h1>{ name }</h1>
        <img src= { imgUrl } />
        
      </div>
    );
  }
}

export default App;

nameimgUrlの部分がJSですね。外で定義したものを、JSXの部分で出力します。

こんな感じでちゃんと出力されました。

State

Stateとは

続いてstateについて勉強していきます。

stateについての説明や役割を少しだけここで触れます。

Stateとは?

React.jsでは、component上でやりとりされる情報をstate(状態)として管理していきます。例えば、ユーザーのログイン情報だったり、投稿失敗時のエラー文だったりです。

こんな感じですね。

詳しくは下記のページに載っています。

イベント

イベントを用いると、「何かが起きたときに、処理を実行するように指定」することができます。
例えば、ボタンをクリックしたときに、何かが表示されるようになどです。

書き方は下記になります。

<button イベント名={() => {処理()}}</button>

実際にコードを書いていくと、下記のようになります。

ボタンを押すことで、Reactという文字を出力されるようになります。

<button onClick={()=> {console.log('React')}}>React</button>

これでイベントとstateを使って、いこうと思います。

state定義、表示、変更

まずは下記のようにstateを定義します。

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: 'いっせい'};
  } 
export default App;

stateはconstructorの中に定義します。

constructor(props)などは定型文みたいなものらしいので、定型文として理解します。

statethis.stateとしてオブジェクトとして定義します。

nameにいっせいという文字列を定義しておきます。これを初期値といいます。

次に、定義ができたら表示できるようにします。

書き方は以下のようにするだけです。

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: 'いっせい'};
  }
  
  render() {
    return (
    	<div>
    	  <h1>Hello {this.state.name}!</h1>
    	  
        <button onClick={() => {console.log('React')}}>React</button>
     <button onClick={() => {console.log('いっせい')}}>いっせい</button>
      </div>
    );
  }
}

export default App;

{this.state.name}このようにすれば、stateを表示できるようになります。

そして、stateを変更できるようにしていきます。

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: 'いっせい'};
  }
  
  render() {
    return (
    	<div>
    	  <h1>Hello {this.state.name}!</h1>
    	  
        <button onClick={() => {this.setState('React')}}>React</button>
     <button onClick={() => {this.setState('いっせい')}}>いっせい</button>
      </div>
    );
  }
}

export default App;

こんな感じでstateの情報が変更されます。

それでは、このボタンを押したらメソッドが実行されてstateを変化させられるようにします。

メソッド

先ほどsetStateを使って、stateに変更を加えましたが、次はメソッドを使って変更をします。

さっきとほとんど変わりません。

handleClick()メソッドをsetStateを使って定義します。

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: 'いっせい'};
  }
    handleClick(name){
      this.setState({name:name});
    }
  
  render() {
    return (
    	<div>
    	  <h1>Hello {this.state.name}!</h1>
        <button onClick={() => {this.handleClick('React')}}>React</button>
        <button onClick={() => {this.handleClick('Vue')}}>Vue</button>
        
      </div>
    );
  }
}

export default App;

引数にnameを入れて、メソッドを先ほどのように定義しました。

これで先ほどと同じように出力が変えることができ、可読性が上がりましたね。

今日の学習はここまでです。

まとめ

今日はReactのJSXとStateについてやっていきました。

やっていることはほとんどVueと変わらないような感じですね。

それでは、次回もReactについてやっていきたいと思います。

最後まで読んでいただき、ありがとうございました。

-PROGRAMMING

Copyright © Iseblog ,@2020 All Rights Reserved.