React Learning

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

// Note: this structure is simplified
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// ES6 クラスも使用できます：

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}


const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

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

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

class Language extends React.Component {
  render() {
    return (
      <div className='language-item'>
        <div className='language-name'>{this.props.name}</div>        
      </div>
    );
  }
}

export default Language;

      <div className='language'>
          {languageList.map((languageItem) => {
              return (<Language name={languageItem.name} image={languageItem.image} />)
          })}
        </div>
      </div>

<Lesson
    name="HTML"
    image="https://html.jp"
 />

// 内部的に起こってそうなことを無理やり書くと
// インスタンスlessonがrender()を読んでる感じで、Reactの仕組みでlessonはpropsオブジェクトを持ってる
console.log(lesson.props) // -> {name: "HTML", image: "https://html.jp"}
lesson.render()

class Lesson extends React.Component {
  render() {
    return (
          <p>{this.props.name}</p> // thisとはメソッド呼び出し元であるlessonのこと
    );
  }
}

class Lesson extends React.Component {

  constructor(props) {
    super(props);
    this.state = {name: "HTML Lesson"}
  }

  render() {
    return(
      <p>{this.state.name}</p>
    )
  }
}

class Lesson extends React.Component {

  // constructor(props) {  // 暗黙的に省略されているっぽい
  //   super(props);
  // }

  render() {
    return(
      <p>CSSだよー！</p>
    )
  }
}

import React from 'react';

class Lesson extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isModalOpen: false};
  }
  
  handleClickLesson() {
    this.setState({isModalOpen: true})
  }
  
  render() {
    let modal;
    if (this.state.isModalOpen) {
      modal = (
              <p>{this.props.introduction}</p>       
      );
    }

    return (
      <div className='lesson-card'>
        <div
          className='lesson-item'
          onClick={ () => {this.handleClickLesson()} }
        >
          <p>{this.props.name}</p>
        </div>
        {modal}
      </div>
    );
  }
}

export default Lesson;

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

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

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval( // 戻り値はclearInterval()メソッドをもつintervalID
      () => this.tick(),
      1000 // これはインターバル間隔。ミリ秒単位なので1秒のインターバル=秒針ということ
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

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

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked, but prevented.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

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

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
  }

  handleClick() {
    // 省略
  }

  render() {
    return (
      <button onClick={() => {this.handleClick()}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

// 省略

this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0); // このuseStateという関数がフック

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

import React, { useState, useEffect } from 'react';

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

(alias) useEffect(effect: React.EffectCallback, deps?: React.DependencyList): void

// ちなみに (parameter) deps: DependencyList
// If present, effect will only activate if the values in the list change.

const subscribe = () => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return cleanup;
}

const cleanup = () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};

useEffect(effect: subscribe);