React Tutorial

React の基本的な構文 component jsx に慣れる

Face BookのReact チュートリアルページ

• Tutorial: Intro To React - React

• Reactチュートリアル: Intro To React【日本語翻訳】

ハマった

Code Pen

CodePenで書くときと実際にコーディングするときはいろいろ違いがある

・import がない (基本は、以下の書き出しになるはず)

import React from 'react'
import ReactDOM from 'react-dom'
・
・
・

・Jsのソースが1ファイルに書かれている

・エラーが不親切(どこのエラーなのか、エラーメッセージも雑)

ローカルで作る

環境

このリポジトリの package.json webpack.cofig.json .eslintignore .eslintrc,json をコピー、

yarn install すれば、動くはず。

create-react-app

コピってくるほうがめんどいわって言う人向け。

cliでreactに必要な構成を準備してくれます。

細かい設定考えずに動かしたいときは、いいかもしれません。

• create-react-app(GitHub)

• 参考 -> Qiita

それでもめんどくさい

作ったよー

このリポジトリクローンすれば動くはず。 https://github.com/krhrtky/react_tutoral

↓で作っていた人のを参考にしました。 Reactで三目並べ | yosuke.saito

余談

TypeScript

静的型付けの機能を持ったAltJs TypeScript

↓を参考にReact.js + TypeScript でサンプルを作ってみました。

TypeScriptでReactを書く

やってみた感想： ジェネリクスが曲者かなと・・・・。

　　　　　　　　　　　　　　　　　　　　　　　　　　大規模になるとinterfaceとかも活かせるようになるんだろう。

サンプル