React勉強部屋その① JSXを修正してみよう😎

Reactの基本構文を編集してみよう

目次

1. Reactプロジェクトの説明
2. JSXを触ってみよう
3. Homework

Reactプロジェクトの説明

ここではcreate-react-appによって作成したReactプロジェクトの解説をします。

Reactの環境構築がまだの方は以下のページより環境構築を完了させてください。

[2022最新版] React環境構築方法 👍

srcディレクトリ下のApp.jsを見てみてください。
以下の部分がJSXとなります。(HTMLとはちょっと違うので注意です。)

JSXを触ってみよう

では今はこんな感じの画像が出てると思います。

それをこんな感じに修正しちゃいましょう

できましたか？

Reactはこんな感じで画面をいじっていけるとわかれば今日はOKです！
お疲れ様でした👍

Homework

1. Reactのロゴを消して真っ白にしてください
   

2. ボタンを作ってみてください
   ＊<button></button>を使用します。
   

3. ボタンを押すとアラートが出る様にしてください
   

上記の問題はプログラミングコミュニティであるProAcaが運営しております！
いつでも質問できる環境を整えていますので、ぜひご参加ください！

ProAca モダン技術専用のプログラミングコミュニティ

http://proaca.tech/