IT二刀流にはプロモーションが含まれています。

reactのインストールから動作までやってみた

reactアイキャッチ

jQueryはもう古いなんて言われたので、最近流行のJavaScriptのライブラリReactを試してみた。

仕事でゴリゴリjsやjQueryを書いていたら、「化石みたいなコード書きますね。」なんて言われた(ToT)

なにやら最近は、JavaScriptのフレームワークやライブラリがはやっていてjQueryでも時代遅れらしい・・・(本当かよ。。)

今回はその1つのReactを試してみた。

Reactとは?

ReactとはFacebookが開発しているJavaScriptのライブラリ。特徴としてVirtual DOM(仮想DOM)というレンタリング機能を備えている。

Reactは情報をすぐに描画しないで、Virtual DOMで構造体を作成して、それを元にHTMLを生成してブラウザに描画する。

仮想DOMとかよくわからんけど(ちょっとは理解できる)、とにかく実践あるのみ!プログラマーはコードを書いて、デバックして、修正して覚える生き物だ!!(武道家が拳で語り合うのと同じさ。。)

Reactインストール

とりあえず公式ページ(https://facebook.github.io/react/)をあさってインストール手順をゲット、npmを利用するようなので、npmは必須です。

>npm install -g create-react-app

コマンドプロンプトで上記を実行すると、Reactプロジェクトを作成するコマンドがインストールされる。

Reactプロジェクト作成

次にReactプロジェクトを作成。プロジェクトフォルダを作成する場所で下記コマンドを実行する。

>create-react-app my-app

コマンドを実行すると下記のフォルダ構成が作成される。

my-app
├node_modules/
├public/
├src/
├.gitignore
├package.json
└README.md

これでReactに必要な環境がそろいます。

React実行

公式サイト通りとりあえず実行してみる。

>cd my-app
>npm start
You can now view my-app in the browser.
Local: http://localhost:3000/

実行するとlocalhost:3000にアクセスしろと出てきます。アクセス。。

reactのstart

おー動いてる。src/App.jsを編集して保存して、リロードしろって書いてあるので、App.jsをいじればいろいろ変えられるようです。

これでインストールから動作まで確認できました。ここからいろいろいじってみるか。。

ITエンジニアの転職

いまITエンジニアの需要は急拡大しています。
ITエンジニアの経験があれば好条件で転職することも難しくありません。

転職ドラフト

☆ 支援ご協力のお願い ☆

この記事が「役に立った」と感じたら

投げ銭の「OFUSEで応援」で支援して頂けたら励みになります!

OFUSEのやり方(説明)

関連記事
記事特集