すでにメンバーの場合は

無料会員登録

GitHubアカウントで登録 Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

登録がまだの方はこちらから

Pikawakaにログイン

GitHubアカウントでログイン Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

JavaScript

【JavaScript】 React tutorial〜環境構築をしよう!

ぴっかちゃん
ぴっかちゃん

Reactを勉強したいけど何から勉強して良いか分からない。。そんな方のための解説です。

Reactチュートリアル1

この章では、Facebook社が出しているReact Tutorialについて解説します。

ReactをTutorialで勉強していきましょう!

ReactのTutorialはFacebook社が出しているものなので、やっておいて間違いないです。
Reactを勉強したいけど何から勉強して良いか分からない。。

と誰かに言ったときに、ReactのTutorialは勉強した?と言われるほど、まず初めの勉強はTutorialというのがエンジニア界隈で常識としてあります。

Reactを実際に業務で使っていないエンジニアも、Reactって一体どういうものなんだろう?ということで、触ってみる人が多いです。

逆にReactのTutorialを勉強したといえば、Tutorialくらいの知識はあるんだ!と、自分のレベルを示唆する意味でも使えます。

なのでまずはReactのTutorialから勉強し始めましょう。

Tutorialで何を作るの?

Tutorialでは皆さん、小さい頃に砂場の上でしたかもしれませんが、◯✕ゲームを作ります。下記で実際にマルバツゲームが下記から出来ます。

下記のサイトはcodepenといってこのエディター上でもreactは動くので、ここでやってもらっても構いません。

筆者も初めにreactを触ったときはこのcodepen上から触りました。

◯☓ゲーム
それかcodepenは見にくい、自分の慣れているテキストエディターで使いたいという方は下記のコードをすべてコピーしてください。

htmlファイルだけでreactを学習できます。

自分のパソコンでreactを学習するとなると、ライブラリをパソコンにダウンロードする必要があるのですが、下記の方法だとwebのライブラリを読み込んでるだけなので、お手軽にreactを勉強できます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>React Sample</title>
  <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
  <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('root')
    )
  </script>
</body>
</html>

Reactを基礎から徹底的に学びたい!という方は、こちらの「Reactハンズオンラーニング 第2版」が参考になるでしょう。

実際に手を動かしてコンポーネントを作りながら学習を進めることができます。

Reactを扱えるようになるための必要なJavaScriptの知識も丁寧に解説しているので、コードの記述を理解できるようになります。

これから本格的にReact学ぶ人にも、復習したい人にもおすすめの1冊です!

Reactハンズオンラーニング 第2版
Reactハンズオンラーニング 第2版

Webアプリケーション開発のベストプラクティス!

この記事のまとめ

  • ReactのTutorialはFacebook社が出しているものなので、やっておいて間違いない!
  • webのライブラリを読み込んでるだけなので、お手軽にreactを勉強できる