- ประกาศ Function Component
- Passing Props Component
- Lists Component
- Conditional JSX
- Form Handler
- Children property
- Fragment Component
- Basic Styling
- Inner HTML
- Element Focus and Blur
- Default Props
- Javascript in JSX
การประกาศ Component ใน react
function App() {
return <div className="App" />;
}
การส่งตัวแปรออกมาจาก component
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!!!"} />;
สร้าง Component จาก Array loop
function BNK() {
return (
<div>
{["Noey 💚", "Jane", "Mewnich", "Cherprang"].map((item, index) => {
return <div key={index}>{item}</div>;
})}
</div>
);
}
<BNK />;
การเพิ่มเงื่อนไขให้ React ด้วย JSX Live Demo
function Template(props) {
return <div>{props.isShow ? <div>{"React in my life!!!"}</div> : null}</div>;
}
<Template isShow={true} />;
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>
, <options>
เพื่อทำ Dropdown list
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>
);
}
การ Handle HTMLButton event
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 Property เพื่อ Render Component ที่อยู่ภายใต้ Component
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 เพื่อ Render หลายๆ Component โดยไม่ต้องมี Parent
const Echoman = () => (
<>
<span>{"Boogie man!"}</span>
<br />
</>
);
function App() {
return (
<>
<Echoman />
<Echoman />
<Echoman />
<Echoman />
</>
);
}
การจัดการ style attribute เบื้องต้นด้วย Class และ Inline style
// styles.css
.text-box {
color: tomato;
}
function App() {
return (
<div className="App">
<span className="text-box">{"Hello Tomato!"}</span>
</div>
);
}
การใส่ค่า HTML string ลงไปใน React component ตรงๆ
const HTML = `
<div style="color: red">
Hello HTML!
</div>
`;
function App() {
return <div className="App" dangerouslySetInnerHTML={{ __html: HTML }} />;
}
การสั่ง Focus input element
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 ให้กับ Component Properties
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 ภายใน JSX tag
function SayHi() {
return "Hi world";
}
function App() {
return <div>{SayHi()}</div>;
}