Funksjonell komponent er en måte å lage komponenter i en React-applikasjon. React.js Functional Components hjelper til med å lage UI-komponenter på en funksjonell og mer konsis måte. I denne artikkelen vil vi lære om funksjonelle komponenter i React, ulike måter å kalle den funksjonelle komponenten, og også lære hvordan du lager funksjonskomponentene. Vi vil også demonstrere bruk av kroker i funksjonelle komponenter
Innholdsfortegnelse
- Funksjonelle komponenter i React:
- Måter å kalle den funksjonelle komponenten:
- Problem med bruk av funksjonelle komponenter
- Fordel med å bruke kroker i funksjonelle komponenter
Funksjonelle komponenter i React:
ReactJS Funksjonelle komponenter er noen av de mer vanlige komponentene som kommer over mens du arbeider i React. Dette er ganske enkelt JavaScript-funksjoner. Vi kan lage en funksjonell komponent i React ved å skrive en JavaScript-funksjon. Disse funksjonene mottar kanskje ikke data som parametere. I de funksjonelle komponentene er returverdien JSX-koden som skal gjengis til DOM-treet.
Måter å kalle den funksjonelle komponenten:
Vi kan kalle funksjonene i javaScript på andre måter som følger:
1. Kalle opp funksjonen ved å bruke navnet på funksjonen etterfulgt av parentesene.
// Example of Calling the function with function name followed by Parentheses function Parentheses() { return (; }; const PropsExample = () =>{ // const [change, setChange] = useState(true); const [change, setChange] = useState(false); return ( setChange(!change)}> Klikk her! {endre ? ( 'Velkommen til techcodeview.com' /> ) : ( 'A Computer Science Portal for Geeks' /> )} ); }; eksport standard PropsExample;Trinn for å kjøre programmet: Åpne terminalen og skriv inn følgende kommando. npm start Utgang: Åpne nettleseren og prosjektet vårt vises i URLen http://localhost:3000/>