始めよう React(基礎編)! Part 5 - 初めてのコンポネント
始めよう React(基礎編)! Part 5 - 初めてのコンポネント:
仕事の関係で大分空きました。。。
本編では、前回紹介しましたcreate-react-appのベースを元に、
実際にコンポネントを作成する流れを理解して、reactの開発をイメージしましょう。
前編でご紹介しました![:arrow_down: :arrow_down:](https://cdn.qiita.com/emoji/twemoji/unicode/2b07-fe0f.png)
一度綺麗にしましょ。
要らない部分を削除して、
![:arrow_down: :arrow_down:](https://cdn.qiita.com/emoji/twemoji/unicode/2b07-fe0f.png)
こんな感じになります。
実際のページは、![:arrow_down: :arrow_down:](https://cdn.qiita.com/emoji/twemoji/unicode/2b07-fe0f.png)
こうなります。
画面を見やすくするため、bootstrapを使います。
こちらは、前編紹介致しました。
こちらは画面を綺麗に見える為にbootstrapを入れます!
bootstrap CDN
(中国のサイトですが、かなり使いやすいです!)
bootstrapを検索、
![:arrow_down: :arrow_down:](https://cdn.qiita.com/emoji/twemoji/unicode/2b07-fe0f.png)
![:arrow_down: :arrow_down:](https://cdn.qiita.com/emoji/twemoji/unicode/2b07-fe0f.png)
![:arrow_down: :arrow_down:](https://cdn.qiita.com/emoji/twemoji/unicode/2b07-fe0f.png)
![boot_CDN.png](https://camo.qiitausercontent.com/e3ed0469e663028405ff4a000742cc1d3f7f5099/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3239333432362f66366636353438332d373538632d303834342d356662662d3734616265333230656531652e706e67)
必要のバージョンを探して、
これでbootstrapがCDNから使用できるようになりました。
bootstrapについてはこちら
bootstrapについてはこちら
bootstrapについてはこちら
準備ができましたので、実際にコードを書きましょう。
![:arrow_down: :arrow_down:](https://cdn.qiita.com/emoji/twemoji/unicode/2b07-fe0f.png)
のように書き換えます、
一つ一つ説明して参りましょう。
React と Component はReactの固定の書き方で、
コンポネントを作るときは基本的に先頭に書き込みます。
このコンポネントを定義する
続いて
最後は
タグ内のclassについて
Reactの場合には、タグ内使ってるのはclassではなくて、classNameになります。
classはJavaScriptで使われているため、JSXコードを書くときはclassNameでclassを書きます。
前章で紹介しました。
始めよう React(基礎編)! Part 4 - reactのファイル構成を理解しよう
行目で、
行目で、
これでAPPというコンポネントを出来ました。
実際のView![:arrow_down: :arrow_down:](https://cdn.qiita.com/emoji/twemoji/unicode/2b07-fe0f.png)
![:arrow_down: :arrow_down:](https://cdn.qiita.com/emoji/twemoji/unicode/2b07-fe0f.png)
これでコンポネントを使うReactのWEBサイトが出来ました!
Reactは基本的にたくさんのパーツで、
一つのサービスを作るようなイメージになります。
次回は
複数のコンポネントを作る!
React開発によく使う便利ツール紹介。
を進んで行きます!
興味ある方是非見てください!
仕事の関係で大分空きました。。。
本編では、前回紹介しましたcreate-react-appのベースを元に、
実際にコンポネントを作成する流れを理解して、reactの開発をイメージしましょう。
最初のコンポネントを作りましょ
前編でご紹介しました/src/App.js
の内容を![:arrow_down: :arrow_down:](https://cdn.qiita.com/emoji/twemoji/unicode/2b07-fe0f.png)
![:arrow_down: :arrow_down:](https://cdn.qiita.com/emoji/twemoji/unicode/2b07-fe0f.png)
要らない部分を削除して、
![:arrow_down: :arrow_down:](https://cdn.qiita.com/emoji/twemoji/unicode/2b07-fe0f.png)
![:arrow_down: :arrow_down:](https://cdn.qiita.com/emoji/twemoji/unicode/2b07-fe0f.png)
/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
を使って、実際のページは、
![:arrow_down: :arrow_down:](https://cdn.qiita.com/emoji/twemoji/unicode/2b07-fe0f.png)
![:arrow_down: :arrow_down:](https://cdn.qiita.com/emoji/twemoji/unicode/2b07-fe0f.png)
bootstrapを使う
画面を見やすくするため、bootstrapを使います。こちらは、前編紹介致しました。
/public/index.html
のご登場です。こちらは画面を綺麗に見える為にbootstrapを入れます!
bootstrap CDN
(中国のサイトですが、かなり使いやすいです!)
bootstrapを検索、
![:arrow_down: :arrow_down:](https://cdn.qiita.com/emoji/twemoji/unicode/2b07-fe0f.png)
![:arrow_down: :arrow_down:](https://cdn.qiita.com/emoji/twemoji/unicode/2b07-fe0f.png)
![:arrow_down: :arrow_down:](https://cdn.qiita.com/emoji/twemoji/unicode/2b07-fe0f.png)
必要のバージョンを探して、
/public/index.html
に書き込みます。これでbootstrapがCDNから使用できるようになりました。
![:one: :one:](https://cdn.qiita.com/emoji/twemoji/unicode/31-fe0f-20e3.png)
![:two: :two:](https://cdn.qiita.com/emoji/twemoji/unicode/32-fe0f-20e3.png)
![:three: :three:](https://cdn.qiita.com/emoji/twemoji/unicode/33-fe0f-20e3.png)
準備ができましたので、実際にコードを書きましょう。
Reactの書き方
/src/App.js
のファイルを![:arrow_down: :arrow_down:](https://cdn.qiita.com/emoji/twemoji/unicode/2b07-fe0f.png)
![:arrow_down: :arrow_down:](https://cdn.qiita.com/emoji/twemoji/unicode/2b07-fe0f.png)
/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';
![:one: :one:](https://cdn.qiita.com/emoji/twemoji/unicode/31-fe0f-20e3.png)
コンポネントを作るときは基本的に先頭に書き込みます。
/src/App.js
class App extends Component { render() { return ( ); } } export default App
![:two: :two:](https://cdn.qiita.com/emoji/twemoji/unicode/32-fe0f-20e3.png)
App
というclass
を定義し、このclassはComponent
を継承しています。続いて
render
メゾットを定義して、JSXの内容をreturn
します。最後は
App
というclass
を出力します。/src/App.js
<div className="container">
![:three: :three:](https://cdn.qiita.com/emoji/twemoji/unicode/33-fe0f-20e3.png)
Reactの場合には、タグ内使ってるのはclassではなくて、classNameになります。
classはJavaScriptで使われているため、JSXコードを書くときはclassNameでclassを書きます。
これでApp
というコンポネントができました!
コンポネントの使い方
前章で紹介しました。
始めよう React(基礎編)! Part 4 - reactのファイル構成を理解しよう
/src/index.js
を見てみましょう。![:four: :four:](https://cdn.qiita.com/emoji/twemoji/unicode/34-fe0f-20e3.png)
App
というコンポネントをApp.js
(.jsは省略できる)から導入します。![:eight: :eight:](https://cdn.qiita.com/emoji/twemoji/unicode/38-fe0f-20e3.png)
App
をタグに書き込みます。これでAPPというコンポネントを出来ました。
実際のView
![:arrow_down: :arrow_down:](https://cdn.qiita.com/emoji/twemoji/unicode/2b07-fe0f.png)
![:arrow_down: :arrow_down:](https://cdn.qiita.com/emoji/twemoji/unicode/2b07-fe0f.png)
最後に
これでコンポネントを使うReactのWEBサイトが出来ました!Reactは基本的にたくさんのパーツで、
一つのサービスを作るようなイメージになります。
次回は
![:one: :one:](https://cdn.qiita.com/emoji/twemoji/unicode/31-fe0f-20e3.png)
![:two: :two:](https://cdn.qiita.com/emoji/twemoji/unicode/32-fe0f-20e3.png)
を進んで行きます!
興味ある方是非見てください!
コメント
コメントを投稿