Gabay sa Pagsisimula sa React: Bumuo ng Iyong Unang User Interface Mula sa Simula

# Gabay sa Pagsisimula sa React: Bumuo ng Iyong Unang User Interface Mula sa Simula

Ang React ay isang JavaScript library na ginagamit para sa pagbuo ng mga user interface. Ito ay binuo at pinapanatili ng Facebook, at naging isa sa mga pinakasikat na tool sa front-end development. Ang gabay na ito ay magdadala sa iyo mula sa simula, hakbang-hakbang upang maunawaan ang mga pangunahing konsepto ng React, at bumuo ng isang simpleng user interface.

## Bakit Pipiliin ang React?

Ang React ay may mga sumusunod na kalamangan:

* **Component-based:** Hinahati ng React ang user interface sa mga independiyente at magagamit muling mga component. Ginagawa nitong mas madaling mapanatili at maunawaan ang code.
* **Declarative:** Gumagamit ang React ng declarative programming style, na nangangahulugang kailangan mo lamang ilarawan ang nilalaman na gusto mong ipakita, at awtomatikong hahawakan ng React ang mga update at rendering.
* **Efficient:** Gumagamit ang React ng virtual DOM at smart diff algorithm, na mahusay na nag-a-update ng user interface at binabawasan ang hindi kinakailangang rendering.
* **Malaking Suporta ng Komunidad:** Ang React ay may malaking komunidad at mayamang ecosystem, maaari kang makahanap ng maraming tutorial, library, at tool upang matulungan kang bumuo.
* **Kakayahang Cross-Platform:** Pinapayagan ka ng React Native na bumuo ng mga native mobile application (iOS at Android) gamit ang React.

## Paghahanda

Bago ka magsimula, kailangan mong tiyakin na naka-install ang mga sumusunod na tool sa iyong computer:

* **Node.js:** Ang Node.js ay isang JavaScript runtime environment na ginagamit upang patakbuhin ang mga tool sa pag-develop ng React. Maaari mo itong i-download at i-install mula sa [https://nodejs.org/](https://nodejs.org/).
* **npm o yarn:** Ang npm (Node Package Manager) at yarn ay mga JavaScript package manager na ginagamit upang i-install at pamahalaan ang mga dependency ng React. Karaniwan, ang npm ay naka-install kasama ng Node.js. Maaaring i-install ang yarn mula sa [https://yarnpkg.com/](https://yarnpkg.com/).

## Likha ang Iyong Unang React Application

Gagamitin namin ang `create-react-app` upang mabilis na lumikha ng isang proyekto ng React.

1. **Lumikha gamit ang npm:**

   ```bash
   npx create-react-app my-first-react-app
   cd my-first-react-app
   npm start

2. Lumikha gamit ang yarn:

   yarn create react-app my-first-react-app
   cd my-first-react-app
   yarn start
   

Pagkatapos patakbuhin ang mga utos sa itaas, awtomatikong lilikha ang create-react-app ng isang direktoryo na pinangalanang my-first-react-app, at sisimulan ang isang proyekto ng React sa direktoryong iyon. Ang utos na npm start o yarn start ay magsisimula ng development server, at maaari mong bisitahin ang http://localhost:3000 sa iyong browser upang tingnan ang iyong React application.

Istraktura ng Direktoryo

Ang istraktura ng direktoryo ng proyektong nilikha ng create-react-app ay ang mga sumusunod:

my-first-react-app/
├── node_modules/         # Mga library na dependency ng proyekto
├── public/               # Mga static na resource (halimbawa, HTML file)
│   ├── index.html        # Ang entry point na HTML file ng application
│   └── ...
├── src/                  # React source code
│   ├── App.css           # CSS style ng App component
│   ├── App.js            # App component
│   ├── App.test.js       # Test file ng App component
│   ├── index.css         # Global CSS style
│   ├── index.js          # Ang entry point na JavaScript file ng application
│   ├── logo.svg          # React logo
│   └── ...
├── .gitignore            # Git ignore file
├── package.json          # Metadata at mga dependency ng proyekto
├── README.md             # Dokumentasyon ng proyekto
└── yarn.lock             # Dependency version lock file (kung gumagamit ng yarn)

Pag-unawa sa React Component

Ang mga React application ay binubuo ng mga component. Ang mga component ay mga independiyente at reusable na bloke ng code na ginagamit upang i-render ang mga partikular na bahagi ng user interface.

Sa src/App.js file, makikita mo ang isang default na App component:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
      
        
        
          Edit `src/App.js` and save to reload.
        

        [
          Learn React
        ](https://reactjs.org)
      
    
  );
}

export default App;

Paliwanag ng Code:

• import React from 'react'; Ini-import ang React library.
• function App() { ... } Nagdedefine ng isang function component na pinangalanang App.
• return ( ... ) Nagbabalik ng isang JSX expression na naglalarawan kung ano ang dapat i-render ng component.
• export default App; Inilalabas ang App component upang magamit sa ibang mga file.

JSX (JavaScript XML)

Ang JSX ay isang JavaScript syntax extension na nagpapahintulot sa iyo na magsulat ng code na parang HTML sa loob ng iyong JavaScript code. Sa halimbawa sa itaas, ang ... ay isang JSX expression. Ang JSX code ay iko-convert ng Babel sa standard na JavaScript code upang maunawaan ng browser.

Pagbabago sa App Component

Baguhin natin ang App component upang lumikha ng isang simpleng counter.

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
 const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    
      

# Counter

      Kasalukuyang bilang: {count}

      +
      -
    
  );
}

export default App;

Mga pagbabago:

• import React, { useState } from 'react'; Inangkat ang useState Hook. Ang useState ay isang React Hook na ginagamit para magdagdag ng state sa mga function component.
• const [count, setCount] = useState(0); Gumamit ng useState Hook para gumawa ng state variable na tinatawag na count, at sinimulan ito sa 0. Ang setCount ay isang function na ginagamit para i-update ang count state.
• const increment = () => { setCount(count + 1); }; Nagdefine ng function na tinatawag na increment, na ginagamit para dagdagan ng 1 ang count state.
• const decrement = () => { setCount(count - 1); }; Nagdefine ng function na tinatawag na decrement, na ginagamit para bawasan ng 1 ang count state.
• Kasalukuyang bilang: {count} Ipinapakita ang halaga ng count state sa page. Ang {count} ay isang JSX expression, na ginagamit para magpasok ng JavaScript variable sa JSX code.
• + at - Gumawa ng dalawang button, na nakatali sa increment at decrement functions. Ang onClick ay isang event handler, na ginagamit para i-execute ang tinukoy na function kapag pinindot ang button.

Pagkatapos i-save ang src/App.js file, awtomatikong magre-refresh ang browser, at makakakita ka ng simpleng counter. Ang pag-click sa button na "+" ay magpapataas ng bilang, at ang pag-click sa button na "-" ay magpapababa ng bilang.

Paggamit ng CSS Styles

Maaari kang gumamit ng CSS para pagandahin ang iyong React app. Sinusuportahan ng create-react-app ang CSS Modules at ordinaryong CSS files.

Paggamit ng CSS Modules:

Pinapayagan ka ng CSS Modules na gumawa ng mga independiyenteng CSS style para sa bawat component, na iniiwasan ang mga conflict sa style. Para gumamit ng CSS Modules sa isang component, kailangan mong gumawa ng file na nagtatapos sa .module.css.

Halimbawa, gumawa ng file na tinatawag na App.module.css, at idagdag ang mga sumusunod na CSS style:

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

.App button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: lightgreen;
  border: none;
  cursor: pointer;
}

Pagkatapos ay i-import ang CSS Modules sa src/App.js file:

import React, { useState } from 'react';
import styles from './App.module.css'; // I-import ang CSS Modules

function App() {
  const [count, setCount] = useState(0); const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
     {/* Gamitin ang styles object para tukuyin ang CSS classes */}
      

# Counter

      Kasalukuyang bilang: {count}

      +
      -
    
  );
}

export default App;

Paggamit ng ordinaryong CSS file:

Puwede ka ring gumamit ng ordinaryong CSS file para tukuyin ang global styles. Sa src/index.css file, puwede kang magtakda ng global styles.

Halimbawa, idagdag ang sumusunod na CSS style:

body {
  font-family: sans-serif;
}

Ang style na ito ay ia-apply sa body element ng buong application.

Susunod na Hakbang

Binabati kita, natapos mo na ang iyong unang React application! Sa susunod, maaari kang matuto nang higit pa tungkol sa React, tulad ng:

• Komunikasyon ng Component: Pag-aralan kung paano makipag-ugnayan ang iba't ibang component sa isa't isa.
• Pagproseso ng Form: Pag-aralan kung paano gumawa at magproseso ng mga form.
• Routing: Pag-aralan kung paano gumamit ng React Router para gumawa ng multi-page application.
• Redux o Context API: Pag-aralan kung paano pamahalaan ang state ng application.
• Hooks: Pag-aralan nang malalim ang React Hooks, tulad ng useEffect, useContext, atbp.

Tandaan, ang React ay isang teknolohiya na nangangailangan ng patuloy na pagsasanay at pag-aaral. Maligayang pag-aaral!