Во React, секој дел претставува компонента. Компонентите овозможуваат разложување на секој голем кориснички интерфејс во помали, поискористливи делови кои може да се менуваат. Секоја компонента има своја состојба и однесување, повеќе комбинирани компоненти креиираат еден покомплексен кориснички интерфејс.

JSX

JSX е синтаксичка екстензија за JavaScript која овозможува пишување код сличен на HTML, во JavaScript. Во React се користи за дефинирање на компонентите и нивната структура. JSX кодот се трансформира во чист JavaScript за време на изградбата, така што не работи директно во прелистувачот.

Потребно е да ги имате следниве две линии код на секој пример.

import React from 'react';
import ReactDOM from 'react-dom/client';

Во продолжение неколку примери за JSX:

• Креирање на едноставен елемент со JSX

const firstJSX = <h3>Hi, this is the first JSX element</h3>

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(firstJSX);

Резултат на екран: 

• Креирање на елемент без JSX. Доколку елементот е без JSX, тогаш мора да искористите метод како createElement()  или appendChild()

const withoutJSX = React.createElement('h3', {}, 'Element without JSX')

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(withoutJSX);

Резултат на екран:

• React поддржува if-else искази, но не во JSX, туку надвор од JSX, како на следниов пример:

const hour = 9

let message = ""
if (hour < 12) {
  message = "Good morning"
} else {
  message = "Good afternoon"
}

const element = <h3>{message}</h3>

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

Додека пак, во JSX, може да користите тернарен оператор. 

const hour = 9

const element = <h3>{(hour) < 12 ? "Good morning" : "Good afternoon"}</h3>

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

Излезот од овие два примери е ист.

• Резултат на екран:

props

Props се својства кои се пренесуваат од компонентата родител во компонентата дете. Тие можат да се читаат, но не и да се менуваат во компонентата дете. Се користат за пренесување на податоци од компонента родител во компонента дете, така што компонентата дете може да ги прикажува податоците.

Во продолжение неколку примери за props:

• Пренесување на податоци од една компонента на друга, како параметри

function Position(props) {
  return <h2>My position is {props.name}!</h2>
}

function Employee() {
  return (
    <>
      <h1>What is your position?</h1>
      <Position name="Frontend develoer" />
    </>
  )
}

Резултат на екран:

• Пренесување на податоци од една компонента на друга, како објект

function Position(props) {
  return <h2>
    My position is {props.info.position},
    and I have {props.info.yearsOfExperince} years of experince.</h2>
}

function Employee() {
  const employeeInfo = { position: "Frontend developer", yearsOfExperince: "5" }
  return (
    <>
      <h1>What is your position?</h1>
      <Position info={employeeInfo} />
    </>
  )
}

Резултат на екран:

state

Состојбата на компонентата е објект кој ги чува податоците кои можат да се менуваат цело време. Кога состојбата се менува компонентата повторно се прикажува за да ја одрази новата состојба.

Во продолжение пример за state:

import React, { Component } from 'react';

class Counter extends Component {
  state = { count: 0 }

  increment = () => {
    this.setState({ count: this.state.count + 1 })
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    )
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Counter />);

Резултат на екран:

По секое кликнување на копчето, бројачот ќе одбројува +1.

Што понатаму?

Следете го IT.mk и наскоро ќе ги објавиме преостанатите туторијали за React.

Добивај известувања

Најава

Извести ме за

нови коментаринови одговори на мои коментари

Label

{} [+]

Name*

Email*

Website

Label

{} [+]

Name*

Email*

Website

0 Коментари

Најнови

Најстари Со највеќе гласови

Inline Feedbacks

View all comments