otaku-tokyo

 

React

最初に

Javascriptフレームワークは次の4つが存在しどれでもできることは変わらない

jQuery,React,Vue(Reactと似てる),Angular

ReactはjQueryに比べて

・仮想DOMを使っているので高速表示できる

・ネット上の情報量がすくない

・環境構築が面倒

・ReactNativeでスマホアプリも作れる

jQueryはもともとES6を実装しているブラウザが少なかった時代に(当時はES5が主流)、どのブラウザでも同じコードで動作するように作られたものなので、ES6が主流になったいま歴史的存在意義は失われつつあるが、今現在も多くのサイトで使われているので学ぶ価値はある。

開発環境構築

①Node.jsをインストールしてバージョン確認

$node -v

②Babelやwebpackなどのパッケージをまとめてインストール

$npm install -g create-react-app

➂ターミナルを再起動

(create-react-appコマンドを使うため)

④任意の場所にプロジェクトを作成

(今回はc:\に作成)

$create-react-app app-react

⑤作成したディレクトリ下でページを開いて確認

(Ctrl+Cでサーバー停止)

$cd app-react

$npm start

⑥App.jsのコードを全て消去し、コードを書く

import React from ‘react’;

class App extends React.Component{

//stateの定義

constructor(props){

super(props);

this.state={name: ‘わんこ’}; //セミコロン必要

}

//setState

click(name){this.setState({name: name});}

//JSX

render(){

return(

<div>

<h1>こんにちは{this.state.name}さん</h1>

<button onClick={()=>{this.click(‘ひつじ’)}}>ボタン</button>

</div>

);}}

//export

export default App;

 

 

※参考サイトはこちら

 

WordPressでReactを使えるようにする

add-header.phpにReactとReactDOM、Babelを読み込む(BabelはJSXをJSに変えるコンパイラ。scriptにtype=”text/react”といれることでscript内のJSXがJSにコンパイルされる)

 <head>
<script src=”https://fb.me/react-0.14.3.min.js”></script>
<script src=”https://fb.me/react-dom-0.14.3.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js”></script>
<script type=”text/babel” src=”〇〇.js” defer></script>
</head>

<body>

<div id=”react-test”></div>

</body>

 

※参考文献はこちら

カウントアップ機能

②stateの定義

constructor(props){

super(props);

this.state={count: 0};

}

➂setState

click(){this.setState({count: this.state.count + 1});}

④JSX

render(){

return(

<div>

<h1>{this.state.count}</h1>

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

</div>);}

 

 

 

レッスンボックス

language.js→app.js→index.js→index.html

React

–stylesheet.css

–index.html

–src–index.js


——-components–app.js

———————–language.js

[language.js]

import React from ‘react’;

class Language extends React.Component{

render(){return(<div>

{/*JSXではimgタグの最後にスラッシュが必要*/}

{/*classではなくclassName*/}

<div className=”midashi”>{this.props.name}</div>

<img className=”gazou” src={this.props.image} />

</div>);}}

export default Language;

[app.js]

import React from ‘react’;

import Language from ‘./language’;

class App extends React.Component{

 

const lists[

{name:’HTML&CSS’,image:’https://…’},

{name:’Javascript’,image:’https://…’}

];

//クラス名にprops名=”値”をつける

render(){return(<div>

{lists.map( (list)=>{return(

<Language name={list.name} image={list.image}/>

);})}

</div>);}}

export default App;

index.js内でapp.jsのJSXをHTMLに変換する必要がある

[index.js]

import React from ‘react’;

import ReactDOM from ‘react-dom’;

import App from ‘./components/app’;

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

index.htmlで読み込んだCSSがJSXにも適用される

[index.html]

<link rel=”stylesheet” href=”stylesheet.css”>

<div id=”root“></div>

[stylesheet.css]

.title{font-size:24px;}

 

 

モーダルウィンドウ

[Lesson.js]

import React from ‘react’;

class Lesson extends React.Component{

constructor(props){super(props); this.state={open: false}}

clickOpen(){this.setState({open: true});}

clickClose(){this.setState({open: false});}

render(){

let modal;

if(this.state.open){modal=(<button onClick={()=>{this.clickClose()}}>閉じ</button>);}

return(

<div>

<p>{this.props.name}</p>

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

{modal}

</div>

);

}

export default Lesson;

[App.js]

import React from ‘react’;

import Lesson from ‘./Lesson’;

class Main extends React.Component{

render(){

const lists=[{name:”HTML”,image:”https:~”}{name:”HTML”,image:”https:~”}]

return(

<div>

{lists.map((list)=>{

return(<Lesson name={list.name} image={list.image} />);

});}

</div>

);

}}

export default Main;

 

↓ここからお問い合わせフォームの作成

ContactForm.js

constructor(props){super(props); this.state={isSubmitted: false, email:””};}

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

render(){

let contactForm;

if(this.state.isSubmitted){contactForm =(<div>送信完了</div>)}

else{

contactForm=(

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

<p>メールアドレス(必須)</p>

<input value={this.state.email}/>

<p>お問い合わせ内容(必須)</p>

<textarea />

<input type=”submit” value=”送信” />

</form>)

}

return(<div>{contactForm}</div>);
}

a