React 超入門

ものすごく前にReact Native経由でReactを触りました。

React本体を実際に触ったことがなかったため、今回はReactで新しいプロジェクトを作成しようと思います。

https://ja.reactjs.org/

スポンサーリンク

Reactとは?

Facebookが開発しているUIに特化したJavaScriptライブラリ

新しいアプリケーションを作成

早速実際にMacローカル環境に新しくReactのプロジェクトを作成してみましょう!

$ node -v
$ npm -v

事前にバージョンを確認ください。

プロジェクト作成にあたって、Node >= 8.10 及び npm >= 5.6 の環境が必要となります。

# my-appという名前のプロジェクトで作成(名前はお好きなものを)
$ npx create-react-app my-app
$ cd my-app

ここまでで作成完了!

アプリケーション起動

$ yarn start

別タブで上記画面が表示されたら完了です!

プロジェクト構成

以下ディレクトリが作成されます。

  • node_modules:jsライブラリ
  • public:公開フォルダ
  • src:index.js / App.js / App.cssなど(主に触るディレクトリ)

src配下のjsファイルについて

src配下にはいくつかjsファイルがあります。

まずは、index.jsの中身を確認してみましょう!

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: https://bit.ly/CRA-PWA
serviceWorker.unregister();

react関連のimport・App.jsをimportしてidがrootの要素にレンダリングしている。

App.jsについて

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  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という名前でモジュール名を設定し、中身に関しては表示したいdomを設定していました。

public/index.html

上記がローカルでブラウザを立ち上げた際に実際にアクセスしているファイルです。

<!DOCTYPE html>
<html lang="en">
....長いので省略
    <div id="root"></div> ←id rootありました。
                 App.jsの内容をrenderする箇所
....長いので省略
  </body>
</html>

他にもcssファイルやserviceWorkerのファイルはありますが、今回は割愛します。

「public/index.html」のroot要素に対して、reactのコンポーネントが表示されるまでの流れはわかったかと思います。

試しにApp.jsの中身を書き換えてみて、遊んでみるのも良いかと思います。

まとめ

Reactに関して、今回はデフォルト表示や簡単にjsの流れを追ってみるところまで経験しました。

単純な1ページだけなら、この構成だけで良さそうですが、実際のところはreact-routerでページを増やしていったり、componetを分割したりと学習する部分は多くなると思いますが、最初は簡単なページを作ってみたりして、徐々に慣れていけば良いかと思いました。


スポンサーリンク
PAGE TOP