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

2022/07/10に公開

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

目次

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

Reactプロジェクトの説明

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

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

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

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

JSXを触ってみよう

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

React環境構築完了

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

ReactHelloworld

できましたか?

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

Homework

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

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

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

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

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

http://proaca.tech/

GitHubで編集を提案

Discussion