CodecademyのLearn ReactJS:PartIを受講してみた

@kakakakakkuさんに教えてもらったCodecademyLearn ReactJS:PartIを受講してみた。業務でjavascriptを使っているけれども、jQueryが主なので非常にいい経験だった。わからなくても用意されている答えを教えてくれるので、自分のコードと答えのコードを見比べてどこが間違ったか理解できるようになっている。何かしら別の言語を触っていれば更に理解するのが早いと思う。

Learn ReactJS: Part IとLearn ReactJS: Part II

コースは大きく分けて2つある。今回はLearn ReactJS: Part Iについて取り組んだことについて書く。 Learn ReactJS: Part Iは3つのパートに分けられる。

  1. JSX
    1. Intro to JSX
    2. Advanced JSX
    3. 【Pro】JSX
  2. React Components
    1. Your First React Component
    2. Components and Advanced JSX
    3. 【Pro】Authorization Form
    4. 【Pro】React Components
  3. Components Interacting
    1. Components Render Other Components
    2. this.props
    3. this.state
    4. 【Pro】Random Color Picker
    5. 【Pro】Components Interacting

【Pro】とついているものは、有料会員限定コンテンツだった。Learn ReactJS: Part Iは有料会員でなくとも、Reactを理解するためには十分な内容だった。全ての内容が英語なので敷居が高いように感じられ、自分も実際躊躇してしまった。しかし比較的簡単な英語で書かれているし、ブラウザのアドオンなどで訳してから内容を進めてもいいと思う。自分はアドオンで訳しながら学んだ。Reactについては初めて学ぶので復習をする際には、英語で挑戦しようと思っている。

Intro to JSX

  • ReactはJavaScriptのライブラリ
  • Facebookのエンジニアが開発した
  • 画面上にJSX式を表示することをレンダリングという
  • ReactDOMはJavaScriptのライブラリ
    • ReactDOM.renderメソッドでJSXをレンダリングする  - renderメソッドには変数を渡すことが出来る
  • const h1 = <h1>Hello world</h1>;
    • この書き方はJSXと呼ばれる、HTMLのように見えるJavaScriptの構文

Advanced JSX

  • JSXではclassではなく、classNameを使う
  • JSXでは単一タグの末尾に必ずスラッシュをいれる
    • <img />
    • <br />
      • ×<br>
  • JSXタグの中にいても、JavaScriptのコードとして動かす場合は中括弧を使う{}
const name = 'Gerdo';
const greeting = <p>Hello, {name}!</p>;

const sideLength = "200px";

const panda = (
  <img 
    src="images/panda.jpg" 
    alt="panda" 
    height={sideLength} 
    width={sideLength} />
);

function myFunc() {
  alert('Make myFunc the pFunc... omg that was horrible i am so sorry');
}

<img onClick={myFunc} />


  • if文はJSX式に挿入できない
  • React.createElementの書き方もできる
const h1 = <h1>Hello world</h1>;
const h1 = React.createElement(
  "h1",
  null,
  "Hello, world"
);

Your First React Component

  • import React from 'react';import ReactDOM from 'react-dom';でインポートする
  • Componentには、renderメソッドがある
  • class名はUpperCamelCaseで書く
  • ReactDOM.renderにComponentのrenderメソッドを渡すことで呼び出すことが出来る
import React from 'react';
import ReactDOM from 'react-dom';

class MyComponentClass extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}

// component goes here:
ReactDOM.render(
    <MyComponentClass />, 
    document.getElementById('app')
);
);

Components and Advanced JSX

  • 複数行にわたるJSX式はカッコ()で囲む必要がある
  • componentの中でthisを使うことが出来る
  • componentの中でイベントリスナーを使うことが出来る

Components Render Other Components

  • conponentを相互作用させることによって、より強力となる
  • import { ClassName } from './filename';で別のコンポネントの取り込むことが出来る
    • をrenderで使う
  • 取り込まれるファイルのクラスや変数などは宣言の前にexportを付ける

this.props

  • propsでconponentからconponentへ情報を渡すことが出来る?
  • 難しい!理解不足!誰か分かりやすいサイト教えてくれないかな…

this.state

  • 自分自身のComponentの状態を管理する?
  • 難しい!理解不足!誰か分かりやすいサイト教えてくれないかな…その2

まとめ

  • CodecademyのLearn ReactJS:PartIを受講してみた
  • 最初は例文も多いが、途中から自分で書く部分も多くなり手を動かしながら学べた
  • 実行してすぐに答え合わせが出来るのもいいし、答えが用意されているのもありがたかった
  • this.propsとthis.stateが訳しながらということもあり、自分の中で理解が出来なかった。わかるように調べて理解し記事を書こうと思う
  • Learn ReactJS:PartIIもあるので続けてやってみる