React

Reactの使用方法

Reactを使用する方法は3つある。

①CDNからの取得

やり方)

HTML内でScriptをcdnに向ければ即使用可能。。。

メリット・デメリット)

事前準備が必要なく、即座に開発できるのが利点だが、実行が低速になってしまう。

例)

<html>

<head>
<title>hello React</title>
<metacharset=”utf-8″>
</head>
<body>
<divid=”app”>
<!– my app renders here –>
</div>
<scriptsrc=”react/build/react.js”></script>
<scriptsrc=”react/build/react-dom.js”></script>
<script>
ReactDOM.render(
React.DOM.h1(
{
id:”my-heading”,
},
“Hello world!”
),
document.getElementById(‘app’)
);
</script>
</body>
</html>

npmコマンドによるインストール

別個にパッケージをインストール

create-react-appによるプロジェクトの作成

メリット)
Reactアプリの事項に必要なライブラリからビルドツール、開発サーバをまとめて使用できる

手順)
①node.jsのインストール
https://nodejs.org/ja/

②cmdでcreate-react-appをインストール
>npm installl -g create-react-app

③アプリの起動
>npm start(packege.jsonのあるフォルダで)

 

 

関連記事

  1. React

    ReactのDOM属性の予約語 class, forと注意が必要なstyle

    概要ReactのDOM属性では、class, forが予約語なので…

  2. React

    React 文法

    renderメソッド文法)render(com…

  1. イベント

    create-react-appのファイル構造と役割
  2. イベント

    SSL_TEST
  3. React

    ReactのDOM属性の予約語 class, forと注意が必要なstyle
  4. イベント

    htmlのlabelタグ for属性について
  5. React

    React 文法
PAGE TOP