世界一優しいReactの基本その1 -JSXとは-

## はじめに
私が知っているJavaScriptってもうしかしてもう古い？！
ってことで、モダンなJavaScriptについて学んできました。
今回はReactについて学んで行きたいと思います。

https://qiita.com/k-tetsuhiro/items/fd50feeee323e08e8349

## React開発

### Appの作り方
ReactApp自体はCLIでかんたんに作成することが出来ます。
Node.jsが動く環境であれば下記のコマンドを実行することによって作成出来ます。

◇ 作成コマンド
```
$ npx create-react-app [プロジェクト名]
```

◇ 実行例）
```
$ npx create-react-app myapp
$ cd myapp
$ npm start
```

https://create-react-app.dev/docs/getting-started


### CodeSandbox
localに環境構築をするのがめんどくさい、、、！という人はこんなサービスがあります。

https://codesandbox.io/

簡単にReactの開発環境が立ち上がります。
![Screen Shot 2022-08-06 at 21.32.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174291/dcf96d7a-14b3-3a10-cc89-0fb9a8d6804a.png)

サンプルコードを書くときや、お試しAppを作成するときなどはこちらでサクッとやってしまうほうが便利です。


### Reactの基本
Reactでは一般的な`js`の書き方ではなく、`jsx`という記法があります。
先程紹介した`CodeSandbox`でReactのプロジェクトを作ってみるとこういうファイルが置いてあります。
![Screen Shot 2022-08-07 at 15.22.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174291/f933094c-41e5-6db4-c5d4-cc8daef42a35.png)

そして、ブラウザにはこのような文字が表示されています。
ではなぜこれが表示されているのかロジックを見ていきましょう。
![Screen Shot 2022-08-07 at 15.28.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174291/05b98968-948a-81fd-cf87-f773b505166f.png)


#### SPAについて
ReactはSPA(SinglePageApp)なので、**実際に表示されるhtmlはこのindex.html一つだけ**です。
そしてこのhtmlファイルにはブラウザで表示されている文字は書かれていません。
ここのid=rootになっている要素に対してJavaScriptで色々と操作してレンダリングをしていきます。
```index.html
<!DOCTYPE html>
<html lang="en">

<head>
	(省略)
</head>

<body>
	(省略)
	<div id="root"></div>
	(省略)
</body>

</html>
```

#### JavaScriptの動き方
では次にjsファイルを見ていきましょう。
index.jsというファイルの中でid=rootの要素に対してレンダリングをかけていることがわかります。
どのような要素をレンダリングするのかがroot.renderにかかれています。
ここで注目したいのが**Appというコンポーネント**を表示していることです。

```index.js
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root"); // id=rootに対してレンダリングしている
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

```

次にApp.jsを見ていきましょう。先程Appコンポーネントという単語が出てきましたが、jsxではこのように部品(コンポーネント)を別ファイルに分けることができます。App.jsでは`<div className="App">`という要素の中に`<H1>`と`<H2>`のタイトルを表示しているhtmlを返しています。ここのコンポーネントがブラウザ上で表示されていたいう事です。

```App.js
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

```


### jsxのルール
Reactではjsx記法を用いる書きましたが、jsxにはいくつかルールがあります。
App.jsを下記のように修正してみると、エラーが出ます。

```App.js
import "./styles.css";

export default function App() {
  return (
    <h1>React練習場</h1>
    <p>ここはみなさんが練習するReactの場所です</p>
  );
}
```

![Screen Shot 2022-08-07 at 15.51.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174291/7622bbb5-fec1-cae6-ea5f-64793b92878a.png)

重要なjsxのルールとして**returnでは1つのタグで囲われている必要がある**というエラーです。
なので、このエラーを解消したい場合、例えばdivタグなどで囲んであげればエラーが解消されます。
このようにコンポーネントでは、**必ず一つの要素に囲まれている必要**があります。

```App.js
import "./styles.css";

export default function App() {
  return (
    <div>
      <h1>React練習場</h1>
      <p>ここはみなさんが練習するReactの場所です</p>
    </div>
  );
}
```
![Screen Shot 2022-08-07 at 15.54.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174291/e4157a5c-5629-1324-58f3-a31f2c755b6c.png)

もしくはdivタグでなく空タグでも大丈夫です。divタグで囲むのと異なり、不要なタグが生成されません。
```App.js
import "./styles.css";

export default function App() {
  return (
    <>
      <h1>React練習場</h1>
      <p>ここはみなさんが練習するReactの場所です</p>
    </>
  );
}
```

### イベントやスタイルの扱い方
Reactで使うjsxではすこしだけ気をつけないといけない点があります。一般的なJavaScriptの書き方やhtmlの書き方がやや違います。

#### イベントの扱い方
例えば、一般的なJavaScriptではボタンを押したときのイベントは`onclick`で取得すると思います。
Reactで使うjsxの場合は`onClick`のようにキャメルケースになります。

```一般的な方法.html
<input type="button" value="button" onclick="test()">
```

```Reactのjsx.jsx
<button onClick={test}>ボタン</button>
```

#### スタイルの扱い方

またスタイル(css)の適用の仕方も少し変わります。通常のcssと同様にReactでも各タグにstyle属性をあてることでスタイルを適用することができます。ただし注意点としてCSSの各要素は**JavaScriptのオブジェクト**として記載します。
例えば文字を赤くしたい場合はこのような違いがあります。

```一般的な方法.html
<h1 style="color: red">タイトル</h1>
```

```Reactのjsx.jsx
<h1 style={{ color: "red" }}>タイトル</h1>
```

jsxではstyleを指定する時にJavaScriptを書くので。`style={}`のようの波括弧でかこみます。
その中に**オブジェクト**でcssに対応する要素を指定しています。そのため全体で見ると`style={{ ここにCSSを記載する }}`のような形になっています。そのため普通のCSSと同じ書き方をするとエラーになります。
JavaScriptのオブジェクトで指定できるので、以下のようにまとめて適用することも出来ます。

```sample.jsx
const contentStyle = {
    color: "red",
    fontSize: "20px"
};

return (
    <div>
        <h1 style={{ color: "red" }}>タイトル</h1>
        <p1 style={contentStyle}>説明</p>
    </div>
);
```

ここで気をつけたいのはスタイルも同様にキャメルケースを用いているという点です。
例えば、font-sizeではなくfontSizeになります。これは**JavaScriptのオブジェクト**として記載してるためです。


## まとめ
今回はReactの超基本のところを書いてみました。SPAやjsxなど初めてReactを触るときにわからないことだらけでしたが、ここの基本を理解しておくとこの後の学習が一気に進むと思います。
次回はコンポーネントを分けるメリットについて書いていきます。

https://qiita.com/k-tetsuhiro/items/88ae3c7eee4aa78942b8