React 初級編〜まずは触って見るところから始めてみた〜:

まず初めに、Reactをなぜ勉強中勉強しようと思ったのか、

苦手分野であったのでなるべく遠ざかっていたのだが少しでも理解していきたいと思った為。

ただ、初心者向けの記事がとかが意外と少なく読んだだけでは理解できなかったので、

実際に書いて見ようと思い初級編として書いています。

目標

Reactを使いこなせるのが一番いいのですが、最初からは無理だと思っている（諦めているわけではなく現実的に考えて）のでReactとは何か、使うには最低限どうしていけばいいのかなど理解できればと思います。

Reactにとりあえず触れてみる
簡単な実装をしてみる"Hello, World"など
コンポーネントを作り変換・表示など流れを理解する

初めに用意するもの

htmlをまずは用意する

<!DOCTYPE html> 
<html lang="ja"> 
<head> 
  <meta charset="UTF-8"> 
</head> 
<body> 
  <div id="content"> 
　　<!-- ここの中にレンダリングされる --> 
  </div> 
 
<!-- reactのライブラリーを読み込む --> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script> 
<!-- ES6を使うのでBabelも念のため入れておく --> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js"></script> 
 
  <script type="text/babel"> 
　　// ここにreactの記述を書いて行く 
  </script> 
 
</body> 
</html>

"Hello, World"をレンダリングしたい箇所を指定する今回は<div id="content">に表示させる

ReactDOM.render( 
  <h1>Hello, World</h1>, 
  document.getElementById('content') 
);

ReactDOM.render()で書き始める、この内容がコンポーネントとなり、

コンポーネント化されたものをhtmlに変換されdocument.getElementById('content')に表示される

<h1>Hello, World</h1> 
これがそのままcontentに入るわけではなく以下のようなメソッドと引数に分けられる。 
React.createElement( 
  "h1", 
  null, 
  "Hello, World" 
); 
React.createElement()というメソッド自体がReactコンポーネント作っている元になる。 
引数はReact.createElement(タグ名（html）,属性,内容);と言った形となる。

上記の書き方をコンポーネントぽい書き方に変更したものが以下になります。

class HelloWorld extends React.Component{ 
  render(){ 
    return ( 
      <div> 
        <h1>Hello, World!!</h1> 
      </div> 
    ) 
  } 
} 
 
ReactDOM.render( 
  <HelloWorld />, 
  document.getElementById("content") 
);

HTMLに似た書き方をJSXと呼ぶそうです。

一般的な書き方がJSXらしいのでなれるしかない。

JSXはHTMLと完全に互換では内容なので注意が必要。

このコンポーネントにcssをあてる場合、普通であれば

にcssを読みこませますが、

コンポーネントとして考えたい場合React側に追加することもできる。

注意

コンポーネントを設置する為にコンポーネントクラス名を用意する。

renderで生成したいHTMLはJSXに書く。

render(){ return( の中には1つのDOMしか記載ができない。

const style = { 
  ClassName: { 
    color: 'blue', 
    fontSize: 32 
  } 
}; 
 
class HelloWorld extends React.Component{ 
  render(){ 
    return ( 
      <div> 
        <h1 style={style.ClassName}>Hello, World!!</h1> 
      </div> 
    ) 
  } 
} 
 
ReactDOM.render( 
  <HelloWorld />, 
  document.getElementById("content") 
);

JavaScriptのオブジェクトでCSSを読み込ませる。

オブジェクトを定義して、style={}の中身をコンポーネントに読み込ませる。

ただし、この書き方だとインラインでの記載になるので個人的には好きではない。

ここまでで初歩的な処理が完了。

値を受け取りリスト表示する

上記を元に次は値を受け取りリストとして表示する方法。

class ItemList extends React.Component{ 
  constructor(props){ 
    super(props); 
  } 
 
  render(){ 
    return ( 
      <div> 
        <h1 style={style.ClassName}>Hello, World!!</h1> 
        <ul> 
          { 
            this.props.items.map((v, i)=> { 
              return ( 
                <li key={i}> 
                  <p>name:{v.name}</p> 
                  <p>text:{v.text}</p> 
                </li> 
              ) 
            }) 
          } 
        </ul> 
      </div> 
    ) 
  } 
} 
 
var items = [ 
  { 
    name: "ほげほげほげほげ", 
    text: "テキスト１テキスト１テキスト１" 
  }, 
  { 
    name: "ふがふがふがふがふが", 
    text: "テキスト２テキスト２テキスト２" 
  }, 
  { 
    name: "あいうえおあいうえお", 
    text: "テキスト３テキスト３テキスト３" 
  } 
]; 
 
ReactDOM.render( 
  <ItemList items={items} />, 
  document.getElementById("content") 
);

前段で行ったrenderメソッド処理を使ってリストを生成する。

変数のitemsにname,textを配列としていれそれをItemList側で呼び出す。

constructor

propsを引数として受け取り、propsにitemsの値が格納される。

super(props)は書き方の決め事で以下のエラーが出ないようにするためのもの。

「Uncaught SyntaxError: Inline Babel script: missing super() call in constructor」

this.props.items.map

propsに格納した配列をthis.props.items.mapで呼び出す。

その上でmapを使い配列の1要素ずつループして値を編集する。

結果liが配列分生成される。

変数の値を参照する場合は{v.name}で囲み呼び出す事ができる。

感想

今回Reactを勉強してみて思った事はVue.jsになんだか似ているなと感じた。

- ReactにするかVue.jsにする...

も読んでみて、どちらを使うかなどはケースバイケースもしくは好みの問題。

ただ、書き方的にはReactの方が個人的には使いやすい入りやすい感じがする。

基本的な動きが理解できこれをどう応用していくのかが今後の課題となると感じた。

コンポーネント設計
JSXで正しくhtmlを書かないとダメ
Propsに値（配列）を格納してDOMを生成しレンダリングする
render(){内には1つのDOMしか記載ができない
変数の値を参照する場合は{v.name}で呼び出せる

このブログを検索

IT音痴オーバーフォーティーおやじのストック記事倉庫

React 初級編〜まずは触って見るところから始めてみた〜

目標

初めに用意するもの

注意

値を受け取りリスト表示する

constructor

this.props.items.map

感想

参考

コメント

コメントを投稿

このブログの人気の投稿

投稿時間:2021-06-17 05:05:34 RSSフィード2021-06-17 05:00 分まとめ(1274件)

投稿時間:2021-06-20 02:06:12 RSSフィード2021-06-20 02:00 分まとめ(3871件)

投稿時間:2020-12-01 09:41:49 RSSフィード2020-12-01 09:00 分まとめ(69件)