エンジニアじゃない人でもできるReact入門【導入編】

React

こんにちわ、ゆえっくま(@ux_bear)です。

僕は、本職のエンジニアではないのですが、フロントで何かと話題のReactを、まずは触って試してみることにしてみました。

こんな人向けの記事です

✔️HTML/CSS/JavaScriptは、まあ触ったことはある。

✔️まずは、Reactがどんなものか試してみたい。

✔️ソースの編集には、エディタ使いたい。

結論から言うと、実際やってみたところ、どんなものか試してみるのは、そこまでに難しくありませんでした…!

 まず、React入門 “Hello,World” からはじめていきたいと思います。

Reactを試してみよう

1. Node.jsを入れます。

Reactを使うには、“黒い画面”こと“ターミナル”を開いて設定が必要になります。

と言っても、そこまで難しい手順ではないので

Node.jsについては、こちらの記事にまとめているのでご参考ください。

2. Creat React Appをインストールします。

Facebook社が提供しているReact.jsのひな形を簡単に作れるcreate-react-appというものを使います。

こちらのコマンドを入力します。

$ npm install -g create-react-app

これを使うと、Reactを使うのに必要な準備ができてる状態にしてくれます。

3. create-react-appを使ってアプリを作成する

実際にコマンドで、Reactアプリを作ってみます。

$ npx creat-react-app test-react-app

指定したディレクトリ名(ここでは”test-app”という名前)でディレクトリが作られ、Reactに必要なものがインストールされます。

ディレクトリに移動しましょう。

$ cd test-react-app

コマンドを実行します。

$ npm start

なにやら起動が始まります。(サーバが立ち上がってます)

そして「http://localhost:3000/」のように、ローカルでブラウザが開くので

このような画面が表示されていたら成功です

4. ちょっと、いじってみる。

先ほど作成したReactのディレクトリの中身はこんな感じになっているので

Reactディレクトリ構成
Reactディレクトリ構成

お好きなエディタで「App.js」ファイルを開きます。

ターミナルからエディタやFinderを直接開きたい時は、openコマンドを使うと便利です。

open -a Atom src/App.js

ちょっと目に見える箇所に、変更を加えてみましょう。

”App.js”ファイルの、htmlの<p>タグの部分を変更してみました。

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
           「src/App.js」を書き換えてみましたよ。
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

リアルタイムに、ブラウザの方も表示の変更が反映されます。

Atomで”App.js”を少しいじってみる。

ようこそ、Virtual DOMの世界、シームレスな表示と遷移の第一歩ですね!

“App.js”は大元となるコンポーネントで、コンポーネントを追加していくことになります。”App.css”を編集すれば、デザインも変更できます。

Webで公開するには?

ここまで、ローカルの開発環境で。Reactを動かすことができました。
試すだけなら開発環境で十分だと思いますが

実際に世の中に公開するにはどうしたらいいのでしょうか?

5. ビルドする

先ほど”$npm start”で起動したプロセスを “Ctrl+C”などで止めます。

以下のビルドコマンドを実行します。 

$ npm run build

下記が表示されたらビルド成功です!

[抜粋]
Creating an optimized production build...
Compiled successfully.

“/build”ディレクりが作られ、公開に必要なファイルが中に作られます。

6. デプロイ(公開)する

AWSなどお持ちのサーバ環境に、作られた”/build”ディレクトリの中身のファイルをアップロードすれば、公開完了です。

個人的にはFireBaseを使ってますが、後ほどそのやり方も書いていきたいと思います。

まとめ

気になってはいたものの、サーバサイドが絡むと、ちょっと及び腰になっていたReactでしたが

ちょっと環境構築して、表示を試してみる分には特に問題なく楽しかったです!

関連記事

http://uxbear.me/2019/08/23/%e3%80%8c-firebase-%e3%80%8d%e3%81%a8%e3%81%af%ef%bc%9f-google-mbaas-%e3%81%a7%e9%80%b2%e3%82%80%e3%82%b0%e3%83%ad%e3%83%bc%e3%82%b9%e9%ab%98%e9%80%9f%e5%8c%96%e3%80%81%e3%82%b5%e3%83%bc%e3%83%90/

関連書籍

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA