2021年2月11日

React

本当に始まっていないことを知りません
ユベンのジョン・バーマンだけが勝った.
https://www.youtube.com/watch?v=w7ejDZ8SWv8

App.js
import React from "react";
import Header from "./components/Header";

// function App() {
//   return (
//     <div className="container">
//       <Header />
//     </div>
//   );
// }

class App extends React.Component {
  render() {
    return <h1>Hello from a class</h1>;
  }
}

export default App;

Header.js

const Header = () => {
  return (
    <div>
      <h1>Task Tracker</h1>
    </div>
  );
};

export default Header;

App.js

import Header from "./components/Header";

function App() {
  return (
    <div className="container">
      <Header />
    </div>
  );
}

export default App;

Header.js

import PropTypes from "prop-types";

const Header = ({ title }) => {
  return (
    <header>
      <h1>{title}</h1>
    </header>
  );
};

Header.defaultProps = {
  title: "Task Tracker",
};

Header.propTypes = {
  title: PropTypes.string.isRequired,
};
export default Header;

Event

Header.js

import PropTypes from "prop-types";
import Button from "./Button";

const Header = ({ title }) => {
  const onClick = () => {
    console.log("Click");
  };

  return (
    <header className="header">
      <h1>{title}</h1>
      <Button color="green" text="Add" onClick={onClick} />
    </header>
  );
};

Header.defaultProps = {
  title: "Task Tracker",
};

Header.propTypes = {
  title: PropTypes.string.isRequired,
};


export default Header;

Button.js

import PropTypes from "react";

const Button = ({ color, text, onClick }) => {
  return (
    <button
      onClick={onClick}
      style={{ backgroundColor: color }}
      className="btn"
    >
      {text}
    </button>
  );
};

Button.defaultProps = {
  color: "stellblue",
};

Button.porpTypes = {
  text: PropTypes.string,
  color: PropTypes.string,
  onClick: PropTypes.func,
};

export default Button;

Create a list with .map()

Task.js

  "tasks": [
    {
      "id":1,
      "text": "Doctors Appointment",
      "day": "Feb 5th at 2:30pm",
      "reminder": true
    },
    {
      "id":2,
      "text": "Metting at School",
      "day": "Feb 6th at 1:30pm",
      "remider": true
    },
    {
      "id":3,
      "text": "Food Shopping",
      "day": "Feb 5th at 2:30pm",
      "reminder": false
    }
  ]