wudtichaikarun / react-hook

Table Of Content

• ประกาศ Function Component
• Passing Props Component
• Lists Component
• Conditional JSX
• Form Handler
  • Form Input
  • Select and options
  • Button
• Children property
• Fragment Component
• Basic Styling
• Inner HTML
• Element Focus and Blur
• Default Props
• Javascript in JSX

ประกาศ Function Component

การประกาศ Component ใน react

Live Demo

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

Passing Props Component

การส่งตัวแปรออกมาจาก component

Live Demo

function App(props) {
  return <button onClick={props.clickHello}>{"Click Hello"}</button>;
}

<App
  clickHello={() => {
    alert("Hello!!!");
  }}
/>;

การส่งค่าเข้าไปใน Component และรับค่าจากข้างนอก Live Demo

function App(props) {
  return <div>{props.msg}</div>;
}
<App msg={"Hello!!!"} />;

Lists Component

สร้าง Component จาก Array loop

Live Demo

function BNK() {
  return (
    <div>
      {["Noey 💚", "Jane", "Mewnich", "Cherprang"].map((item, index) => {
        return <div key={index}>{item}</div>;
      })}
    </div>
  );
}
<BNK />;

Conditional JSX

การเพิ่มเงื่อนไขให้ React ด้วย JSX Live Demo

function Template(props) {
  return <div>{props.isShow ? <div>{"React in my life!!!"}</div> : null}</div>;
}
<Template isShow={true} />;

Form Handler

Form Input

Live Demo

function InputForm(props) {
  const [value, setValue] = useState("Hello!!!");
  const [check, setCheck] = useState(false);
  const [radio, setRadio] = useState("1");
  return (
    <div>
      <input
        type={"text"}
        value={value}
        onKeyPress={e => {
          setValue(console.log(e));
        }}
      />
      <br />
      <br />

      <input
        type={"checkbox"}
        onClick={() => {
          setCheck(!check);
        }}
      />
      <label>{check + ""}</label>
      <br />
      <br />

      <label>{`Now radio: ${radio}`}</label>
      <br />
      <input
        type={"radio"}
        checked={radio === "1"}
        onChange={e => {
          setRadio(e.target.value);
        }}
        value={1}
      />
      <label>{1}</label>
      <br />
      <input
        type={"radio"}
        checked={radio === "2"}
        onChange={e => {
          setRadio(e.target.value);
        }}
        value={2}
      />
      <label>{2}</label>
      <br />
      <input
        type={"radio"}
        checked={radio === "3"}
        onChange={e => {
          setRadio(e.target.value);
        }}
        value={3}
      />
      <label>{3}</label>
    </div>
  );
}
<InputForm />;

Select and Options

การใช้ <select>, <options> เพื่อทำ Dropdown list

Live Demo

const MeatOptions = ["Chicken", "Beef", "Pork"];
const BreadOptions = ["Galic", "Pamesan", "Italian"];

function App() {
  const [meatValue, setMeatValue] = React.useState(MeatOptions[0]);
  const [breadValue, setBreadValue] = React.useState(BreadOptions[0]);
  return (
    <div className="App">
      <select value={meatValue} onChange={e => setMeatValue(e.target.value)}>
        {MeatOptions.map(item => (
          <option key={item} value={item}>
            {item}
          </option>
        ))}
      </select>
      <br />
      <select value={breadValue} onChange={e => setBreadValue(e.target.value)}>
        {BreadOptions.map(item => (
          <option key={item} value={item}>
            {item}
          </option>
        ))}
      </select>
      <br />
      <h4>{"Delicious sandwich"}</h4>
      <code
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(
            { meat: meatValue, bread: breadValue },
            null,
            " "
          )
        }}
      />
    </div>
  );
}

Button

การ Handle HTMLButton event

Live Demo

function useCountState() {
  const [value, setValue] = React.useState(0);
  return [
    value,
    () => {
      setValue(value + 1);
    }
  ];
}

function App() {
  const [onClickValue, onClickIncrement] = useCountState();
  const [onEnterValue, onEnterIncrement] = useCountState();
  return (
    <div className="App">
      <h1>
        {onClickValue}
        <sup dangerouslySetInnerHTML={{ __html: "click" }} />
      </h1>
      <h1>
        {onEnterValue}
        <sup dangerouslySetInnerHTML={{ __html: "enter" }} />
      </h1>
      <button onMouseEnter={onEnterIncrement} onClick={onClickIncrement}>
        {"Increment !"}
      </button>
    </div>
  );
}

Children

การใช้ Children Property เพื่อ Render Component ที่อยู่ภายใต้ Component

Live Demo

const Silentman = () => <div />;
const Echoman = ({ children }) => {
  return <div>{children}</div>;
};

const Dialog = ({ msg }) => {
  return <div>{msg}</div>;
};
function App() {
  return (
    <>
      <Echoman>
        <Dialog msg="I am blind not deaf" />
      </Echoman>
      <Silentman>
        <Dialog msg="Silent but deadly" />
      </Silentman>
    </>
  );
}

Fragment component

การใช้ Fragment เพื่อ Render หลายๆ Component โดยไม่ต้องมี Parent

Live Demo

const Echoman = () => (
  <>
    <span>{"Boogie man!"}</span>
    <br />
  </>
);
function App() {
  return (
    <>
      <Echoman />
      <Echoman />
      <Echoman />
      <Echoman />
    </>
  );
}

Basic Styling

การจัดการ style attribute เบื้องต้นด้วย Class และ Inline style

Live Demo

// styles.css
.text-box {
  color: tomato;
}

function App() {
  return (
    <div className="App">
      <span className="text-box">{"Hello Tomato!"}</span>
    </div>
  );
}

Inner html

การใส่ค่า HTML string ลงไปใน React component ตรงๆ

Live Demo

const HTML = `
  <div style="color: red">
    Hello HTML!
  </div>
`;

function App() {
  return <div className="App" dangerouslySetInnerHTML={{ __html: HTML }} />;
}

Element, Focus / Blur

การสั่ง Focus input element

Live Demo

function App(props) {
  const inputRef = React.createRef();
  function handleClick() {
    inputRef.current.focus();
  }
  return (
    <div>
      <input ref={inputRef} />
      <button onClick={handleClick}>Focus input</button>
    </div>
  );
}

Default Props

การกำหนดค่า Default ให้กับ Component Properties

Live Demo

const Echo = props => {
  return <div>{props.msg}</div>;
};
Echo.defaultProps = {
  msg: "Hello World!"
};

function App(props) {
  return (
    <div>
      <Echo />
      <Echo msg="Hello Mars!" />
    </div>
  );
}

Javascript in JSX

การเรียกคำสั่ง Javascript ภายใน JSX tag

Live Demo

function SayHi() {
  return "Hi world";
}

function App() {
  return <div>{SayHi()}</div>;
}