【Part1】はじめてのReact+TypeScript

【Part1】はじめてのReact+TypeScript:

はじめに

初めまして。新卒入社3年目のフロントエンド（？）エンジニアです。

これまで自社の開発でVue + vuexを使ってきたのですが、ダラっとしたモチベーションの低下とVue.js以外への興味から、とりあえずReact.js(出来ればTypeScriptも)を触ってみることにしました。

この手の記事の投稿ははじめてなのでとりあえずメモ書き程度にやってことを纏めていきます。お手柔らかにお願いします。

とりあえずVue.jsでも良くやっていたHello Worldを出す所から簡単なTodoアプリを作る所までを目標に、公開は導入の部分までをReact.js公式のGet Startedを見ながらやってみます。

やってみる

導入

npx create-react-app my-app 
cd my-app 
npm start 

npxなるものを使うんですね。知りませんでした。

npm startを叩くと自動的にブラウザでlocalhost:3000のURLが開いて以下の画面が表示されました。

この辺りはVue.jsと同じような感じですかね。

中身を見てみる

ファイルの構成はこんな感じになってました。

- node_modules 
- public 
  - favicon.ico 
  - index.html 
  - manifest.json 
- src 
  - App.css 
  - App.js 
  - App.test.js 
  - index.css 
  - index.js 
  - logo.svg 
  - serviceWorker.js 
- .gitignore 
- package.json 
- README.md 
- yarn.lock 

srcの中身をもう少し見ていきます。

index.js

ここがエントリーポイントですね。
ReactDOM.render()で#rootのエレメントにAppコンポーネントをバインドしているようです。
seviceWorkerは使ったことないのでとりあえず置いておきます。

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import './index.css'; 
import App from './App'; 
import * as serviceWorker from './serviceWorker'; 
 
ReactDOM.render(<App />, document.getElementById('root')); 
 
// If you want your app to work offline and load faster, you can change 
// unregister() to register() below. Note this comes with some pitfalls. 
// Learn more about service workers: http://bit.ly/CRA-PWA 
serviceWorker.unregister(); 
 

App.js

上記のindex.jsでバインドしていたAppコンポーネントの定義が書かれています。
vue-loaderを使ったVue.jsの書き方だと<component>タグとか<script>タグに分けて書いていましたが、reactだとclassでコンポーネントを定義するんですね。
Componentクラスを継承したクラスを作って、render()関数内に色々書けばいいみたいです。
JavaScriptの関数内でそのままタグを各記法（JSX？）も最初は気持ち悪かったんですが、この記事を書いている間に見慣れてきました。

import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 
 
class App extends Component { 
  render() { 
    return ( 
      <div className="App"> 
        <header className="App-header"> 
          <img src={logo} className="App-logo" alt="logo" /> 
          <p> 
            Edit <code>src/App.js</code> and save to reload. 
          </p> 
          <a 
            className="App-link" 
            href="https://reactjs.org" 
            target="_blank" 
            rel="noopener noreferrer" 
          > 
            Learn React 
          </a> 
        </header> 
      </div> 
    ); 
  } 
} 
 
export default App; 

App.test.js

テストコードですね。とりあえずスクリプトエラーが出ないことを試している程度の様です。

この辺りは基本的なreactの使い方を知ってからがっつり触りたいですね。

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 
 
it('renders without crashing', () => { 
  const div = document.createElement('div'); 
  ReactDOM.render(<App />, div); 
  ReactDOM.unmountComponentAtNode(div); 
}); 

その他

その他は.cssとかpackage.jsonなんかの見慣れたファイルなので省略。

終わりに

とりあえず導入して画面を出す所まで、簡単にコードを見てみるところまでをやってみました。

入り口のとっつきやすさはVue.jsと同じような感じで、JSXの記法も慣れれば違和感はないですね。

次回は公式ガイドのHelloWorldからHandling Eventsぐらいまでをだらだらやってみます。