React 備忘録 Progate
・return()の中に処理を記載する
・JSX = Javascriptのなかでhmtl構文のような構文をかける
→render()メソッドの中のretrurn()の中にJSXを記述する
→return()のなかは複数要素を一つの要素にまとめないといけない
（複数要素のままではエラー）
→JSXの中でJavascriptの変数を呼び出す場合は{}で囲む
→JSX内で同じクラスのメソッドを呼びだすときはthis.メソッド名
・JSXでは、/ / でコメントアウト
・JSXとHTMLでは書き方が微妙に異なってる
→
例えば、
<img src='画像のURL'>は <img src='画像のURL'/>
・render()メソッドの中でも、return()の外ではjavascriptがかける
→return()の中ではJSXを記述する
→returnの中でJavascriptを使いたい場合は{}で囲む
（変数など）
・JSX部分、つまりreturn内ではコメントは/ /になる
→Javascript内では、コメントはあくまで//
・JSXにボタン要素などが用意されている
・イベント
→イベントを使って、何かが起こった時に、処理を実行するように指定できる
→書き方は
<button イベント名={() => {処理} }> </button>
→のように、タグ内にアロー関数を記載する
→アロー関数はJavascriptなので{}で囲む必要あり
→使えるイベントは、JSXであらかじめ用意されている
onClick → ボタン押されたら
・state
→ユーザの動きに合わせて変わる値のこと
→stateの定義・stateの表示・stateの変更
・stateの定義
constructor(props) {
super(props);
this.state = {name: 'にんじゃわんこ'};
}
→
stateの定義はオブジェクトを使って定義する。
プロパティと値を自分で決める。
constructor(props)/ super(props)は定型文。
・stateの表示
→
render()メソッドの return()の中で定義したstateを呼び出せる
constructor(props) { }
render() {
return( <h1> {this.state.name} </h1> );
}
}
・stateの変更
→
イベントの関数の中でthis.setState()を使えばstateの値を変更できる
<button onClick={ () => {
this.setState({name: "にんじゃわんこ"})
}}></button>
・stateの変更はイベント操作をメソッド化しておくと便利
class App extends React.Component {
constructor(props) {
super(props);
this.state = {name: 'にんじゃわんこ'};
}
// handleClickメソッドを定義してください
handleClick(name) {this.setState({name: name})}
render() {
return (
<div>
<h1>こんにちは、{this.state.name}さん！</h1>
{/* onClickイベント内の処理を、handleClickメソッドを呼び出す処理に書き換えてください*/}
<button onClick={() => {this.handleClick("ひつじ仙人")}}>ひつじ仙人</button>
{/* onClickイベント内の処理を、handleClickメソッドを呼び出す処理に書き換えてください*/}
<button onClick={() => {this.handleClick("にんじゃわんこ")}}>にんじゃわんこ</button>
</div>
);
}
}
・Reactの処理の流れ
→
xx.js/ index.js/ index.htmlの3つのファイルを用いる。
xx.js -> 処理(JSX)の内容を書く
index.js -> xx.jsの処理(JSX)をhtmlに変換し、ここで指定したhtmlのidへ変換後のコードを挿入する。
index.html -> reactの内容を表示したい場所をid指定してく
・JSXにスタイルをつける
→
JSX内のhtmlタグには、ちゃんとCSSのスタイルが適用される。
タグにクラスをつけるときは、className='title'というようにclassNameを使うことに注意
・コンポーネント
→
Webページの画面を部品に分けて作る。
React.Componentクラスを継承して作る。
import React from 'react';
class Language extends React.Component{
render(){
return(
JSX
)
)}
}
・各種コンポーネントは、export/importと<コンポーネントクラス名/>を使って一つのJSファイルにまとめるっぽい
直接呼び出さない。
→index.jsで呼び出すファイルのJSXに記載する
・コンポーネントは一度作れば、何度でも呼び出せる
・JSXの中で呼び出すコンポーネントへpropsを使って値を渡すことができる
<コンポーネントクラス名 props名=値 props名=値 >
・propsを私たコンポーネントの中でthis.props.プロップス名とすれば指定の値を表示できる
・配列のmapメソッドで連続した同じコンポーネントの値を自動で変更していく →別ファイルのコンポーネントを呼び出し、自らのコンポーネントを定義する
mport React from 'react';
import Lesson from './Lesson';
class Main extends React.Component {
render() {
const lessonList = [
{
name: 'HTML & CSS',
image: 'https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/html.svg',
},
{
name: 'Sass',
image: 'https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/sass.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',
},
];
return (
<div className='main-wrapper'>
<div className='main'>
<div className='copy-container'>
<h1>Hello, World.</h1>
<h2>プログラミングの世界へようこそ！</h2>
</div>
<div className='lesson-container'>
<h3 className='section-title'>学べるレッスン</h3>
{/* lessonListに対して、mapメソッドを用いてください */}
{lessonList.map((lessonItem) => {
return(
<Lesson
name={lessonItem.name}
image={lessonItem.image}
/>
)
}
)
}
</div>
</div>
</div>
);
}
}
export default Main;
・JSファイルの分け方例
・ifによって表示する内容を変更するコンポーネント
import React from 'react';
class ContactForm extends React.Component {
constructor(props) {
super(props);
this.state = {
/* isSubmittedというstateを定義してください */
isSubmitted: false
};
}
render() {
/* 空の変数contactFormを定義してください */
let contactForm;
/* isSubmittedを条件式とするif文を作成してください */
if(this.state.isSubmitted === true){
contactForm = (
<div className='contact-submit-message'>
送信完了
</div>)
}
else{
contactForm = (
<form>
<p>メールアドレス（必須）</p>
<input />
<p>お問い合わせ内容（必須）</p>
<textarea />
<input
type='submit'
value='送信'
/>
</form>
)
}
return (
<div className='contact-form'>
{contactForm}
{/* 削除ここまで */}
</div>
);
}
}
export default ContactForm;
・入力値のstate管理
→
stateで入力値を管理して、{input value=}で紐付ける
・入力イベントはonChangeイベントで取得
→
eventとevent.taerget.value
import React from 'react';
class ContactForm extends React.Component {
constructor(props) {
super(props);
this.state = {
isSubmitted: false,
email: '',
hasEmailError: false,
};
}
handleEmailChange(event) {
const inputValue = event.target.value;
/* 定数isEmptyを定義し、入力チェックの結果を代入してください */
const isEmpty = inputValue === '';
/* hasEmailErrorを更新してください */
this.setState({email: inputValue, hasEmailError: isEmpty});
}
handleSubmit() {
this.setState({isSubmitted: true});
}
render() {
let emailErrorText;
if (this.state.hasEmailError) {
emailErrorText = (
<p className='contact-message-error'>
メールアドレスを入力してください
</p>
);
}
let contactForm;
if (this.state.isSubmitted) {
contactForm = (
<div className='contact-submit-message'>
送信完了
</div>
);
} else {
contactForm = (
<form onSubmit={() => {this.handleSubmit()}}>
<p>メールアドレス（必須）</p>
<input
value={this.state.email}
onChange={(event) => {this.handleEmailChange(event)}}
/>
{emailErrorText}
<p>お問い合わせ内容（必須）</p>
<textarea />
<input
type='submit'
value='送信'
/>
</form>
);
}
return (
<div className='contact-form'>
{contactForm}
</div>
);
}
}
export default ContactForm;
・isEmpty = inputValue === '' → inputValueが空文字列かどうかを代入
