@kakakakakkuさんに教えてもらったCodecademyのLearn ReactJS:PartIを受講してみた。業務でjavascriptを使っているけれども、jQueryが主なので非常にいい経験だった。わからなくても用意されている答えを教えてくれるので、自分のコードと答えのコードを見比べてどこが間違ったか理解できるようになっている。何かしら別の言語を触っていれば更に理解するのが早いと思う。
Learn ReactJS: Part IとLearn ReactJS: Part II
コースは大きく分けて2つある。今回はLearn ReactJS: Part Iについて取り組んだことについて書く。 Learn ReactJS: Part Iは3つのパートに分けられる。
- JSX
- Intro to JSX
- Advanced JSX
- 【Pro】JSX
- React Components
- Your First React Component
- Components and Advanced JSX
- 【Pro】Authorization Form
- 【Pro】React Components
- Components Interacting
- Components Render Other Components
- this.props
- this.state
- 【Pro】Random Color Picker
- 【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もあるので続けてやってみる