はじめに

背景

久しぶりにReactを触って、度々’これなんだっけ...’となったためおさらいをしようと思いました。
思い返すと初めて触ったときちんぷんかんぷんだったため、基本は大事だなと痛感しました。

そもそもJSXとは

JavaScript内にHTMLを埋め込むような記法のこと。

JSX記法いろいろ

アロー関数(ES6)

関数の定義を行う。
例: const <関数名> = (引数1, 引数2...) => { return a + b };

コンポーネントの定義を行う(関数コンポーネント)
例:const Header=()=> <h1> Test header </h1>

→タグが直接書ける!

{}(波括弧)

変数や式の展開を行う

注: ブロック分(ifなど)は記述できない(後述)。

コメントアウトはHTML準拠ではない

スプレッド構文(...)

オブジェクト、配列を展開する

Props (値を渡す)

例:

Stateとは(useState)

‘状態’を管理する(値の変化など)

例:

 function NameInput() {
const [name, setName] = useState(’’)
// nameは現在の値、setNameは値を変更する関数, useState(*)は初期値

useEffectとは

コンポーネントが描画されたタイミングで実行される

例:

useEffectの依存配列

引数なし: コンポーネントが描画されるたびに実行される
〔　〕(空配列) : 初回のみ実行される
[anyCount]: ←のようにするとanyCountが変化するたびに実行される

HTML属性(attribute)の記法(class)

HTML属性(attribute)の記法(style)

二重波括弧で列挙する
注: スタイル名は下記のように表記

NG (background-color)
OK (backgroundColor

if(){}の代替として三項演算子を使用する(波括弧内にブロック文は使えない)

最後に

個人的にVue.jsより直観的にわかりづらい点があると思っていますが、採用されることの多いライブラリのため、覚えておいて損はないと思います。

安心安全のホワイト高還元SESに転職を考えている方へ

新しい挑戦に踏み出すことは、人生において重要な一歩です。
転職活動は自分自身を知り、成長する貴重な機会でもあり、夢や成長を追求するためには必要な要素の一つになるかと思います。
どんな選択をされるにせよ、その決断があなたに取って素晴らしい未来を切り開くことを願っています！
グラディートと一緒に誇れるエンジニアを目指しましょう！

■『株式会社グラディート』では受託開発・SES・ブランディングデザイン・事業コンサルティングなどを事業として行う都内のIT企業です。現在、不遇な待遇で困っているエンジニアさんは、ぜひ一度グラディートに相談してみてね！（年収査定・SESへの転職相談も承っております！）

株式会社グラディート採用情報はこちら▼
https://en-gage.net/gradito/

株式会社グラディート公式サイトはこちら▼
https://www.gradito.co.jp/