# React入門会 (コピペ用)
開催日: 1/25(土)
時間13:30 ~ 17:30
開催地: Start Up Lab Lagoon

コピペ用資料です。コードはここからコピペしてください!
コードが動かない場合は、お知らせください。

Node入れていて欲しいけど、難しかった人はここで！
[codesandbox](https://codesandbox.io/)

## 仮想DOM参考資料
[VirtualDOMの仕事ってなに？](https://qiita.com/risagon/items/019942c60e9c3e6c05a5)

[リアルな DOM はなぜ遅いのか](https://blog.dodgson.org/b/2014/12/11/why-is-real-dom-slow/)

<br>

## Set Up (Hello,Reactまでの道)
1. プロジェクト作成
`npx create-react-app react_beginer`

2. 起動

- まずは、作ったディレクトリに移動
`cd react_beginer`
- 起動コマンド
`npm start`

- 起動が確認できたら `control+c`で一旦、Reactを落とす。
<br>

3. 今回使わないファイルの削除<br>
src配下全部消す。
`rm -rf src/*`<br>
マジですか？って聞かれるので、yes!と答えてください。
zsh: sure you want to delete all 8 files in /Users/shimabukuroyuuta/study/codebase/react_beiner/react_intro/src [yn]? y<br>
今回は勉強のため、初めから全部書きます！

4. src/index.jsを作る

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<h1>Hello,React</h1>, document.getElementById('root'));

- 起動コマンド
`npm start`

<br>

index.jsの簡単な説明。
<br>

Hello,React達成！！
<br>

## コンポーネントを作ってみる。
Hello,Reactをコンポーネントとして切り分ける。
後ほど詳しくコンポーネントはやるので、今は簡単に！

1. src/components/App.jsを作る<br>
a. srcの中にcomponentというディレクトリを作って、その中にApp.jsというファイルを作る。<br>
b. App.jsの中身を書く

**App.js**

import React, {Component} from 'react';

class App extends Component {
  render() {
    return <div>Hello,react</div>
  }
}

export default App;

<br>

2. insex.jsでApp.jsを読み込む
**index.js**

import App from './components/App'

<br>

3. React.DOMの第一引数をAppコンポーネントにする。

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

<br>

4. [localhost:3000](localhost:3000) にアクセスして、Hello,Reactが出ればOK

<br>

## JSX
一旦、JSXについては、スライド資料！

### JSXを使わないHello,React

class App extends Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello,React"
    );
  }
}

※Babelという仕組みがHTMLっぽい書き方をJSの書き方に直している。

[Babelの変換](https://babeljs.io/repl)

<br>

### jsの変数を含める書き方

class App extends Component {
  render() {
    const greet = "Hello,shimaboo"
    return <div>{greet}</div>
  }
}

<br>

### 複数の親タグをreturnで返せない

class App extends Component {
  render() {
    return <div>Hello,React</div>
    <p>I love React</p>
  }
}

- 一つのdivの中にタグをいくつも入れることは可能。
- 複数の親タグを作るとエラー出ます。
<br>

### 複数の親タグをreturnで返すReact.Fragment

class App extends Component {
  render() {
    return <React.Fragment>
      <div>Hello,React</div>
      <p>I love React</p>
    </React.Fragment>
  }
}

<br>

### 質問&休憩(10分)

<br>

## クラスコンポーネント
基礎的、学ぶならここから。

class App extends Component {
  render() {
    return <div>Hello,react</div>
  }
}

## 関数コンポーネント
省略的な書き方、主流。

function App() {
  return (
    <div>Hello,react</div>
  );
}

<br>

## props
- 親子の説明（親：const User | 子:<User/>）。
- Userコンポーネント（子）をたくさん作っても楽しい。

**App.js**

// 描画の処理
class App extends Component {
  render() {
    return <React.Fragment>
    <div><User name={"shimaboo"} email={"[e-mail]"}/></div>
    <div><User name={"yuta"} email={"[e-mail]"} tel={"090-0000-0000"}/></div>
    <div><User name={"hoge"} tel={"090-xxxx-xxxx"}/></div>
    </React.Fragment>
  }
}

// Userコンポーネント
const User = (props) => {
  return <React.Fragment>
    <div>USER: {props.name}　{props.email}　{props.tel}</div>
  </React.Fragment>
  }

<br>

## state
### ボタンを押すと数字が増えるCounterコンポーネントを作る！

**App.js**

// Appコンポーネント内のCounterコンポーネントの描画
class App extends Component {
  render() {
    return <div><Counter/></div>
  }
}
// Counterコンポーネント
class Counter extends Component {
  // 初期化処理
  constructor(props){
    super(props)
    this.state = { count: 0} 
  }
  // カウントアップ処理
  countUp = () => {
    this.setState({count: this.state.count + 1})
  }
  // コンポーネント自体の描画処理
  render(){
  return (
    <React.Fragment>
  <div>counter: {this.state.count}</div>
  <button onClick={this.countUp}>+1</button>
  </React.Fragment>
  )
  }
}

- constructorはCounterが呼び出される際に、最初に走る関数。
- constructor内で、superを用いて初期化処理とstateの初期値を定義する。
[参考：なぜsuper(props) を書くの?](https://qiita.com/hand-dot/items/61a4b808f110b12e4281)
- stateへのアクセスは、`this.state`。
- `this.state = {}`ができるのは、constructorの中だけ、他でやるとエラーする。
- setStateを用いて、値は書き換えないといけない
- setStateはstateの更新と変更したDOMの再レンダリングを行なってくれる、逆にsetStateを使わなければ再レンダリングが行われないのでエラーが出る。

<br>

### 時間があれば演習として使う。

## Counterを別ファイルに
再びコンポーネントを切り分ける練習。
まず、Counter.jsをApp.jsの隣に作ってください

**App.js**

import React, {Component} from 'react';
import Counter from './Counter';

// Appコンポーネント内のCounterコンポーネントの描画
class App extends Component {
  render() {
    return <div><Counter/></div>
  }
}

export default App;

**Counter.js**

import React, {Component} from 'react';

// Counterコンポーネント
class Counter extends Component {
  // 初期化処理
  constructor(props){
    super(props)
    this.state = { count: 0} 
  }
  // カウントアップ処理
  countUp = () => {
    this.setState({count: this.state.count + 1})
  }
  // コンポーネント自体の描画処理
  render(){
  return (
  <React.Fragment>
   <div>counter: {this.state.count}</div>
   <button onClick={this.countUp}>+1</button>
  </React.Fragment>
  )
  }
}

export default Counter;

<br>

見ていただきありがとうございました。