React 〜基礎編〜
category：web
書く機会が増えてきたので、React の導入から基礎をまとめる(備忘録)。
Create React App を利用
node.js インストール済みが前提。
Create React App をインストール
npm install -g create-react-app
shell へ反映
exec $SHELL -l
プロジェクト作成
create-react-app my-react-app
カレントを移動
cd my-react-app
reate-react-app を起動
npm start
localhost:3000/ で init 画面が表示される
JSX
JSX(JavaScript XML の略)、React のコンポーネント内でマークアップ言語を記述するための XML 風の構文。
React.Fragment
最上位に複数の要素を並べることができないので、React.Fragment (<div></div>) を利用
function App() {
return (
Hello, world!
texttext
);
}
空要素の要素末の/は省略できない
function App() {
return (
);
}
属性
class 属性は利用できないので代わりに className 属性を利用する
function App() {
return (
Hello, world!
);
}
for 属性は推奨されておらず代わりに htmlFor 属性を利用する。
function App() {
return (
);
}
value 属性は初期値が変更できないので変わりに defaultVlaue 属性を利用する。
function App() {
return (
);
}
checked 属性は初期値が変更できないので変わりに defaultChecked 属性を利用する。
function App() {
return (
);
}
style 属性は{}内にオブジェクトを書くことで指定できる
function App() {
return (
<h1 style={{color:'red',fontSize:'12px'}}>Hello, world!</h1>
);
}
JavaScript
JSX 内では{…}の内側に JavaScript を記述できる
function App() {
const className = 'red'
const text = '今の時間は'
const time = Date.now()
return (
<div className={className}>
{text}:{time}:{1+2+3}
</div>
);
}
三項演算子が多用される
function App() {
const flag = true
return (
{flag ? 'ok' : 'ng'}
);
}
三項演算子だと返り値に JSX が記述できる
function App() {
const flag = true
return (
{flag ? h1
: h2
}
);
}
if 文は&&を利用する
function App() {
const flag = true
return (
{flag && h1
}
);
}
即時関数内で JS の処理が実行できる
function App() {
let no = 1
return (
{(() => {
no++
return {no}
})()}
);
}
switch/case 文は即時関数を利用する(html を出力したくない場合は null を返す)
function App() {
let no = 1
return (
{(() => {
switch(no){
case 1 :
return h1
case 2 :
return h2
default :
return null
}
})()}
);
}
配列の処理は map を利用する
function App() {
const items = ['ばなな','りんご','みかん']
return (
-
{items.map(item =>
- {item} )}
JSX では配列処理時に key 属性の指定が必要
function App() {
const items = ['ばなな','りんご','みかん']
return (
-
{items.map((item,i) => <li key={i}>{item}</li>)}
コンポーネントの分離
React では独自に定義したコンポーネントを利用することができる
function MyH1() {
return (
Hello, world!
)
}
function MyH2() {
return (
texttext
)
}
function App() {
return (
コンポーネント毎に読み込むファイルを分けることができる
my-react-app/src/MyH1.js:
import React from 'react';
export default function MyH1() {
return (
Hello, world!
)
}
my-react-app/src/MyH2.js:
import React from 'react';
export default function MyH2() {
return (
texttext
)
}
my-react-app/src/App.js:
import React from 'react';
import MyH1 from './MyH1'
import MyH2 from './MyH2'
export default function MyH2() {
return (
Event
クリックイベント
function App() {
const handleClick = () =>{
console.log('ok')
}
return (
<div onClick={handleClick}>
click
</div>
);
}
export default App;
State
コンポーネントが持つ状態のことが State
import { useState } from 'react';
function App() {
const [myNo , changeMyNo] = useState(0)
return (
{myNo}
);
}
export default App;
ステートはオブジェクトなども指定できるが極力プリミティブ型の値を指定する
const [ステート , ステート変更関数 ] = useState(初期値)
import { useState } from 'react';
function App() {
const [isEditing , changeEditing] = useState(false)
const [tmpText , changeTmpText] = useState('')
const [myText , changeMyText] = useState('')
return (
{!isEditing
?
<p onClick={()=>changeEditing(true)}>「{myText}」</p>
:
<input
type="text"
value={tmpText} onChange={e=>changeTmpText(e.currentTarget.value)}
/>
<button
type="button"
onClick={()=> {
changeMyText(tmpText)
changeEditing(false)
}}
>change</button>
<button
type="button"
onClick={()=> {
changeTmpText(myText)
changeEditing(false)
}}
>chancel</button>
}
);
}
export default App;
Props
子コンポーネントに変数や関数を引き渡すための機能
function ChildComponent({myText}) {
return (
{myText}
)
}
function App() {
return (
関数を渡す場合
import { useState } from 'react'
function Button({increment}) {
return (
<button
type="button" onClick={()=>increment()}
>increment</button>
)
}
function App() {
const [myNo , changeMyNo] = useState(0)
const increment = () => { changeMyNo(myNo+1)}
return (
{myNo}
<Button increment={increment} />
)
}
export default App;
以上、ここまで、次回へ続く。
0