自社開発企業でWebアプリケーションエンジニア（※名前はいろいろあるので都合よく解釈してください）、Webアプリのうち各サブシステムを開発しているエンジニアです。
今回もReactについてメモ書きのような感じで書いていきます。
（ほんとは実際にブラウザで動かしてる方がいいのかもだが）
今回もProgateを使って学んでいきます。
※なお著作権等に引っかからないよう、文法的な書き方部分だけ抜粋していく感じ(Re-Write)で行こうと思います。
参考
前回についてはフロントエンド初心者でもReactは簡単？Reactの文法を学んでみた～序章～を見てください。
#表示の仕組み
Reactを利用するにはApp.jsのほかにindex.js,index.htmlが必要
※JavaScriptはHTMLがないとそもそも動かないのは基本中の基本である
App.js
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>Hello World</h1>
<p>こんにちわ！</p>
</div>
);
}
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render(<App />, document.getElementById('root'));
****の部分にApp.jsのrender()に記述した内容が渡される
index.html
<!DOCTYPE html>
<html>
<head>
<title>React App</title>
</head>
<body>
<div id="root">
<!--App.jsのrender()に記述した内容がここにバインドされる-->
</div>
<script src="bundle.js"></script>
</body>
</html>
id指定した部分に**document.getElementById('root')**つまりApp.jsのrender()に記述した内容が渡され表示される
#CSSの読み込み
index.html
<!DOCTYPE html>
<html>
<head>
<title>React App</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div id="root">
<!--App.jsのrender()に記述した内容がここにバインドされる-->
</div>
<script src="bundle.js"></script>
</body>
</html>
stylesheet.css
h1{
color:red;
}
p{
color:blue;
}
App.jsの
,
それぞれのタグに対し、cssが適用される。※通常のルール通り。
#CSSの読み込み（クラスを利用する場合）
ReactのJSX部分でクラス名をつける場合は、classNameとしなければならない。
App.js
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1 className="title">Hello World</h1>
<p className="text">こんにちわ！</p>
</div>
);
}
}
export default App;
index.js
※省略
index.html
<!DOCTYPE html>
<html>
<head>
<title>React App</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div id="root">
<!--App.jsのrender()に記述した内容がここにバインドされる-->
</div>
<script src="bundle.js"></script>
</body>
</html>
stylesheet.css
.title{
color:red;
}
.text{
color:blue;
}
#コンポーネント
Reactではクラス名がコンポーネントの名前になる。
import React from 'react';
class Greeting extends React.Component{
render(){
return (<div className='greeting-item'>
<div className='greeting-name'>Hello</div>
<img className='greeting-image' src='https://xxxx/hello.png' />
</div>);
}
}
export default Greeting;
######App.jsからGreetingコンポーネントを呼び出す
App.js
import React from 'react';
import Language from './Greeting'
class App extends React.Component {
render() {
return (
<div>
<h1>言語一覧</h1>
<div className="greeting">
<Greeting />
</div>
</div>
);
}
}
export default App;
#props（プロップス）
App.js
import React from 'react';
import Language from './Greeting'
class App extends React.Component {
render() {
return (
<div>
<h1>言語一覧</h1>
<div className="greeting">
<Greeting
name="Hello"
image="https://xxxx/hello.png"
/>
</div>
</div>
);
}
}
export default App;
- Greetingタグにname、textのようにprops名を定義することができる。
- そしてこれはGreeting.jsで取得可能
import React from 'react';
class Greeting extends React.Component{
render(){
return (<div className='greeting-item'>
<div className='greeting-name'>
{this.props.name}
</div>
<img
className='greeting-image'
src={this.props.image}
/>
</div>);
}
}
export default Greeting;
#mapメソッド
propsを利用してGreeting.jsをメソッドのごとく複数回利用できることが分かったが、では100回くらい使いたいとなった場合はどうだろうか。。。
App.js
import React from 'react';
import Language from './Greeting'
class App extends React.Component {
render() {
const greetingList = [
{name:'Hello',image:'https://xxxx/hello.png'},
{name:'こんにちは',image:'https://xxxx/hello_jp.png'},
];
return (
<div>
<h1>言語一覧</h1>
<div className="greeting">
{greetingList.map((greetingItem) => {
<Greeting
name={greetingItem.name}
image={greetingItem.image}
/>
})}
</div>
</div>
);
}
}
export default App;
import React from 'react';
class Greeting extends React.Component{
render(){
{
return (<div className='greeting-item'>
<div className='greeting-name'>
{this.props.name}
</div>
<img
className='greeting-image'
src={this.props.image}
/>
</div>);
}
}
export default Greeting;
#ここまでの感想
Vue.jsを少しかじったことあるが、Reactのほうがわかりやすいし簡単かもしれない。