React

① Reactをimport          import React from 'react';  
② React.Componentを継承  class App extends React.Component {　
③ JSXを戻り値とする          render(){
   renderメソッド  　　　　       // JavaScriptを記述
                                  return (
                                     {/* JSXで、HTMLベースの出力　1つの要素 */}
                                     <div>
                                         この中にJSXで記載
                                     </div>
                                  );
                              }
                          }
④ Appクラスをexport      export default App;

JSXについて
① コメントは、{/* コメント */}
② imgタグは、<img src="..." /> 閉じる
③ renderメソッドの戻り値(return内)で使う
④ JSX内にJSを埋め込むには、 { JavaScriptコード } として、中括弧で囲む

イベントの書き方例
<button イベント名 = { ()=> { 処理 } } > ボタン名 </button>
例
<button onClick = { ()=> { console.log("テスト") } }> テストボタン </button>

stateの定義(初期化)

constractor(props) メソッド
   super(props);
   this.state = { name : 'テキスト' };

stateの変更
handleClick(name) メソッド[例]
   this.setState( { name : name } );

JSX内での取得方法
　{ this.state.name }

stateの定義と表示

① stateの定義
constractor(props){
    super(props);
    this.state = { count : 0 };

② stateの表示
render(){
    return (
        <div>
            <h1> { this.state.count } </h1>
        </div>

③ stateの変更
handleClick(){
    this.setState( { count : this.state.count + 1 } );

変更
<button onClick = { ()=> { this.handleClick() } } >

React の 仕組み

「表示の流れ」
App.js ⇒ index.js ⇒ index.html

「ファイル構造」
[React] ----- index.html
          |
          --- [src] ----- index.js
                      |
                      --- [components] ----- App.js

App.js　   ① JSX が HTML が変換
   render(){
      return( // JSX // ) 

index.js　 ② 変換されたHTMLが root 要素にマッピング
   ReactDOM.render(<App/>, document.getElementById('root'));

index.html ③　id='root'にレンダリング
   <div id="root"> </div>

①　CSS を適用する　⇒　index.html 内 <link rel="stylesheet" href="アドレス">

②　JSXでクラス名をつける
　　　 htmlの場合は、 class = 'クラス名'
　　　 JSXの場合は、　className = 'クラス名'

※ コンポーネントをクラスとして作成、JSXに取り込み
コンポーネントを構成する
import React from 'react';
class Language extends React.Component {
    render(){
        return(
            {/* JSX */}
        );
    }
export default Language;

コンポーネントの利用
① コンポーネントをインポート
import Language from './Language';
② JSX内に<コンポーネント名/>と書く
< Language />

propsについて　※stateとは別

コンポーネントの可変部分を"props"として渡す
渡し方
< Language
        name = 'HTML'　　　　　　props名 = 値
        image = 'https://......' props名 = 値
/>

コンポーネントの内での使い方
Language.js
 { this.props.name }
 { this.props.image }

map の利用方法

const fruitList = ['リンゴ', 'ミカン', 'バナナ'];
JSXのreturn内
    { fruitList.map((fruitItem) => {
            return <p>{ fruitItem }</p>
    })}

コンポーネントに渡すパターン
{ languageList.map((languageItem)=>{
         return (
             < Language
                  name = { languageItem.name }
                  image = { languageItem.image }
             />
         )
})}

複数のコンポーネント(各jsファイル)
App --- Header
        Main --- Lesson
        Footer

コンポーネントの作成
① React の import    import React from 'react';
② ReactComponent     class Lesson extends React.Component {
③ JSXを戻り値とする       render(){
   renderメソッド               return( {/* JSX */} );
④ exportする         export default Lesson;

Main.js
    import Lesson from './Lesson';

    render()メソッド以下に配列を設定
    const lessonList = [ {name ='..', image='..'},{name ='..', image='..'},{...} ];
    return()メソッド内
    { lessonList.map((lessonItem)=>{
            return(
                < Lesson 
                    name  = { lessonItem.name }
                    image = { lessonItem.image }
               />
            )
    })}

Lesson.js
    { this.props.name }
    { this.props.image }

stateの定義
初期値設定
constructor(props){
    super(props);
    this.state = { isModalOpen : false }
};
stateの利用
render(){
    let modal;
    if(this.state.isModalOpen){
        modal = ( 
             複数行のJSX
        );
    return(
        <div>
            { modal }
        </div>

モーダルを開く
① stateを変更するメソッドを作成
handleClickLesson(){
    this.setState( { isModalOpen: true } );
② メソッドを呼び出す onClickイベント
<div onClick={ ()=> { this.handleClickLesson() } }>

モーダルを閉じる
① stateを変更するメソッドを作成
handleClickClose(){
    this.setState( { isModalOpen: false } );
② メソッドを呼び出す onClickイベント
<button onClick={ ()=> { this.handleClickClose() } }>

フォームの作成
①　フォームの見た目の作成
②　送信完了メッセージの準備
③　フォームとメッセージの切り替え

ContactForm.js
<form>
    <p>メールアドレス</p>
    <input />
    <p>お問い合わせ</p>
    <textarea />
    <input
        type='submit'
        value='送信'
    />
</form>

初期値
constractor(props){
    this.state = { isSubmitted: false };
render(){
    let contactForm;
    if(this.state.isSubmitted){
        contactForm = ( 送信完了メッセージのJSX );
    } else {
        contactForm = ( フォームのJSX );
    }
    return (
        { contactForm }
    )

handleSubmit(){
    this.setState({ isSubmitted: true });

<form onSubmit = { () => { this.handleSubmit() } } >

step1: stateとinputの準備
step2: 入力イベント入力値の取得
step3: stateの更新

step1
this.state = { ... , email: '', ... }
<input value = { this.state.email } />

step2
<input onChange = { () => { 処理 } } />
<input value = { this.state.email } 
       onChange = { (event) => { console.log(event.target.value) }} />

step3
① eventを引数で渡す
<input onChange = { (event) => { this.handleEmailChange(event) }} />
handleEmailChange(event){
    ② 入力値を取得
    const inputValue = event.target.value;
    ③ 入力値でstateを更新
    this.setState({ email: inputValue });

※ 入力値が空かどうかを管理する
constractor(props){
    this.state = { ..., hasEmailError: false, ... }

handleEmailChange(event){
    const inputValue = event.target.value;
    const isEmpty = inputValue ==='';
    this.setState( { email: inputValue, hasEmailError: isEmpty } );
}

render(){
    let emailErrorText;
    if(this.state.hasEmailError){
        emailErrorText = ( <p className='.....'
                                Emailを入力してください
                           </p> );
    return (
        <input value = { this.state.email } />
        { emailErrorText }

<input
    value = { this.state.email }
    onChange = { (event) => { this.handleEmailChange(event) }}
/>

※　入力値の管理と入力チェック
　　入力値の管理 content
    入力値が空か hasContentError
constractor(props)
    this.state = { content: '', hasContentError: false }

handleContentChange(event){
    const inputValue = event.target.value;
    const isEmpty = inputValue ==='';
    this.setState( { content: inputValue, hasContentError: isEmpty } );
}

render(){
    let contentErrorText;
    if(this.state.hasContentError){
        contentErrorText = (
            <p className='...'>
                お問い合わせの内容を入力してください
            </p>
        );
}

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

①イベント　と　②state
Reactの仕組み
コンポーネントの構成
mapメソッドを使って効率的に
サイト構築
サイト構築2
2つのstateと入力値の表示

①イベント　と　②state

①　イベント
イベント名 = { ()=> {処理} }
<button イベント名={ ()=> {処理}}> ボタン </button>
イベント名 : 「onClick」イベント

②　state

step1 : state　の　定義
step2 : state　の　表示
step3 : state　の　変更

オブジェクト
const user = { name: “にんじゃわんこ”, age: 14 };
プロパティ　値
user.age は「14」となる

※ State の　定義 : constructorの中でオブジェクトとして定義(stateの初期値)
クラスの下
　constructor(props){
super(props);
this.state = { name: ‘にんじゃわんこ’ };

※ State の　表示
render()の中
console.log(this.state); -> コンソールにオブジェクト表示 { name: ‘にんじゃわんこ’ }
return()の中
{ this.state.name } -> にんじゃわんこ

※ State の変更
this.setState({プロパティ名: 変更する値})
<button onClick={ ()=>{ this.setState( { name: ‘ひつじ仙人’} ) } } >

クラスの中で、メソッド名(){ 処理 }
Stateを変更するメソッド
定義　　 handleClick() { stateのnameプロパティの値を変更する }
呼び出し <button onClick = { ()=> { this.handleClick() } } >
App.js内のメソッド指定は、thisをつける
handleClick(name){ this.setState( { name: name } ); }

カウントアップ
※ stateの定義 this.state = {count: 0} (コンストラクタの中で定義)
※ steteの表示 <h1> { this.state.count } </h1>
※ stateの変更 handleClick(){ this.setState({ count: this.state.count + 1 });
呼び出し
<button onClick={ ()=> { this.handleClick() } } >

Reactの仕組み

React/Source/Component/App.js
↓
React/src/index.js
↓
React/index.html

render(){
return ReactDOM.render(<App/>, …) HTMLに変換

.render(<App/>, document.getElementById(‘root’));

index.html
<body>
<div id=”root”> “ここ”に挿入 </div>
</body>

CSS適用は index.htmlに
<head>
<link rel=”stylesheets” href=”stylesheet.css”>
</head>
JSXでクラス名をつける場合は、
class = “クラス名”　ではなく、 className = “クラス名”

コンポーネントの構成

import React from 'react';
class Language extends React.Component {
      クラス名 => コンポーネント名となる
    render(){
        return(      JSX       );
    }
}
export default Language; コンポーネントをexport

React/src/components/Language.js
↑　呼び出し
React/src/components/App.js : 挿入
↓
React/src/index.js : 変換
↓
React/index.html : 挿入

コンポーネントの表示
App.jsにて
①　コンポーネントをインポート　例 import Language from ‘./Language’;
②　JSX内に <コンポーネント名 />とする　例 <Language />

複数設置し、props にて詳細を変更
propsは、props名 = 値　で呼び出す箇所で渡します
<Language
name=‘HTML&CSS’,
image = ‘https://…….’
/> props名　値

propsで設定し、
render(){
console.log(this.props); 　→　オブジェクト出力
return ( JSX );
}

Language.js (コンポーネントクラス)
<div className= ‘language-name’ >
{ this.props.name } prop名
</div>
<img
className=’language-image’
src= { this.props.image } />

mapメソッドを使って効率的に

render(){
const fruitList = [ ‘リンゴ’, ‘ミカン’, ‘バナナ’ ];
return (
<div>
{
fruitList.map( (fruitItem)=> {
return <p>{ fruitItem }</p>
});
}
</div>
);
}

オブジェクトの配列 [ {オブジェクト}, {オブジェクト}, {オブジェクト} ]
mapで1つずつ取り出し、「オブジェクト名.プロパティ」で取り出せる
const LanguageList = [ { name: ‘HTML’, image:’https://…’}, { name: ‘CSS’, image:’https://

return ( <div>
{ LanguageList.map( (languageItem)=>{
return(
<Language
name = { languageItem.name }
image = {languageItem.name }

サイト構築

プロジェクトDirectory / src / component / の配下に
App.js
Footer.js
Header.js
Lesson.js
Main.js

Lessonコンポーネントの作成
※ Lesson.js
①　Reactのインポート　　　　　　　import React from ‘react’;
②　React.Componentの継承クラス　class Lesson extends React.Component {
③　JSXを戻り値とするrenderメソッド render(){
return ( **** JSX **** );
}
}

※ Main.js
import React from ‘react’;
import Lesson from ‘./Lesson’;
Class Main extends React.Component {
render() {
const lessonList=[
{name: ‘HTML&CSS’, image: ‘https://…’},
{name: ‘node.js’, image: ‘https://…’},
{name: ‘react’, image: ‘https://…’},
]
return (
{
lessonList.map( (lessonItem)=> {
return (
<Lesson
name= { lessonItem.name }
image= { lessonItem.image }
/>
)
}
}
)
}
}

※ Lesson.js
propsを取得
<p> { this.props.name } </p>
<img src={ this.props.image } />
モーダル
constructor(props){
super(props);
this.state= { isModalOpen: false } ←初期値

handleClickLesson() { this.setState({ isModalOpen: true });}
handleClickClose() { this.setState({ isModalOpen: false});}
modal変数にモーダル要素を入れる ⇒ return内に { modal }としておく
クリックしてモーダル表示する対象に onClick = {()=>{this.handleClickLesson()}}
クリックしてモーダル消去する対象に onClick = {()=>{this.handleClickClose()}}

サイト構築2

プロジェクトDirectory / src / components /
App.js
Main.js
ContactForm.js

ContactForm.js
JSX部分
　　　<form>
<p>メールアドレス</p>
<input />
<p>お問い合わせ</p>
<textarea />
<input type=”submit” value=”送信 />
</form>

※送信後にフォームを切り替える
constructor(props){
super(props);
this.state={ isSubmitted : false };
}

render(){
let contactForm;
if(this.state.isSubmitted){
contactForm = 送信完了JSX
} else {
contactForm = フォームのJSX
}
return(
<div className=’contact-form’>
{ contactForm }
</div>
);
}

送信した際に　isSubmitted を false から true に変更
<form onSubmit={ ()=>{処理} }>
① handleSubmit(){
this.setState({ isSubmitted: true });
}
② render(){
<form onSubmit={()=>{ this.handleSubmit()} }>

※ 入力値をstateで管理する手順
① this.state = { ….
email: ”,
}
return(
<input value= { this.state.email } />
② onChangeイベント
<input onChange={()=>{ 処理 }} />
onChange = {(event)=>{condole.log(evnet.target.value)}}
③ stateを更新
handleEmailChange(event){
const inputValue = event.target.value;
this.setState = ( { email : inputValue });
}
<input onChange={(event)=>{this.handleEmailChange(event)}} />

※ 入力値が空かどうかを管理する
constructor(props){
super(props);
this.state={ hasEmailError: false };
};
render(){
let emailErrorText;
if(hasEmailError){
emailErrorText = (
<p className=’contact-message-error’>
Emailを入力してください
</>
JSX
<input value={this.state.email} …../>
{emailErrorText }
inputValueが空のとき、hasEmailErrorをfalseからtrueに変える
　　handleEmailChange(event){
const inputvalue= event.target.value;
const isEmpty = inputValue === “”;
this.setState({
email : inputValue,
hasEmailError: isEmpty
});
}
<input onChange={(event)=>{this.handleEmailChange(event)}} />

2つのstateと入力値の表示

2つのstate ① content : “” ② hascontentError : false
<textarea value={ this.state.content } />

onChange と state 更新
<input onChange={(event)=>{this.handleContentChange(event)}} />

handleContentChange(event) {
const inputValue = event.target.value;
const isEmpty = inputValue===””;
this.setState = ({
content: inputValue,
hasContentError: isEmpty
});

render(){
if(this.state.hasContentError){
contentErrorText =(<p>タグエラー内容 );
<textarea value={this.state.content} />
{contentErrorText}

①イベント と ②state