Tanuljon meg reagálni 5 perc alatt - egy React.js bemutató kezdőknek

Ez az oktatóanyag egy nagyon  egyszerű alkalmazás létrehozásával megismeri a React-et . Mindent kihagyok , ami szerintem nem lényeges.

És ha ez felkelti az érdeklődését, és többet szeretne megtudni, akkor nézze meg a Scrimba ingyenes React tanfolyamunkat.

De ami most van, koncentráljunk az alapokra!

A beállítás

A React használatának megkezdéséhez a lehető legegyszerűbb beállítást kell használnia: egy HTML fájlt, amely szkriptcímkék segítségével importálja a Reactés a ReactDOMkönyvtárakat.

Ez így néz ki:

 /* ADD REACT CODE HERE */    

Importáltuk a Bábelt is, mivel a React a JSX nevet használja a jelölések írásához. Át kell alakítanunk a JSX-t egyszerű JavaScript-vé, hogy a böngésző megértse.

Még két dolgot szeretnék, ha észrevennéd:

  1. A azonosítóval #root. Ez a belépési pont az alkalmazásunkhoz. Itt fog élni az egész alkalmazásunk.
  2. A címke a törzsben. Itt írjuk meg a React kódunkat.

Ha kísérletezni szeretne a kóddal, nézze meg ezt a Scrimba játszóteret.

Alkatrészek

A Reactben minden összetevő, és ezek általában JavaScript osztályok formájában jelentkeznek. Az React-Componentosztály kiterjesztésével hozzon létre egy összetevőt . Hozzunk létre egy összetevőt Hello:

class Hello extends React.Component { render() { return 

Hello world!

; } }

Ezután meghatározza az összetevő metódusait. Példánkban csak egy módszerünk van, és ezt hívják render().

Bent render()visszaadja annak leírását, hogy mit szeretne a React rajzolni az oldalra. A fenti esetben egyszerűen azt akarjuk, hogy egy h1címkét jelenítsen meg a Hello world szöveggel ! benne.

Ahhoz, hogy apró alkalmazásunk megjelenjen a képernyőn, a következőket is használnunk kell ReactDOM.render():

ReactDOM.render( , document.getElementById("root") ); 

Tehát itt kapcsoljuk össze Hellokomponensünket az alkalmazás ( ) belépési pontjával .

Tehát egyszerűen azt mondjuk: Hé reagálj! Kérjük, renderelje a Hello komponenst a DOM csomóponton belül root azonosítóval !

Ennek eredménye a következő:

A HTML'ish szintaxis, amelyet most megnéztünk (

és ) a korábban említett JSX-kód. Ez valójában nem HTML, hanem sokkal erősebb. Bár az ott írtak HTML-címkeként kerülnek a DOM-ba.

A következő lépés az, hogy alkalmazásunk kezelje az adatokat.

Adatok kezelése

A React-ben kétféle adat létezik: kellékek és állapot . A kettő közötti különbséget az elején kissé trükkös megérteni, ezért ne aggódjon, ha kissé zavarosnak találja. Könnyebb lesz, ha elkezd dolgozni velük.

A legfontosabb különbség az, hogy az állam privát, és magában az összetevőben változtatható meg. A támaszok külsőek , és nem maga az alkatrész vezérli őket. A hierarchiában feljebb lévő összetevőkből adódik, akik szintén ellenőrzik az adatokat.

Egy komponens közvetlenül megváltoztathatja belső állapotát. Nem tudja közvetlenül megváltoztatni kellékeit.

Először nézzük meg alaposabban a kellékeket.

Kellékek

A Hellokomponens teljesen statikus. Ugyanazt az üzenetet adja ki, bármi is legyen. A React nagy része azonban az újrafelhasználhatóság, vagyis egy komponens egyszeri megírásának képessége, majd újbóli felhasználása különböző felhasználási esetekben. Például különböző üzenetek megjelenítéséhez.

Az ilyen típusú újrafelhasználhatóság elérése érdekében hozzáadunk kellékeket. Így adhatja át a kellékeket egy komponensnek:

ReactDOM.render( , document.getElementById("root") ); 

Ezt a támaszt hívják messageés értéke „barátom”. Ezt a támaszt a Hello komponensen belül érhetjük el, hivatkozással this.props.message:

class Hello extends React.Component { render() { return 

Hello {this.props.message}!

; } }

Ennek eredményeként ez megjelenik a képernyőn:

Azért írunk {this.props.message}göndör zárójelekkel, mert el kell mondanunk a JSX-nek, hogy hozzá akarunk adni egy JavaScript kifejezést. Ezt menekülésnek hívják .

So now we have a reusable component which can render whatever message we want on the page. Woohoo!

However, what if we want the component to be able to change its own data? Then we have to use state instead!

State

The other way of storing data in React is in the component’s state. And unlike props — which can’t be changed directly by the component — the state can.

So if you want the data in your app to change — for example, based on user interactions — it must be stored in a component’s state somewhere in the app.

Initializing state

To initialize the state, simply set this.state  in the constructor() method of the class. Our state is an object which in our case only has one key called message.

class Hello extends React.Component { constructor(){ super(); this.state = { message: "my friend (from state)!" }; } render() { return 

Hello {this.state.message}!

; } }

Before we set the state, we have to call super() in the constructor. This is because this is uninitialized before super() has been called.

Changing the state

To modify the state, simply call this.setState(), passing in the new state object as the argument. We’ll do this inside a method which we’ll call updateMessage.

class Hello extends React.Component { constructor(){ super(); this.state = { message: "my friend (from state)!" }; this.updateMessage = this.updateMessage.bind(this); } updateMessage() { this.setState({ message: "my friend (from changed state)!" }); } render() { return 

Hello {this.state.message}!

; } }

Note: To make this work, we also had to bind the this keyword to the updateMessage method. Otherwise we couldn’t have accessed this in the method.

Event Handlers

The next step is to create a button to click on, so that we can trigger the updateMessage() method.

So let’s add a button to the render() method:

render() { return ( 

Hello {this.state.message}!

Click me! ) }

Here, we’re hooking an event listener onto the button, listening for the onClick event. When this is triggered, we call the updateMessage method.

Here’s the entire component:

class Hello extends React.Component { constructor(){ super(); this.state = { message: "my friend (from state)!" }; this.updateMessage = this.updateMessage.bind(this); } updateMessage() { this.setState({ message: "my friend (from changed state)!" }); } render() { return ( 

Hello {this.state.message}!

Click me! ) } }

The updateMessage method then calls this.setState() which changes the this.state.message value. And when we click the button, here’s how that will play out:

Congrats! You now have a very basic understanding of the most important concepts in React.

If you want to learn more, be sure to check out our free React course on Scrimba.

Good luck with the coding :)

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.