📖

React【JSX・コンポーネント】用語理解まとめ(🔰）

2023/07/20に公開

React

はじめに

プログラミング初心者がReactの学習を始めて2日目で書いています。
基本的な用語の意味も分からなかったので、備忘録としてまとめました。間違っている点などありましたら教えてください😵

JSX

1.まずJSXってなんすか？

JavaScriptの構文の拡張で、JSXはテンプレート言語ではなく、Javasprictの機能をすべて備えたもの。
HTMLと同じような記法 でコードを書き進められるようになっています。似ているだけで別物なんですね。

JSX 記法はマークアップ手法のなかでも特殊な JavaScript 拡張記法で、「アプリが～～な状態ならば UI はこう表示する」といったように JavaScript の中に HTML タグを宣言し、書き込んでいきます。

HTML・CSS・JavaScriptを一つにまとめる方法があるとしたら？⇒そこで登場するのがJSX

２.メリット

JSXを使用することによって、書くコード量を減らすことができ、また、HTML風な構文で記述されるため、構造がわかりやすいというメリットがあります。

３.それでReact使うときのどこのことをいってんだ？

例えばこういうところとか…
参考画像１

<div>に<ClassName>とあります。これは、HTMLでCSSスタイルを当てるときに使ったclassと同じものです。

HTMLの記述の時は、

.html

	<div class="app">こんにちは</div>

こういう記述をしていた。
これがJSX、つまりReactの場合は上記の参考画像１のようになります。

他の例でいうとこういうことが起きているとか…。

	const element = <h1>Hello, world!</h1>;
	<--JSXコード-->

const element = React.createElement("h1", null, "Hello, world!");
<--このようなJavaScriptコードに変換されます。-->

コンポーネント

1.Reactの“ミソ”？

Reactは小さなコンポーネント（部品）を組み合わせてアプリを作っていきます。簡易的な例にはなりますが、例えばこういう部品でアプリを構成します。

この図であれば、「title」「form」「results」全体を包む「app」の４つのコンポーネント（部品)で出来ています。

では、コンポーネントごとにファイルを作っていきます。この記事には１つだけ載せています。下記の本を参考に勉強していますので、気になる方はこちらを読んでみてください。

実際のコードで見るとどういう感じか

拡張子は.jsであることに注意してください。

こんな感じで必要なコンポーネントの数分の.jsファイルを作っていくらしいです。

例えばtitle部分のコンポーネント。

Title.js

const Title = () => {
    return (
      <h1>React World Weather</h1>
    );
};


export default Title;

こっちがＡｐｐのコンポーネント。

App.js

import Title from "./components/Title";
<!-- 先ほどのTitle.jsを取り込む記述　↑ -->
import './App.css';

function App() {
  return (
    <div className="test">
      <Title />
      <!--　↑　App.jsのreturnのかっこの中に入れることで、
      Appの中に入った状態で、ブラウザ上に表示される-->
    </div>
  );
}

export default App;

コンポーネントをimportして自分で名前を付けたタグも<Title />のように使うことができます。

最後に

自分が根本知らなかった用語の大筋をまとめたものです。
とりあえず、大枠を抑えて制作を進めてみたいと思います。

参考にさせていただいたサイト