We want to hear from you!Take our 2021 Community Survey!
This site is no longer updated.Go to react.dev

React

JavaScript könyvtár felhasználói felületek létrehozásához

Deklaratív

A React segítségével könnyen készíthetsz interaktív felhasználói felületeket. Tervezz egyszerű nézeteket az applikáció minden egyes állapotához, és a React gondoskodik arról, hogy adatváltozáskor csak a megfelelő komponensek frissüljenek és legyenek újrarenderelve.

A deklaratív nézetek kiszámíthatóbbá teszik a kódot, valamint megkönnyítik a hibakeresést is.

Komponens alapú

Hogy komplex felhasználói felületeket tudj létrehozni, építs egységbefoglalt komponenseket amik gondoskodnak a saját állapotukról és kombináld őket.

Mivel a komponens logikáját sémák helyett JavaScriptben írod, könnyedén tudsz adatot mozgatni az alkalmazásban, és így az állapotok a DOM-on kívül maradnak.

Tanuld meg egyszer, használd mindenhol

Mi nem feltételezünk semmit a technológiai stack-ed többi részéről, szóval nyugodtan fejleszthetsz új funkciókat a Reactben anélkül, hogy a meglévő kódot módosítanod kellene.

A Reacttel szerver oldalon is renderelhetsz Node-dal, és mobilalkalmazásokat is írhatsz a React Native-ben.


Egyszerű komponens

A React komponensek azt mutatják, ami a render() metódusban visszatér, beviteli adattól függően. Ez a példa JSX-t használ, aminek a szintaxisa az XML-re hasonlít. A komponens beviteli adata le van küldve a komponensnek, amihez a render() metódus a this.props segítségével fér hozzá.

A JSX szintaxis használata nem kötelező a Reactben. Hogy lásd a nyers JavaScript kódot amit a JSX fordítása generál, próbáld ki a Babel REPL-t.

Élő JSX szerkesztő
class HelloMessage extends React.Component {
  render() {
    return <div>Helló {this.props.name}</div>;
  }
}

root.render(<HelloMessage name="Tamás" />);
Eredmény
Helló Tamás

Állapot-teljes komponens

A beviteli adaton kívül (ami this.props-ként érhető el), egy komponens a saját belső állapotát is kezelni tudja (ez this.state-ként érhető el). Ha egy komponens állapota megváltozik, a renderelt tartalom frissítve lesz a render() metódus újrahívásával.

Élő JSX szerkesztő
class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  tick() {
    this.setState(state => ({
      seconds: state.seconds + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div>
        Másodperc: {this.state.seconds}
      </div>
    );
  }
}

root.render(<Timer />);
Eredmény
Másodperc: 2

Alkalmazás

A props és state segítségével össze tudunk rakni egy kis Teendők alkalmazást. Ez a példa a state állapotot használja a jelenlegi listaelemek és a felhasználó beviteli inputjának a nyomonkövetésére. Annak ellenére hogy az esemény kezelők helyben vannak renderelve, azok össze lesznek gyűjtve, és esemély továbbítással lesznek implementálva.

Élő JSX szerkesztő
class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: [], text: '' };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  render() {
    return (
      <div>
        <h3>Teendők</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <label htmlFor="new-todo">
            Mik a teendők?
          </label>
          <input
            id="new-todo"
            onChange={this.handleChange}
            value={this.state.text}
          />
          <button>
            Hozzáad #{this.state.items.length + 1}
          </button>
        </form>
      </div>
    );
  }

  handleChange(e) {
    this.setState({ text: e.target.value });
  }

  handleSubmit(e) {
    e.preventDefault();
    if (this.state.text.length === 0) {
      return;
    }
    const newItem = {
      text: this.state.text,
      id: Date.now()
    };
    this.setState(state => ({
      items: state.items.concat(newItem),
      text: ''
    }));
  }
}

class TodoList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.items.map(item => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    );
  }
}

root.render(<TodoApp />);
Eredmény

Teendők

    Külső bővítményt használó komponens

    A React lehetővé teszi, hogy más könyvtárakkal és keretrendszerekkel kommunikálj. Ez a példa a remarkable-t használja, ami egy külső Markdown könyvtár, mely a <textarea> értékét valós időben konvertálja.

    Élő JSX szerkesztő
    class MarkdownEditor extends React.Component {
      constructor(props) {
        super(props);
        this.md = new Remarkable();
        this.handleChange = this.handleChange.bind(this);
        this.state = { value: 'Helló, **világ**!' };
      }
    
      handleChange(e) {
        this.setState({ value: e.target.value });
      }
    
      getRawMarkup() {
        return { __html: this.md.render(this.state.value) };
      }
    
      render() {
        return (
          <div className="MarkdownEditor">
            <h3>Bemenet</h3>
            <label htmlFor="markdown-content">
              Írj egy kis markdown-t
            </label>
            <textarea
              id="markdown-content"
              onChange={this.handleChange}
              defaultValue={this.state.value}
            />
            <h3>Kimenet</h3>
            <div
              className="content"
              dangerouslySetInnerHTML={this.getRawMarkup()}
            />
          </div>
        );
      }
    }
    
    root.render(<MarkdownEditor />);
    
    Eredmény

    Bemenet

    Kimenet

    Helló, világ!