【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のTutorialはFacebook社が出しているものなので、やっておいて間違いない！
- webのライブラリを読み込んでるだけなので、お手軽にreactを勉強できる
