WEB Windows 初心者向け

【初心者向け】React.jsの基本を知りたい

React.jsってご存じですか?Facebookを中心に開発されているユーザインタフェース構築のためのJavaScriptライブラリです。Facebook、InstagramはReactで作られています。さらにReactを拡張したReacgt Nativeというライブラリを使えばJavaScriptでネイティブアプリも作れます。

Reactの特徴を教えてください。

値の更新を自動的にGUIに反映するリアクティブというメカニズムを備えています。

あと、仮想DOMという仕組みで高速にHTMLの表示を更新できます。

Reactを使うメリットとデメリットを教えてください。

メリットDOMから状態(state)を分離できる。部品毎にコンポーネントを作れるので再利用性が高い。応用編のReact Nativeを覚えればスマホアプリが作れる。エンジニアが不足してるらしいので需要が多いかもしれない。

デメリット情報が少なくて難しい。本格的な処理を作ろうとすると追加で必要な機能が多い(Node.js、babel、webpack、Redux、Next.jsなど)。Ajaxが苦手。

ありがとうございました。まだよくわかってませんが、1つ1つ勉強します。

私もReactの理解は時間がかかりました。焦らず1つ1つ覚えれば大丈夫ですので、まずシンプルなReactをご紹介しますね。

この記事で解決できること

  • Reactの基礎をすることが出来る。(ゆくゆくはReact Nativeでスマホアプリを作りたい人の基礎知識)

関連記事

【初心者向け】JavaScript無料学習(前編)

【初心者向け】JavaScript無料学習(後編)

【WEB】Nightwatch.jsでWEBアプリのUIテストを自動化できるらしい

【初心者向け】React.jsの基本を知りたい

【初心者向け】Node.jsのインストールと簡易Webサーバの実験

準備

Node.jsのインストール

JavaScriptのパッケージ管理ツール(npm)をインストールするためにNode.jsをインストールしておいてください。

 

Node.jsのインストール方法はコチラ。

【初心者向け】Node.jsのインストールと簡易Webサーバの実験

 

HTMLだけでReactを試す

①HTMLを書く

test.htmlというファイルを作成し、以下の内容を書きます。

②解説

7~9行目:reactreact-domCDN(Contents Delively Network)を読み込みます。※CDNと呼ばれるサーバ上のコンテンツ(今回はJavaScript)を読み込むことで、インストールせずにreactを使えます。

11~17行:”test”というidを持つ要素に対して独自CSSを書きます。今回ボタンの役目を持たせるためカーソルをポインタにしています。

20行目:divタグを作成し”test”というidを持つ要素を設定し、onclickイベントでcntUpという関数が呼ばれるようにします。---は初期状態で表示される文字列です。

21~30行目:今回の肝となるJavaScript。cntとdomという変数を定義。domに”#test”要素を紐づける。cntUp関数はまずcntをインクリメント(加算)し、「cnt: カウント数」という文字列を表示するためのpタグ(elem)を作成。ReactDOMrenderメソッドにdomとpタグ(elem)を渡し、レンダリングする。

③実行結果

初期状態はこんな感じです

灰色のエリアを1回クリックするとカウントが1になります

灰色のエリアを99回クリックしました(リセット機構はないので、飽きたらページを閉じてください

以上、1つのHTMLファイルだけでReactを試してみました。

Create React Appを試してみる

Create React Appというのは、Reactの学習用サンプルです。

①コマンドプロンプトを立ち上げる

「Win+R」を押して「ファイル名を指定して実行」ダイアログを出し、cmdと打ち込み「OK」を押します。

②Create React Appをインストールする

コマンドプロンプトに水色のコマンド(4行)を順に打ち込むとインストールしてCreate React Appを表示できます。途中で「Happy Hacking」というメッセージが出ればインストールが成功しています。ちなみに今回は「C:\temp\react」にインストールしました。

なお、水色のコマンドを最後まで打ち込むとWEBサーバが起動してCreate React Appのページが表示されますが、Ctrl+CでWEBサーバを終わらせることが可能です。

 command
C:\temp\react>npm install -g create-react-app
C:\Users\pavement1234\AppData\Roaming\npm\create-react-app -> C:\Users\pavement1234\AppData\Roaming\npm\node_modules\create-react-app\index.js
+ create-react-app@3.4.1
added 98 packages from 46 contributors in 12.319s C:\temp\react>create-react-app test Creating a new React app in C:\temp\react\test. Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template... > core-js@2.6.11 postinstall C:\temp\react\test\node_modules\babel-runtime\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}" > core-js@3.6.5 postinstall C:\temp\react\test\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}" > core-js-pure@3.6.5 postinstall C:\temp\react\test\node_modules\core-js-pure
> node -e "try{require('./postinstall')}catch(e){}" + cra-template@1.0.3
+ react-scripts@3.4.1
+ react@16.13.1
+ react-dom@16.13.1
added 1626 packages from 750 contributors and audited 1630 packages in 138.919s 59 packages are looking for funding
run npm fund for details found 1 low severity vulnerability
run npm audit fix to fix them, or npm audit for details
Git repo not initialized Error: Command failed: git --version
at checkExecSyncError (child_process.js:630:11)
at execSync (child_process.js:666:15)
at tryGitInit (C:\temp\react\test\node_modules\react-scripts\scripts\init.js:46:5)
at module.exports (C:\temp\react\test\node_modules\react-scripts\scripts\init.js:266:7)
at [eval]:3:14
at Script.runInThisContext (vm.js:120:20)
at Object.runInThisContext (vm.js:311:38)
at Object.<anonymous> ([eval]-wrapper:10:26)
at Module._compile (internal/modules/cjs/loader.js:1138:30)
at evalScript (internal/process/execution.js:94:25) {
status: 1,
signal: null,
output: [ null, null, null ],
pid: 23872,
stdout: null,
stderr: null
} Installing template dependencies using npm...
npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\jest-haste-map\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) + @testing-library/jest-dom@4.2.4
+ @testing-library/react@9.5.0
+ @testing-library/user-event@7.2.1
added 36 packages from 56 contributors and audited 1666 packages in 13.526s 59 packages are looking for funding
run npm fund for details found 1 low severity vulnerability
run npm audit fix to fix them, or npm audit for details
Removing template package using npm... npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\jest-haste-map\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) removed 1 package and audited 1665 packages in 7.435s 59 packages are looking for funding
run npm fund for details found 1 low severity vulnerability
run npm audit fix to fix them, or npm audit for details Success! Created test at C:\temp\react\test
Inside that directory, you can run several commands: npm start
Starts the development server. npm run build
Bundles the app into static files for production. npm test
Starts the test runner. npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back! We suggest that you begin by typing: cd test
npm start Happy hacking! C:\temp\react>cd test C:\temp\react\test>npm start > test@0.1.0 start C:\temp\react\test
> react-scripts start i 「wds」: Project is running at http://192.168.56.1/
i 「wds」: webpack output is served from
i 「wds」: Content not from webpack is served from C:\temp\react\test\public
i 「wds」: 404s will fallback to /
Starting the development server...
Compiled successfully! You can now view test in the browser. Local: http://localhost:3000
On Your Network: http://192.168.xx.1:3000 Note that the development build is not optimized.
To create a production build, use npm run build.

 

③ファイアウォールの警告が出るので「アクセスを許可する」をクリック

 

④Create React Appがブラウザで表示されます

⑤ソースを見てみる

「C:\temp\react\test\src\App.js」を開きます。※上記の通りインストールした場合はこの場所にあります。

トップページはこんな感じみたいです。Appという関数の戻り値としてHTMLが表示されるんですね。

 

まとめ

Reactの初歩の初歩をご紹介しました。Reactらしいことはやっておらず、今がスタート地点です。

次回はBabel、JSX、Redux、Next.jsなどを使った応用編をご紹介します。

 

関連記事

【初心者向け】JavaScript無料学習(前編)

【初心者向け】JavaScript無料学習(後編)

【WEB】Nightwatch.jsでWEBアプリのUIテストを自動化できるらしい

【初心者向け】React.jsの基本を知りたい

【初心者向け】Node.jsのインストールと簡易Webサーバの実験

  • この記事を書いた人
  • 最新記事

ペイヴメント

ペイヴメントのエンジニア塾(当ブログ)では20年以上の経験から得られたプログラミング系ノウハウについてベテランにも満足して頂けるような内容の濃いコンテンツを初心者にも分かりやすい形で日々発信しています。【経歴】ベンチャーのソフトハウスで4年勤務後、精密機器メーカーのソフト開発部門に勤務し今に至ります。

-WEB, Windows, 初心者向け

Copyright© ペイヴメントのエンジニア塾 , 2020 All Rights Reserved.