React備忘録

勉強しながらメモしたことをそのまま記述しています。

・React
FacebookやAirbnbやDropboxやProgateが利用している
サイトの見た目の部分を作ることができる。

ReactNativeというものもあり、iOSとAndroid両方のスマートフォンアプリを作ることができる

ボタンを押すとHTMLが切り替わったり、カウンタのようなものを作れる

・App.js
class App extends React.Component{
render(){
return(
<h1>Hello World</h1>
);
}
}

・JSX
HTMLではなくJSX
JAVA SCRIPT XML

render returnの中にHTMLを書ける
class App extends React.Component{
render(){
return(
<h1>Hello World</h1>
);
}
}

ただし、複数の要素を書くとエラーになるため、
必ず<div></div>でくくるなどする

・コメント
{/* コメント */}

・imgタグ
<img src='URL' />

※末尾が/>となっているところめっちゃ注意！

・App.jsの構成
テンプレート
import React from 'react';

class XXXXXXXX extends React.Component{
render(){
return(
);
}
}
export default XXXXXXXX;

・JSとJSXの違い
JSは全体、JSXはrenderの中のこと

・javascriptを記述する
const text = 'Hello World';

・javascriptに書いたものをJSXで使う
<div>{text}</div>

・JSとJSXのコメントの違い
JSX
{/* コメント */}

JS
//

・イベントとstate
重要

・ボタンを追加する
<butoon>ひつじ仙人</button>
<butoon>にんじゃわんこ</button>

・イベント
<button イベント名={() => {処理}}></button>

・onClickイベント
<button onClick={() => {処理}}>ひつじ仙人</button>

・コンソール出力
console.log('ひつじ仙人')

・state
stateの定義
stateの表示
stateの変更

・オブジェクトの復習
const user = { name:"にんじゃわんこ", age: 14 }
console.log(user.age)

・stateの定義
constructor(props){
super(props);
this.state = {name: 'にんじゃわんこ'}
}

・stateの表示
<h1>こんにちわ、{this.state.name}さん！</h1>

のような感じ

・stateの変更
this.setState({name: 'ひつじ仙人'})
this.setState({name: 'にんじゃわんこ'})

setStateメソッドを使わなければならないというルールがある。

※stateの値に直接代入することで値を変更してはいけないというルールがある
×this.state={name:'ひつじ仙人'};
×this.state.name='ひつじ仙人';

・メソッドの作成
メソッド名(){
//行いたい処理
}

handleClick(){
// stateのnameプロパティの値を変更する処理
}

呼び出し方は
this.handleClick()
のような感じ

メソッドに引数を渡す
handleClick(name){
this.setState({name: name});
}
呼び出し方
this.handleClick('ひつじ仙人')
this.handleClick('にんじゃわんこ')

・カウントアップ機能の作成
コンストラクタ
this.state = {count:0};

{this.state.count}

メソッド
handleClick(){
this.setState({count: this.state.count+1});
}

JSX
<button onClick={()=>{this.handleClick()}}>
+
</button>

・コンポーネントとprops

・表示の流れ
app.js→index.is→index.html

ファイル構造
React┳index.html
┗src┳index.js
┗components━App.js

・CSSをつけよう
読み込み
<link rel="stylesheet" href="stylesheet.css">

・JSXではclass名のつけかたが違うよ！
className='title'

・コンポーネント
パーツという意味
Languageコンポーネントを作る

・コンポーネントの構成
Language.js
import React from 'react';
class Language extends React.Component{
render(){
return(

);
}

}
クラス名がコンポーネントの名前になる！
最初はappっていう名前にしてたが、そこをLanguageにする

・コンポーネントの表示
Language.jsの末尾に以下を記述
export default Language;

App.jsの先頭に以下を記述
import Language from './Language';

JSX内に<コンポーネント名 />と書く
<Language />

・propsを学ぼう
propsは小道具という意味

・propsの渡し方
<Language
name = 'HTML & CSS'
image = 'https://....'
/>

・渡されたpropsの使い方
propsにはオブジェクトが入ってる
console.log( this.props );
return(
:
);

JSXで
this.props.name
this.props.image
のように取得できる。
thisを忘れないこと！

・mapメソッド
{fruitList.map( (fruitItem) => {
return <p>{fruitItem}</p>
})}

const languageList = [
{name:'HTML & CSS', image: 'https://...'}
];

{languageList.map( (languageItem) => {
return (
<Language
name={languageItem.name}
image={languageItem.image}
/>
);
})}

・モーダル
ポップアップのことをモーダルと呼ぶ

・
コンポーネントのファイル
components┳App.js
┣Footer.js
┣Header.js
┣Lesson.js
┗Main.js

・Lesson部分の作成手順
Lessonコンポーネントの作成
テンプレートを貼る
JSXを作成する
Lessonコンポーネントの表示
Main.jsでimport Lesson from './Lesson';とする
Main.jsで<Lesson />とする
Main.jsでpropsを作成する
const lessonItem={
name: 'HTML & CSS', image: 'https://///html.svg'
}
Main.jsでpropsを渡す
<Lesson
name={lessonitem.name}
image={lessonitem.image}
/>
Lesson.jsでpropsを受け取る
{this.props.name}
{this.props.image}
各レッスンの情報を表示
Main.jsに配列を用意
const lessonList=[
{name: 'HTML & CSS', image: 'URL'},
{name: 'Sass', image: 'URL'},
{name: 'JavaScript', image: 'URL'},
{name: 'React', image: 'URL'},
];
Main.jsでmapを使ってループ
{lessonList.map(( lessonItem )=>{
return(
<Lesson
name={lessonItem.name}
image={lessonItem.image}
/>
);
})}

・モーダルの作成手順
モーダルのJSXを追加する
Lesson.jsにレッスンの名前とレッスンの紹介文を表示する
<h2>{this.props.name}</h2>
<p>{this.props.introduction}</p>
初期状態でモーダルを隠す
Lesson.jsのconstructor(props)で、非表示にする
this.state={isModalOpen: false}

Lesson.jsに空の変数を用意する
let modal;

Lesson.js条件文で判定し、空の変数にモーダルを入れる
if( this.state.isModalOpen )
{
modal = JSX
}

Lesson.jsでmodalを表示する
{modal}

modalが複数行の時はかっこで囲む。ただし、末尾にセミコロンを忘れないこと

モーダルの表示・非表示
表示
Lesson.jsでstateをtrueにする処理を追加
handleClickLesson(){
this.setState({isModalOpen:true});
}

<img
src={this.props.image}
onClick={()=>{this.handleClickLesson()}}
/>

onClickはクリック時にメソッドを呼び出せる。既に用意されたメソッド

非表示
Lesson.jsでstateをfalseにする処理を追加
handleClickLesson(){
this.setState({isModalOpen:false});
}

・お問い合わせフォームの作成
フォームの作成手順
フォームの見た目の作成
入力欄のJSX
<form>
<p>アド</p>
<input />
<p>メッセ</p>
<textarea />
<input
type='submit'
value='送信'
/>
</form>

※タグの書き方がHTMLと異なることに注意
formはたぶん以降の手順でデータのやり取りのために必要

送信完了メッセージの準備
ContactForm.jsのconstructorに以下を追加する
this.state = {
isSubmitted: false,
};

renderに以下を追加
let contactForm;
if(this.state.isSubmitted)
{
contactForm = 送信完了JSX;
}
else
{
contactForm = フォームJSX;
}

フォームを表示する部分を以下のようにする
{contactForm}

フォームとメッセージの切り替え
formにイベントを指定する
<form onSubmit={()=>{処理}}>

handleSubmit(){
this.setState({isSubmitted: true});
}
<form onSubmit={()=>{this.handleSubmit()}}>

エラーメッセージを表示する
・入力値をstateで管理する
stateとinputの準備
stateに入力値を管理するstateを準備する
inputのvalueに{this.state.email}のようにstateと紐づける
入力イベント・入力値の取得
入力や削除が行われたときに処理を実行するイベントを追加
onChange={()=>{処理}}
入力値の取得
onChange={(event)=>{console.log(event.target.value)}}
stateの更新
handleEmailChange(event){
const inputValue = event.target.value;
this.setState({email:inputValue});
}

onChange={(event)=>{this.handleEmailChange(event)}}

・入力値をチェック
contactForm.jsのconstructorのstateに
hasEmailError:false,
を追加する

let emailErrorText;
if(this.state.hasEmailError)
{
emailErrorText = (
<p className='contact-message-error'>
Emailを入力してください
</p>
);
}

{emailErrorText}
・stateの更新
const isEmpty = inputValue==='';

複数のstateの同時更新
this.setState({
email: inputValue,
hasEmailError: isEmpty,
});

・お問い合わせ欄もstateで管理する
stateとtextareaの準備
content: '',
hasContentError: false,

<textarea value={this.state.content}>


入力イベント・入力値の取得・入力値のチェック
handleContentChange(event){
const inputValue=event.target.value;
const isEmpty = inputValue === '';
this.setState({
content: inputValue,
hasContentError: isEmpty,
});
}

<textarea
value={this.content}
onChange={(event)=>{this.handleContentChange(event)}}
/>

stateの更新
let contentErrorText;
if(this.state.hasContentError)
{
contentErrorText = (
<p>className='contact-message-error'
お問い合わせ内容を入力してください
</p>
);
}
<textarea
value={this.state.content}
{contentErrorText}
/>