REACT - Egyszerű bevezető alkatrész nem jelenik meg?

A React egyik nagyszerű tulajdonsága a rugalmas alkatrészrendszer. Amint megkapja a dolgát, feloszthatja alkalmazását újrafelhasználható összetevőkre, és bevonhatja azokat az egész projektbe.

A probléma az, hogy van néhány góca, amely megnehezíti az alkatrészekkel való munkát azok számára, akik újdonságban reagálnak.

Tegyük fel például, hogy a következő összetevővel rendelkezik mainIntro.js:

const mainIntro = props => ( 

Hunter x Hunter Quotes

"When I say it doesn't hurt me, that means I can bear it." - Killua Zoldyck Next Quote Tweet this quote ) export default mainIntro;

És be akarja importálni ide App.js:

import mainIntro from './components' class App extends React.Component{ render(){ return(  ); } } const mainNode = document.getElementById("quoter"); ReactDOM.render(,mainNode);

De mainIntrovalamiért nem töltődik be. Vizsgáljuk meg közelebbről, mi történik.

Az összetevők elnevezése

Bárki, aki ismeri az objektumorientált programozást, általános szokás minden osztályt nagybetűvel megnevezni. Például egy személy leírására szolgáló osztályt hívnának Person, jelezve, hogy ez egy osztály.

A Reactben, amely JSX-t használ, nem pedig egyszerű JavaScript-et, a címke első betűje jelzi, hogy milyen elemről van szó. A nagybetűk első karakterei a React összetevők megadására szolgálnak, ezért mainIntroinkább ezeket kell hívni MainIntro:

const MainIntro = props => ( 

Hunter x Hunter Quotes

"When I say it doesn't hurt me, that means I can bear it." - Killua Zoldyck Next Quote Tweet this quote ) export default MainIntro;

Bár a fájlnév továbbra is lehet mainIntro.js, célszerű az első karaktert is nagybetűvel írni. Később, amikor átvizsgálja a könyvtár tartalmát, gyorsan kiválaszthatja MainIntro.jsaz összetevőket.

Most így App.jskell kinéznie:

import MainIntro from './components/MainIntro.js'; class App extends React.Component{ render(){ return(  ); } } const mainNode = document.getElementById("quoter"); ReactDOM.render(,mainNode);

Hogyan települ a React?

A React használatának két fő módja van. Először telepítse és állítsa be helyileg, valószínűleg keresztül create-react-app. Másodszor, egy CDN-en keresztül.

Fentebb észrevehette, hogy a kódrészletek valójában nem tartalmazzák a React funkciót a projektben import React from'react';. Ez hibát fog okozni, ha a React helyben dolgozik.

Ha azonban a React betöltéséhez CDN-t használ, az globálisan elérhető, és nem kell importálnia, mint fent.

Nyílfunkciók

Mielőtt belevetné magát a React-be, fontos, hogy alaposan megértse a JavaScript-et, különös tekintettel az ES6 szintaxisára.

Vessen egy pillantást az MainIntroösszetevőre:

const MainIntro = props => ( 

Hunter x Hunter Quotes

"When I say it doesn't hurt me, that means I can bear it." - Killua Zoldyck Next Quote Tweet this quote ) export default MainIntro;

Ha alaposan megnézi az első sort, észrevesz egy szintaktikai hibát:

const MainIntro = props => (

Olyan funkcionális komponenst írsz, amelyek általában egyszerű JavaScript-funkciók, amelyek elfogadják a kellékeket argumentumként, és érvényes JSX-t adnak vissza. Természetesen a szintaxisnak helyesnek kell lennie ahhoz, hogy megfelelően visszatérjen.

A {}nyílfüggvények sokféleképpen írhatók , de ehhez a példához hozzá kell adnia a göndör zárójeleket ( ), és feltétlenül vissza kell adnia a JSX-et magából az összetevőből:

const MainIntro = props => { return ( //... rest of the code ); }

Az összes fent említett módosítás végrehajtása után a komponensnek megfelelően kell megjelenítenie.

Habár a React funkcionális és osztályos komponensei között az volt a fő különbség, hogy az előbbi "hontalan", míg az utóbbi "állami" volt, a React Hooks elmosta a köztük levő vonalakat. Olvasson többet mindkét áttekintésről ebben az áttekintésben, és mélyebben merüljön el a funkcionális komponensekben a React Hook segítségével.