Zenn
🐵

React入門 1

2023/08/02に公開
JavaScript
React
tech

Reactに今さら入門

いつかはやろうやろうと思っていて中々手がつけられていなかったのですが
ついに、Reactなどモダンフロントをやることにしました。

やろうと思ったきっかけ

なんかフロントって避けて通ってきた感があって
知っているようで何にも知らないことにある日気がついた。
そして知り合いから副業の案件が紹介してもらえそうな気運が高まったため
勉強していくことにする。

毎日学んだことを追記していきます。

プロジェクトの作成

一番最初に始めたこと
reactをやる人にはおなじみらしい。

npx create-react-app my-app

my-app内にプロジェクトが展開されておりました。
すべてはこのコマンドから始まるんだね、忘れないように。

そして次はこのコマンドらしい。
これでプロジェクトを立ち上げる

cd my-app
npm start

後で調べようと思うんだけど
npxとnpmって何がちがうんだろ、ちょっとややこしいな。

さっそくプロジェクト画面が立ち上がった

コンソールには下の文言が表示されている。

Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.3.27:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

webpackも名前だけ知ってて、結局何をしてくれるのか
具体的によくわかっていない(モジュールをバンドルしてくれるからだから何って感じ)

初めてのレンダリング

src/index.js
import ReactDOM from "react-dom";

をしてから
適当に変数(関数?)を定義してあげて(今回はApp)
それをrender関数として返してあげる。

src/index.js
const App = () => {
    return <h1>Hello React!!</h1>;
}
ReactDOM.render(<App />, document.getElementById("hello");

これでpublic/index.htmlの中にある
idがhelloの要素の中にh1タグのHello React!!が表示された。

ちなみにrender関数は1つの要素しか(入れ子はOK)返せないらしいので
Appのreturnに複数の要素を返させるとエラーになった。
これを回避するために「Fragment」やら「空タグ」などの概念があるそう。

// Fragmentの場合
import { Fragement } from "react";

const SomeRet1 = () => {
  return (
    <Fragment>
      <h1>Say Hello</h1>
      <h2>Say Hello again</h2>
    </Fragment>
  );
};
// 空タグの場合
const SomeRet2 = () => {
  return (
    <>
      <h1>Say Hello</h1>
      <h2>Say Hello again</h2>
    </>
  );
};

コンポーネント用拡張子の.jsxという存在

Reactで各コンポーネントを作って他のjsファイルに渡したいときにexportをして、
呼び出し元ではimportをすると受渡できるらしいのだが
その際、コンポーネントを定義してある方のファイルの拡張子は.jsxになるんだとか。
App.jsxに定義したAppというコンポーネントをindex.jsに渡すには
以下のようにexportとimportをそれぞれのファイルに書いてあげる必要があるみたい。

src/App.jsx
export const App = () => {
  return (
    <>
      <h1>HeadLine1</h1>
      <h2>HeadLine2</h2>
    </>
  );
};
src/index.js
import ReactDOM from "react-dom";
import { App } from "./App";

ReactDOM.render(<App />, Document.getElementById("hello");

コンポーネントは.jsx、JavaScriptとして処理をさせたい場合は.jsなど使い分けると良いみたい。

まだまだ続く
続くったら続く

Discussion