はじめに
ポートフォリオ 作成のためにReactについて学ぶ
今回は2回目のアウトプット
前回の記事はこちら
https://qiita.com/kiyomasa05/items/97f58a8c8d0c08d9f8fd
Reactがブラウザに表示される流れ
- App.jsに書かれているJSXは最終的にHTMLに変換されて、ブラウザに表示される
- index.js内で「ReactDOM.render(, ...」と書くことで、App.jsのJSXが、HTMLに変換される
- 「..., document.getElementById('id名'));」と書くことで、変換されたHTMLがindex.htmlの指定したid名の要素の中に挿入される
app.js
import React from 'react';
class App extends React.Component {
render() { //ここからJSXこの中身がブラウザに表示される
return (
<div>
<h1>Hello World</h1>
<p>一緒にReactを学びましょう！</p>
</div>
);
}
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
// 2,3こう書くことでid rootにJSXが表示される
ReactDOM.render(<App />, document.getElementById('root'));
ブラウザ側
index.html
<!DOCTYPE html>
<html>
<head>
<title>React App</title>
</head>
<body>
<!-- ここにJSXが入る -->
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
CSSについて
JSX内で指定したdivタグなどに通常通りCSSを当てることができる
ただし、クラスの指定は
class="text"などはNGで、
className='クラス名'と書く。
コンポーネント
コンポーネントは「部品」や「パーツ」という意味。
Reactでは、見た目を機能ごとにコンポーネント化して、コンポーネントを組み合わせることでWebサイトの見た目を作る。
例）langageコンポーネントの作成
Language.js
import React from 'react';
// React.Componentを継承したLanguageコンポーネントを作成する クラス名がコンポーネント名になる
class Language extends React.Component{
render(){
return (
<div className='language-item'>
<div className='language-name'>HTML & CSS</div>
<img className='language-image' src='https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/html.svg' />
</div>)
}
// Languageコンポーネントをエクスポート
export default Language;
呼び出し側<コンポーネント名/>で呼び出す
App.js
import React from 'react';
// Languageコンポーネントをインポート fromからはファイル名を呼び込む、.jsは不要
import Language from './Language'
class App extends React.Component {
render() {
return (
<div>
<h1>言語一覧</h1>
<div className="language">
{/* Languageコンポーネントを呼び出す <コンポーネント名/>で呼び出す*/}
<Language/>
</div>
</div>
);
}
}
export default App;
コンポーネントの特徴
コンポーネントは一度作れば、何度でも呼び出せる
<div className="language">
<Language/>
<Language/>
<Language/>
</div>
他の言語を表示させるには？
propsを使う
props
App.jsから各言語の名前と画像のデータをLanguageコンポーネントに渡すことによって、言語ごとに表示を変えることが可能。
App.jsから渡すこのデータをprops（プロップス）という。
propsは、「props名=値」という形で、コンポーネントを呼び出す箇所で渡す。
App.js
<Language
name='HTML&CSS'
image='https://...'
//props名＝値
/>
渡されたpropsは、this.propsで取得
this.propsと書くことで{props名: 値}というオブジェクトを取得できる
this.props.props名とすることでpropsの値を取得
Language.js
省略
class Language extends React.Component {
render() {
return (
<div className='language-item'>
{/* props名nameの値を表示する */}
<div className='language-name'>
{this.props.name}
</div>
{/* props名imageの値を表示する */}
<img
className='language-image'
src={this.props.image}
/>
</div>
);
}
}
mapメソッド
繰り返し処理を行うことで、効率的に記入できる
App.js
import React from 'react';
import Language from './Language'; //Langageコンポーネントを呼び出し
class App extends React.Component {//Appコンポーネントを定義
render() {
// language配列を定義
const languageList = [
{
name: 'HTML & CSS',
image: 'https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/html.svg'
},
{
name: 'JavaScript',
image: 'https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/es6.svg'
},
{
name: 'React',
image: 'https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/react.svg'
},
{
name: 'Ruby',
image: 'https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/ruby.svg'
},
{
name: 'Ruby on Rails',
image: 'https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/rails.svg'
},
{
name: 'Python',
image: 'https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/python.svg'
}
];
return (
<div>
<h1>言語一覧</h1>
<div className='language'>
{/* mapメソッドでLanguageコンポーネントを表示 */}
{languageList.map((languageItem) => {
return (
// Languageコンポーネントを呼び出し、その中でpropsを渡す
<Language
name={languageItem.name}
image={languageItem.image}
/>
)
})}
</div>
</div>
);
}
}
export default App;
ブラウザに表示される流れ
コンポーネント
props
について学んだ
以上