[React] はじめます🎉

普段バックエンドのエンジニアをしているのですが、フロントエンドの技術が最近発展していると感じているのでReactをはじめます🙇‍♂️

（そろそろやらないとまずいという焦りが。。。😂）

今日はとりあえず導入までで。。。

Reactって？

Facebookが開発した、UIを作るのに特化したJavaScriptのフレームワークです！

node.jsをインストール

node.jsをインストールします。

なぜnode.jsが必要なのか？
Reactを使うにはnode.jsを入れてJavaScript単体で動く環境が必要なため。
node.jsがなかったら、HTMLで<script>タグを使ってJavaScriptを起動させなければいけない。

Create React Appではじめる

Reactを1から始めるためには、WebpackやBabelなどの知識をもって環境構築しないといけないため大変ですが、Create React Appを使うと難しい設定をしなくても簡単にReactを始めることができます。

今回は趣味レベルなのでこのやり方でやってみます！

npx create-react-app my-react-app

これで、Reactを動作させるために必要なツールがインストールされて環境が整います。

cd で作ったプロジェクトに移動して、npm start でアプリを起動します。

cd my-react-app
npm start

ブラウザにReactの画面が表示されたらOK！🎉

Hello World!

お決まりの「Hello world!」を画面に出力してみます。

my-react-app/src/ に「sample.js」ファイルを作成し、クラスを作ります。

import React, { Component } from 'react';
export default class Sample extends Component {
}

render()を使って「Hello World!」のHTMLを生成するようにクラスに追加します。

import React, { Component } from 'react';
export default class Sample extends Component {
   render(){
       return (
           <h1>Hello World!</h1>
       )
   }
}

さきほどReactを起動していた時に表示されていたReactの初期ページは、index.jsにimportされているApp.jsなので、そこをSample.jsに書き換えます。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Sample from './sample' // 追加した
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
 <React.StrictMode>
   <Sample /> // 変更した
 </React.StrictMode>,
 document.getElementById('root')
);

そして起動していた画面をみてみると。。

Hello World!が表示された画面に変わっています🎉

ちなみに、render()は一つのDOMしか返すことができません。

render(){
   return (
       <h1>Hello World!</h1>
       <p>Reactはじめました</p>
   )
}

↑これは<h1>と<p>2つのDOMを返そうとしているのでダメ

render(){
   return (
       <div>
           <h1>Hello World!</h1>
           <p>Reactはじめました</p>
       </div>
   )
}

↑これは<div>で囲んで1つのDOMにまとまっているのでOK

とりあえず今日はここまでで。。。

UIに特化してるフレームワークということで、色々作るのが楽しみです😊（UI好き）

おまけ

「Reactの環境作るのはめんどくさいけど、サクッとコード書いて試したい！」みたいなときはcodesandboxという無料で使用できるプロトタイピングツールがあります。

Reactだけじゃなく、VueやAngularも試せます！

最後に

今回お世話になったQiita

今まではJavaScriptはそこそこ経験してきたものの、もっぱらjQueryに頼って開発してきた旧型タイプの開発者

まさに私でした。。。