ឯកសារ React + TypeScript ជាភាសាខ្មែរ

រៀនតាមរយះ Source Code នៅក្នុង Github Branches Repository:

Source Code គឺមានទៅតាម Branches នីមួយៗទៅតាមមេរៀន ដូច្នេះអ្នកអាចរើសតាម Branches បាន!

ជំនួយបន្ថែម:

ដើម្បីរៀនតាម Tutorial មួយនេះឲ្យកាន់តែឆាប់យល់ ឆាប់ចាប់បាន អ្នកគួរមើលវីដេអូ React Crush Course ខ្លះៗដែរ ដើម្បីជាជំនួយក្នុងការសិក្សាវាបន្ថែម។ ខាងក្រោមនេះគឺជាវីដេអូ: 👇

React Crash Course for Beginners 2021 - Learn ReactJS from Scratch in this 100% Free Tutorial! by Maximilian Schwarzmüller

React Tutorial - Fundamentals, Hooks, Context API, React Router, Custom Hooks by John Smilga

បញ្ចាក់ : វីដេអូខាងលើ 👆 ប៉ុន្មាននេះ គឺផ្តោតទៅលើការប្រើប្រាស់ React ជាមួយ JavaScript ដូច្នេះ JavaScript គឺមិនខុសគ្នាជាមួយ TypeScript ប៉ុន្មានទេ ដូច្នេះអ្នកអាចរៀនពីការប្រើ React ជាមួយ TypeScript នៅក្នុង Tutorial មួយនេះបាន។

តម្រូវការមុននឹងសិក្សា React + TypeScript:

មុននឹងអ្នកអាចរៀននឹង React JS បាន អ្នកត្រូវមានចំណេះដឹងទាក់ទងនឹងភាសា JavaScript, HTML និង CSS ជាមុនសិន។ បើទោះបីជា React JS មិនប្រើប្រាស់ HTML ក្តី តែវាប្រើ JSX ដែលវាដូចទៅនឹង HTML ដែរ ដូច្នេះ HTML គឺនៅតែជាចំណេះដឹងដែលសំខាន់សម្រាប់អ្នក។ យើងនៅតែប្រើប្រាស់ CSS ដដែល សម្រាប់កំណត់ Style ទៅឲ្យ Web page ហើយចំណែកឯ JavaScript វិញគឺយើងអាចប្រើបានទាំងពីរ Versions ពោលគឺ ES5 និង ES6។

ចំណុចពិសេសរបស់ React + TypeScript:

JSX – JSX គឺជា JavaScript XML។ វាប្រើសម្រាប់សរសេរកូដ XML ដើម្បីបង្ហាញលទ្ធផលនៅលើ Browser។
Components – នៅក្នុង React អ្វីៗទាំងអស់សុទ្ធតែជា Components ទាំងអស់។ ដូច្នេះការបង្កើត Web page នៅក្នុង React គឺយើងបង្កើតវាជា Components នីមួយៗឲ្យដាច់ពីគ្នា។
License – React បង្កើតឡើងដោយក្រុមហ៊ុន Facebook នៅថ្ងៃទី២៩ ខែឧសភា ឆ្នាំ២០១៣។

អ្វីទៅជា React?😯

React ជា library របស់ JavaScript ដែលប្រើសម្រាប់យកមកបង្កើតជា User Interface នៅក្នុង Website។

អ្វីទៅជា TypeScript?😲

TypeScript គឺដូចទៅនឹង JavaScript ដែរ ចំណុចដែលខុសគ្នានោះគឺថា ការសរសេរកូដដោយប្រើ TypeScript គឺប្រើប្រភេទទិន្នន័យត្រឹមត្រូវ តែបើ JavaScript វិញគឺចង់ប្រើប្រភេទទិន្នន័យអ្វីក៏បាន គឺគ្មានការបញ្ជាក់អំពីប្រភេទទិន្នន័យឲ្យបានច្បាស់លាស់ឲ្យដូចទៅនឹង TypeScript នោះទេ។
TypeScript មិនអាចប្រតិបត្តិកូដរបស់ខ្លួនទៅលើ Web Browser បាននោះទេ ដូច្នេះ TypeScript ត្រូវបំលែងកូដទាំងនោះទៅជាកូដរបស់ JavaScript ដើម្បីអាចប្រតិបត្តិនៅលើ Web Browser បាន។

តើធ្វើយ៉ាងមិចបានអាចសរសេរ React + TypeScript បាន?🤔

ត្រូវចំណាំថា ដើម្បីសរសេរ React បានយើងត្រូវការបង្កើត Project របស់ React ដោយប្រើប្រាស់ Command Prompt ឬ Git Bash។ តែមុននឹងបង្កើត Project យើងត្រូវទាញយកនូវ NodeJS មកក្នុងកុំព្យូទ័ររបស់អ្នកសិន: https://nodejs.org/en/
បន្ទាប់ពីបានទាញយកនូវ NodeJS បានជោគជ័យ យើងត្រូវទាញយកនៅ packages manager(npm or yarn)។ សម្រាប់ npm គឺវាមានស្រាច់មកជាមួយ NodeJS ដែលយើងបានទាញយកគន្លងមក តែបើចង់ប្រើប្រាស់ yarn វិញយើងត្រូវទាញយកវាបន្ថែមទៀត: https://classic.yarnpkg.com/en/docs/install។
បន្ទាប់ពីបានទាញយកនូវ NodeJS និង Packages Manager រួចរាល់មកហើយ ចំណុចបន្ទាប់គឺយើងបង្កើត React Project ដែលមាន Command ដូចខាងក្រោម:

npx create-react-app projectname --template typescript : សម្រាប់អ្នកប្រើប្រាស់ npm។

yarn create react-app projectname --template typescript : សម្រាប់អ្នកប្រើប្រាស់ yarn។

បញ្ជាក់: npx create-react-app ឬ yarn create react-app គឺជា command ដែលប្រើសម្រាប់បង្កើត Project ហើយ projectname គឺជាឈ្មោះ Project ដែលយើងចង់ដាក់ ដូច្នេះយើងចង់ដាក់ឈ្មោះអ្វីំគឺតាមចិត្តរបស់យើង រីឯ --template typescript គឺមានន័យថាយើងបង្កើត Project React ដោយមានការ configuration ជាមួយ TypeScript ស្រាប់ៗ។

ហើយបន្ទាប់ពីបង្កើត Project រួចហើយយើងធ្វើការ cd projectname ដើម្បីចូលទៅក្នុង Project Folder នោះបន្ទាប់មកយើង Run Project ដោយប្រើ command

npm start សម្រាប់ npm ឬ yarn start សម្រាប់ yarn

បន្ទាប់មក អ្នកបើក Browser ហើយវាយនៅ Address ដែលផ្តល់ដោយ React:

លទ្ធផលបន្ទាប់ពីប្រតិបត្តិនៅលើ Web browser:

រៀបចំ Project Folder ឲ្យបានត្រឹមត្រូវ:🤭

សម្រាប់ IDE ឬ Editor អ្នកគួរតែជ្រើសយក Visual Studio Code: https://code.visualstudio.com/

ខាងក្រោមនេះគឺជា Project Folder ដែល React បានផ្តល់ឲ្យ:

ដើម្បីផ្លាស់ប្តូរឈ្មោះរបស់ Project របស់យើងពី React App ទៅជា React TypeScript Tutorial បាន យើងត្រូវចូលរក file index.html នៅក្នុង folder public:

រួចកែអក្សរនៅក្នុង <title></title> tag:

public / index.html

នៅក្នុង Folder src មាន file ជាច្រើនដែលយើងមិនត្រូវការប្រើ ចឹងអាចលុប file ទាំងអស់នោះបាន:

ពេលមិនទាន់បានលុប

បន្ទាប់ពីលុបរួច

ចូលទៅក្នុង index.tsx នៅក្នុង folder src ហើយធ្វើការលុបកូដដែលយើងមិនត្រូវប្រើ:

ពេលមិនទាន់បានលុប

src / index.tsx

បន្ទាប់ពីលុបរួច

src / index.tsx

បញ្ជាក់បន្តិចទាក់ទងនឹង file index.tsx ខាងលើនេះ ដែល file មួយនេះមានតួនាទីដើរតួជា main program នៅក្នុង React ដោយសារតែ វាបានចាប់ file index.html ដែលស្ថិតនៅក្នុង folder public ដែលក្នុងនោះគឺមាន <div id="root"></div> ដូច្នេះវាបានចាប់ id root តាមរយះនឹងមក ហើយយកមក render ក្នុង App Component ដែលស្ថិតនៅក្នុង file App.tsx។

ចូលទៅក្នុង App.tsx នៅក្នុង folder src ហើយធ្វើការលុបកូដដែលយើងមិនត្រូវប្រើ:

ពេលមិនទាន់បានលុប

src / App.tsx

បន្ទាប់ពីលុបរួច

src / App.tsx

បន្ទាប់មកយើងនឹងឃើញលទ្ធផលនៅលើ Web Browser បែបនេះ:

អ្វីទៅជា JSX?🤔

React ប្រើ JSX សម្រាប់បង្កើតជា UI នៅលើ Web Browser។ ហើយវាជាជម្រើសដ៏ល្អមួយសម្រាប់ការសរសេរកូដ JavaScript នៅក្នុង JSX។
JSX គឺដូចទៅនឹង HTML អញ្ចឹង។
បើសិនជាយើងសរសេរធាតុជាច្រើននៅក្នុង JSX យើងត្រូវក្តោបធាតុទាំងអស់នោះនៅក្នុង Container មួយដូច <div></div> tag ឬ <React.Fragment></React.Fragment> ជាដើម ដែល <React.Fragment></React.Fragment> គឺជាធាតុដែល React បានផ្តល់ឲ្យ។

src / App.tsx

import React from 'react';

const App: React.FC = () => {

  // JSX are in return() method...
  return (
    <React.Fragment>
      <h1>Welcome to React Tutorial😋!</h1>
      <h2>Coding...</h2>
      <h2>Eating...</h2>
      <h2>Sleeping...</h2>
    </React.Fragment>
  );
};

export default App;

JavaScript Expression អាចប្រើនៅក្នុង JSX បានដោយគ្រាន់តែក្តោបនូវកូដ JavaScript ជាមួយនឹង curly brackets {}:

src / App.tsx

import React from 'react';

const App: React.FC = () => {
  return (
    <React.Fragment>

      {/* JavaScript Expression in JSX */}
      <h2>{10 + 20}</h2>

    </React.Fragment>
  );
};

export default App;

យើងមិនអាចប្រើប្រាស់នូវ if else statement នៅក្នុង JSX បាននោះទេ តែយើងអាចប្រើ ternary expression ជំនួសបាន:

src / App.tsx

import React from 'react';

const App: React.FC = () => {

  // initial value
  const i: number = 1;

  return (
    <React.Fragment>

      {/* Ternary Expression in JSX */}
      <h2>{i === 1 ? "Hello React" : "Bye TypeScript"}</h2>

    </React.Fragment>
  );
};

export default App;

យើងអាចប្រើប្រាស់ CSS បានបីរបៀបដូចទូទៅដែរ ពោលគឺ inline, internal និង external:

Inline Style:

src / App.tsx

import React from 'react';

const App: React.FC = () => {
  return (
    <React.Fragment>

      {/* Css Inline Style */}
      <h2 style={{backgroundColor: 'blue', color: 'white'}}>Bye TypeScript</h2>

    </React.Fragment>
  );
};

export default App;

Internal Style:

src / App.tsx

import React from 'react';

const App: React.FC = () => {

  // initial style
  const myStyle: React.CSSProperties = {
    backgroundColor: 'red',
    color: 'white',
  };

  return (
    <React.Fragment>

      {/* Css Internal Style */}
      <h2 style={myStyle}>Hello React</h2>

    </React.Fragment>
  );
};

export default App;

External Style:

src / App.tsx

import React from 'react';
import './style.css';

const App: React.FC = () => {
  return (
    <React.Fragment>

      {/* Css External Style */}
      <h2 className="my__header__style">Love NextJS</h2>

    </React.Fragment>
  );
};

export default App;

src / style.css

.my__header__style{
    background-color: green;
    color: white;
}

ពេលដែលយើងចង់ comment ទៅលើកូដនៅក្នុង JSX គឺយើងដាក់វានៅក្នុង curly brackets ជាមួយនឹង /* … */ ពោលគឺបែបនេះ {/* … */}។

src / App.tsx

import React from 'react';

const App: React.FC = () => {
  return (
    <React.Fragment>

      {/* This is a comment */}

    </React.Fragment>
  );
};

export default App;

ចំណាំ - យើងគួរតែប្រើ className និង htmlFor attribute ជំនួស class និង for:

src / App.tsx

import React from 'react';

const App: React.FC = () => {
  return (
    <React.Fragment>

      {/* Note for attribute htmlFor and className that is for normal html tag are for and class */}
      <label htmlFor="hello">Hello</label>
      <h2 className="world">World</h2>

    </React.Fragment>
  );
};

export default App;

អ្វីទៅជា Component?🤔

Component ធ្វើឲ្យយើងអាចបំបែកនូវ UI ទៅជាប្រភេទ UI ដែលមានឯករាជ្យ។

នៅក្នុង React component ត្រូវបានបែងចែកជាពីរគឺ Functional Component និង Class Based Component។

Class Based Component:

src / components / classComponents / HelloClassComponent.tsx

import React from 'react';

class HelloClassComponent extends React.Component {
    render(){
        return(
            <React.Fragment>
                <h1>Hello Class Component🌚!</h1>
            </React.Fragment>
        );
    };
};

export default HelloClassComponent;

Functional Component:

src / components / functionComponents / HelloFunctionComponent.tsx

import React from 'react';

const HelloFunctionComponent: React.FC = () => {
    return(
        <React.Fragment>
            <h1>Hello Function Component🌝!</h1>
        </React.Fragment>
    );
};

export default HelloFunctionComponent;

src / App.tsx

import React from 'react';
import HelloClassComponent from './components/classComponents/HelloClassComponent';
import HelloFunctionComponent from './components/functionComponents/HelloFunctionComponent';

const App: React.FC = () => {
  return (
    <React.Fragment>

      {/* Components */}
      <HelloClassComponent/>
      <HelloFunctionComponent/>

    </React.Fragment>
  );
};

export default App;

ដូចដែរយើងបានឃើញនៅខាងលើ Class Based Component គឺប្រើប្រាស់ Class សម្រាប់បង្កើត Component រីឯ Functional Component វិញគឺប្រើប្រាស់ Function សម្រាប់បង្កើត Component ហើយនៅពេលដែល Components ទាំងពីរត្រូវបានបង្កើតរួចស្រាច់ហើយ អ្នកត្រូវហៅ Components ទាំងនោះមកដាក់ក្នុង App Component ដែលជា main component ហើយកុំភ្លេច import ផង។

ចំណាំ - នៅក្នុង Tutorial មួយនេះ យើងរៀនប្រើតែ Functional Component តែមួយគត់។

អ្វីទៅជា Props?🤔

Props គឺដូចទៅនឹង attribute របស់ HTML អញ្ចឹងដែលវាប្រើសម្រាប់បោះតម្លៃពី Parent Component ទៅឲ្យ Child Component។

src / App.tsx

import React from 'react';
import Greeting from './components/functionComponents/Greeting';

const App: React.FC = () => {
  return (
    <React.Fragment>

      {/* Props */}
      <Greeting greeting={"React JS"} version={17.2}/>
      <Greeting greeting={"Angular"} version={12.2}/>
      <Greeting greeting={"Vue JS"} version={3.2}/>

    </React.Fragment>
  );
};

export default App;

src / components / functionComponents / Greeting.tsx

import React from "react";

// initial props by using interface
interface GreetingProps{
    // properties
    greeting: string;
    version: number;
};

const Greeting: React.FC<GreetingProps> = (props) => {

    // given property as props
    const {greeting, version} = props;

    return(
        <React.Fragment>
            <h1>Hello {greeting} Version: {version}.</h1>
        </React.Fragment>
    );
};

export default Greeting;

អ្វីទៅជា State?🤔

State ជាកន្លែងសម្រាប់ផ្ទុកទិន្នន័យ និងផ្លាស់ប្តូរទិន្នន័យបាន តាមអ្វីដែលយើងចង់ផ្លាស់ប្តូរ។ បើសិនជាយើងមិនប្រើ State ទេ ពេលដែលយើងចង់ផ្លាស់ប្តូរទិន្នន័យនៅលើ User Interface គឺមិនអាចផ្លាស់ប្តូរបាននោះទេ ដូច្នេះតម្រូវការត្រូវឲ្យប្រើ State ជាចាំបាច់។
ខាងក្រោមនេះគឺជាឧទាហរណ៏ទាក់ទងនឹងការប្រើប្រាស់ State ជាមួយនឹង Props ដោយប្រើ useState() hook:

src / components / greeeting / index.tsx

import React, {useState} from "react";

// initial props by using interface
interface GreetingProps{
    // properties
    greeting: string;
    version: number;
};

const Greeting: React.FC<GreetingProps> = (props) => {

    // given property as props
    const {greeting, version} = props;

    // given props into state
    const [greets, setGreets] = useState(greeting);
    const [verions, setVersions] = useState(version);

    return(
        <React.Fragment>
            <h1>Hello {greets} Version: {verions}.</h1>
        </React.Fragment>
    );
};

export default Greeting;

src / App.tsx

import React from 'react';
import Greeting from './components/greeting';

const App: React.FC = () => {

  return (
    <React.Fragment>
      <Greeting greeting={"React JS"} version={17.2}/>
      <Greeting greeting={"Angular"} version={12.2}/>
      <Greeting greeting={"Vue JS"} version={3.2}/>
    </React.Fragment>
  );
};

export default App;

បន្ទាប់ពីយើងបានសរសេរនូវឧទាហរណ៍ខាងលើរួចមកហើយ យើងបានឃើញថាការប្រើ State គឺយើងប្រើ useState() ដែលជា method របស់ React Hook។ នៅក្នុងនោះ const [greets, setGreets] = useState(greeting); យើងឃើញថាគឺដូចទៅនឹងការបង្កើតអញ្ញាតធម្មតាចឹង ប៉ុន្តែការប្រកាសឈ្មោះអញ្ញតមួយនេះគឺមានពីរដែលផ្ទុកនៅក្នុង square brackets [] ហើយឈ្មោះអញ្ញាតទាំងពីរនោះគឺសុទ្ធតែមានតួនាទីខុសគ្នាទាំងពីរ ពោលគឺ greets ប្រើសម្រាប់ទទួលតម្លៃរីឯ setGreets ប្រើសម្រាប់កំណត់តម្លៃ។ ចំណែកឯនៅក្នុង useState(greeting) គឺតម្លៃនៅក្នុង useState() គឺជាតម្លៃ default។ នៅឧទាហរណ៍ខាងក្រោមទៀត យើងបានយល់ច្រើនទាក់ទងនឹងតម្លៃ default មួយនេះ។
ខាងក្រោមនេះគឺជាឧទាហរណ៏ទាក់ទងនឹងការកំណត់តម្លៃទៅឲ្យ State:

src / components / counter / index.tsx

import React, {useState} from "react";

// initial props by using interface
interface CounterProps{
    // properties
    count: number;
};

const Counter: React.FC<CounterProps> = (props) => {

    // given property as props
    const {count} = props;

    // given props into state
    const [counts, setCounts] = useState(count);

    // handle decrement clicked
    const onHandleDecrement = () => {
        setCounts(counts - 1);
    }

    // handle increment clicked
    const onHandleIncrement = () => {
        setCounts(counts + 1);
    }

    return(
        <React.Fragment>
            <div style={{display: 'flex', alignItems: 'center', width: 100, justifyContent: 'space-around'}}>
                <button onClick={onHandleDecrement}>-</button>
                <h4>{counts}</h4>
                <button onClick={onHandleIncrement}>+</button>
            </div>
        </React.Fragment>
    );
};

export default Counter;

src / App.tsx

import React from 'react';
import Counter from './components/counter';

const App: React.FC = () => {

  return (
    <React.Fragment>
      <Counter count={0}/>
    </React.Fragment>
  );
};

export default App;

បន្ទាប់ពីយើងបានសរសេរនូវឧទាហរណ៍ខាងលើរួចមកហើយ យើងបានឃើញថាការកំណត់តម្លៃទៅឲ្យ State គឺតាមរយះ event ដែលយើងឃើញនៅក្នុង methods ពីរគឺ onHandleDecrement និង onHandleIncrement។
ខាងក្រោមនេះគឺជាឧទាហរណ៏ទាក់ទងនឹងការប្រើប្រាស់ Multiple States ដោយប្រើ useState() រួមគ្នា ឬ ប្រើ useState() ផ្សេងគ្នា។
useState() រួមគ្នា:

src / components / informationForm / index.tsx

import React, { useState } from "react";

// initial props by using interface
interface InformationFormProps{
    // properties
    name?: string;
    sex?: string;
    position?: string;
}

const InformationForm: React.FC<InformationFormProps> = (props) => {

    // given property as props and value as empty string
    const {name = "", sex = "", position = ""} = props;

    // given props into state
    const [informationForm, setInformationForm] = useState<InformationFormProps>({
        name,
        sex,
        position,
    });

    // handle name change
    const onHandleNameChange = (e:any) => {
        setInformationForm({
            ...informationForm,
            name: e.target.value
        });
    };

    // handle sex change
    const onHandleSexChange = (e:any) => {
        setInformationForm({
            ...informationForm,
            sex: e.target.value
        });
    };

    // handle position change
    const onHandlePositionChange = (e:any) => {
        setInformationForm({
            ...informationForm,
            position: e.target.value,
        });
    };

    // handle form submit
    const onHandleFormSubmit = (e:any) => {
        e.preventDefault();
        console.log("Data: ", informationForm);
    };

    return(
        <React.Fragment>
            <form onSubmit={onHandleFormSubmit}>
                <div>
                    <label>Full Name: </label>
                    <input type="text" placeholder="Enter full name" onChange={onHandleNameChange} />
                </div>
                <div>
                    <label>Sex: </label>
                    <input type="text" placeholder="Enter gender" onChange={onHandleSexChange} />
                </div>
                <div>
                    <label>Position: </label>
                    <input type="text" placeholder="Enter position" onChange={onHandlePositionChange} />
                </div>
                <input type="submit" value="Submit" />
            </form>

            {/* set condition if name and sex and position are empty string, the div element display empty and if those are not empty, the div element diplay those informations */}
            {
                informationForm.name === "" && informationForm.position === "" && informationForm.sex === "" ?
                <div></div>
                :
                <div>Fullname: {informationForm.name} Sex: {informationForm.sex} Position: {informationForm.position}</div>
            }
        </React.Fragment>
    );
};

export default InformationForm;

src / App.tsx

import React from 'react';
import InformationForm from './components/informationForm';

const App: React.FC = () => {

  return (
    <React.Fragment>
      <InformationForm/>
    </React.Fragment>
  );
};

export default App;

បន្ទាប់ពីយើងបានសរសេរនូវឧទាហរណ៍ខាងលើរួចមកហើយ យើងបានឃើញថានៅក្នុង file index.tsx ហើយនៅក្នុង interface គឺមាន properties ជាច្រើន តែអ្វីដែលគួរឲ្យកត់សម្គាល់នោះគឺបែបនេះ name?: string; ដែលមានសញ្ញា ? នៅមុខប្រភេទទិន្នន័យ ដែលសញ្ញានេះមានន័យថា យើងចង់ប្រើ Props នៅក្នុង Component ក៏បាន ឬក៏អត់ក៏មិនអីដែរ។ មួយវិញទៀតគឺយើងនឹងឃើញនៅកន្លែង useState():

const [informationForm, setInformationForm] = useState<InformationFormProps>({
    name,
    sex,
    position,
});

useState() ខាងលើគឺមានន័យថាយើងយក Props ជាច្រើនមកដាក់ក្នុង State រួម និយាយមួយម៉ាត់ឲ្យខ្លីទៅ បើសិនជាយើងយក Prop មួយមកដាក់ក្នុង State យើងក៏អាចប្រើវិធីនេះបានដែរ តែត្រូវបន្ថែមនូវ curly brackets {} នៅជុំវិញ Prop ផង: const [informationForm, setInformationForm] = useState<InformationFormProps>({name}); ។ មួយវិញទៀតគឺ នៅក្នុង method handle:

const onHandleNameChange = (e:any) => {
    setInformationForm({
        ...informationForm,
        name: e.target.value
    });
};

...informationForm មានន័យថាយកតម្លៃពី Props ផ្សេងៗមកដាក់នៅទីនេះដែរ។
useState() ផ្សេងគ្នា:

src / components / informationForm / index.tsx

import React, { useState } from "react";

// initial props by using interface
interface InformationFormProps{
    // properties
    name?: string;
    sex?: string;
    position?: string;
}

const InformationForm: React.FC<InformationFormProps> = (props) => {

    // given property as props and value as empty string
    const {name = "", sex = "", position = ""} = props;

    // given props into state
    const [names, setNames] = useState(name);
    const [sexes, setSexes] = useState(sex);
    const [positions, setPositions] = useState(position);

    // handle name change
    const onHandleNameChange = (e:any) => {
        setNames(e.target.value);
    };

    // handle sex change
    const onHandleSexChange = (e:any) => {
        setSexes(e.target.value);
    };

    // handle position change
    const onHandlePositionChange = (e:any) => {
        setPositions(e.target.value);
    };

    // handle form submit
    const onHandleFormSubmit = (e:any) => {
        e.preventDefault();
        console.log("Data: ", `Fullname: ${names} Sex: ${sexes} Position: ${positions}`);
    };

    return(
        <React.Fragment>
            <form onSubmit={onHandleFormSubmit}>
                <div>
                    <label>Full Name: </label>
                    <input type="text" placeholder="Enter full name" onChange={onHandleNameChange} />
                </div>
                <div>
                    <label>Sex: </label>
                    <input type="text" placeholder="Enter gender" onChange={onHandleSexChange} />
                </div>
                <div>
                    <label>Position: </label>
                    <input type="text" placeholder="Enter position" onChange={onHandlePositionChange} />
                </div>
                <input type="submit" value="Submit" />
            </form>

            {/* set condition if name and sex and position are empty string, the div element display empty and if those are not empty, the div element diplay those informations */}
            {
                names === "" && sexes === "" && positions === "" ?
                <div></div>
                :
                <div>Fullname: {names} Sex: {sexes} Position: {positions}</div>
            }
        </React.Fragment>
    );
};

export default InformationForm;

src / App.tsx

import React from 'react';
import InformationForm from './components/informationForm';

const App: React.FC = () => {

  return (
    <React.Fragment>
      <InformationForm/>
    </React.Fragment>
  );
};

export default App;

នៅឧទាហរណ៍ខាងលើប៉ុន្មាននេះ គឺយើងប្រើ State ជាមួយ Props ច្រើន ហើយលើសពីនេះទៅទៀត State ក៏អាចប្រើដោយមិនចាំបាច់មាន Props បានដែរ:

import React, { useState } from "react";

const Dummy: React.FC = () => {

    // states
    const [number, setNumber] = useState<number>(100);
    const [greeting, setGreeting] = useState<string | any>("Hello React");
    const [clicked, setClicked] = useState<boolean>(true);
    const [siblings, setSiblings] = useState<string[] | any[]>(["Thyda", "Rayuth", "Pisey"]);
    const [people, setPeople] = useState<any[]>([
        {
            id: 1,
            name: 'Kok Dara',
            sex: 'male',
        },
        {
            id: 2,
            name: 'Kok Pisey',
            sex: 'female',
        }
    ]);

    return(
        <React.Fragment>
            <h2>Number: {number}</h2>
            <h2>Greeting: {greeting}</h2>
            <h2>Clicked: {clicked}</h2> {/* it's not show value, but it works when we use it with event */}
            <h2>Siblings: {siblings.join(" and ")}</h2>
            <h2>People: ID {people[0].id} Name {people[0].name} Sex {people[0].sex}</h2>
        </React.Fragment>
    );
};

export default Dummy;

បន្ទាប់ពីយើងបានសរសេរនូវឧទាហរណ៍ខាងលើរួចមកហើយ យើងបានឃើញថានៅក្នុង file index.tsx នៅកន្លែង useState() គឺបែបនេះ

const [greeting, setGreeting] = useState<string | any>("Hello React");

គឺមានន័យថា State មួយនេះយើងប្រើតម្លៃជាប្រភេទទិន្នន័យជា string ក៏បាន ឬប្រភេទទិន្នន័យអ្វីផ្សេងក៏បាន។

mengsreang-chhoeung / react-typescript-tutorial Goto Github PK

react-typescript-tutorial's Introduction

ឯកសារ React + TypeScript ជាភាសាខ្មែរ

រៀនតាមរយះ Source Code នៅក្នុង Github Branches Repository:

ជំនួយបន្ថែម:

តម្រូវការមុននឹងសិក្សា React + TypeScript:

ចំណុចពិសេសរបស់ React + TypeScript:

អ្វីទៅជា React?😯

អ្វីទៅជា TypeScript?😲

តើធ្វើយ៉ាងមិចបានអាចសរសេរ React + TypeScript បាន?🤔

រៀបចំ Project Folder ឲ្យបានត្រឹមត្រូវ:🤭

អ្វីទៅជា JSX?🤔

អ្វីទៅជា Component?🤔

អ្វីទៅជា​ Props?🤔

អ្វីទៅជា State?🤔

react-typescript-tutorial's People

Contributors

Stargazers

Watchers

Forkers

react-typescript-tutorial's Issues

Recommend Projects

Recommend Topics

Recommend Org

អ្វីទៅជា Props?🤔