React コンポーネントの仕組みを掴む！！(create-react-appを使用して爆速Hello World表示)

概要

初めてReactを触ってみて、コンポーネントの仕組みを掴むまでに時間が掛かったため、
流れを備忘録として残します。
create-react-appパッケージを利用するため、環境構築は必要ありません。

※細かい設定をされる方は環境構築からご自身でやられるのが良いかと思われます！

流れ

1.コンポーネントとは
2.Node.jsインストール
3.アプリ作成
4.コード

1.コンポーネントとは

コンポーネントとは、部品、パーツのことを指します。
Reactでは機能ごとにコンポーネント化し、以下参考画像の様に、複数のコンポーネントを組み合わせ見た目を作っています。

コンポーネントを表示させるには、
作成したコンポーネントをApp.jsで呼び出し、index.jsでJSX形式をHTML形式にすることで、表示が可能になるという仕組みです！！
※Todo.jsは作成したコンポーネントの例です！

2. Node.jsインストール

以下リンクからインストールが良いかと思われます
https://nodejs.org/ja/
元々はサーバサイドJavaScriptで使用されていたみたいですが、現在はフロントエンドでも使用されているとのことです。

3.アプリの作成

npx create-react-app '任意のアプリ名'
cd '任意のアプリ名'
npm start

公式より

Create React App は React を学習するのに快適な環境であり、React で新しいシングルページアプリケーションを作成するのに最も良い方法です。

上のコマンド実行にて以下の様な画面が立ち上がればOKです！

4. コード

次に作成したアプリを開き、src以下にjsのファイルを作成します。
※今回は、Todo.jsとします

Todo.js

import React, { Component } from 'react'; ①Reactをインポートする

class Todo extends Component {　②class名がcomponentの名前
  render(){
    return(
      <div className = "title">　③
        Hello World
      </div>
    );
  }
}
export default Todo; ④コンポネートをexportする

①作成したjsファイルでreactを使用します！という宣言をします
②class名がコンポーネント名になり、このクラスそのものがコンポーネントされます。
③return内はJSXで記載します。JSX内ではclassをclassNameとします！
④この記述によりコンポネートをexportし、App.jsにimportできる様にします

App.js

import React from 'react';
import Todo from './Todo';　①コンポーネントをインポート

function App() {
  return (
    < Todo/> ②JSX内にコンポネート記載
  );
}

export default App;

①作成したコンポーネントをimportします
**　※import コンポーネント名 from './ファイル名'**
②JSX内に<コンポーネント名/>と書きます

以上で、Hello Worldが表示されたはずです！

最後に

コンポーネントの説明メインになってしまったので、アプリ実装できたらまた記事にしたいと思います！

参考

https://ja.reactjs.org/
https://webkikaku.co.jp/blog/javascript/react-start/