始めよう React（基礎編）！ Part 5 - 初めてのコンポネント

始めよう React（基礎編）！ Part 5 - 初めてのコンポネント:

仕事の関係で大分空きました。。。

本編では、前回紹介しましたcreate-react-appのベースを元に、

実際にコンポネントを作成する流れを理解して、reactの開発をイメージしましょう。

最初のコンポネントを作りましょ

前編でご紹介しました/src/App.jsの内容を 一度綺麗にしましょ。

要らない部分を削除して、
こんな感じになります。

/src/App.js

import React, { Component } from 'react'; 
 
class App extends Component { 
  render() { 
    return ( 
      <div>hello world</div> 
    ); 
  } 
} 
 
export default App; 
 

$ yarn start or $ npm startを使って、

実際のページは、こうなります。

---

bootstrapを使う

画面を見やすくするため、bootstrapを使います。

こちらは、前編紹介致しました。
/public/index.htmlのご登場です。

こちらは画面を綺麗に見える為にbootstrapを入れます！
bootstrap CDN

(中国のサイトですが、かなり使いやすいです！)

bootstrapを検索、

必要のバージョンを探して、
/public/index.htmlに書き込みます。

これでbootstrapがCDNから使用できるようになりました。
bootstrapについてはこちら
bootstrapについてはこちら
bootstrapについてはこちら

準備ができましたので、実際にコードを書きましょう。

Reactの書き方

/src/App.jsのファイルを のように書き換えます、

/src/App.js

import React, { Component } from 'react'; 
 
class App extends Component { 
  render() { 
    return ( 
      <div className="container"> 
        <div className="row"> 
          <div className="col-xs-1 col-xs-offset-11"> 
            <h1>Hello !!</h1> 
          </div> 
        </div> 
      </div> 
    ); 
  } 
} 
 
export default App 
 

一つ一つ説明して参りましょう。

/src/App.js

import React, { Component } from 'react'; 

React と Component はReactの固定の書き方で、

コンポネントを作るときは基本的に先頭に書き込みます。

/src/App.js

class App extends Component { 
  render() { 
    return ( 
    ); 
  } 
} 
export default App 

　このコンポネントを定義する
Appというclassを定義し、このclassはComponentを継承しています。

続いてrenderメゾットを定義して、JSXの内容をreturnします。

最後はAppというclassを出力します。

/src/App.js

<div className="container"> 

タグ内のclassについて

Reactの場合には、タグ内使ってるのはclassではなくて、classNameになります。

classはJavaScriptで使われているため、JSXコードを書くときはclassNameでclassを書きます。

これでAppというコンポネントができました！

コンポネントの使い方

前章で紹介しました。
始めよう React（基礎編）！ Part 4 - reactのファイル構成を理解しよう
/src/index.jsを見てみましょう。
行目で、
AppというコンポネントをApp.js(.jsは省略できる)から導入します。
行目で、
Appをタグに書き込みます。

これでAPPというコンポネントを出来ました。

実際のView

最後に

これでコンポネントを使うReactのWEBサイトが出来ました！

Reactは基本的にたくさんのパーツで、

一つのサービスを作るようなイメージになります。

次回は
複数のコンポネントを作る！
React開発によく使う便利ツール紹介。

を進んで行きます！

興味ある方是非見てください！