Functional components
- React Native course
- Beginner
- Lesson 13/116
- 4 min
Learn to define functional components.
Functional component
In React Native, a component is a JavaScript function that returns JSX. This is called a functional component. The function name always starts with a capital letter.
Example: function Greeting() { return <Text>Hello</Text>; }. Here Greeting is a component; it can be used just like View or Text.
To use a component, you write it as a JSX tag: <Greeting />. This calls the function and places its returned JSX on the screen.
Using a component
You use a defined component as a JSX tag inside another component. The tag name must match the function name exactly.
For example, to use the Greeting component inside App: function App() { return <Greeting />; }.
This makes the component reusable. You write it once and use it in many places.
Practice Write a Greeting component
Write a Greeting component that returns <Text>Hello</Text>. Then the App component should call <Greeting />.
Starter code
// Write the Greeting component
// Call it inside App
function App() {
return null;
}Sample solution
function Greeting() {
return (
<Text>Hello</Text>
);
}
function App() {
return (
<Greeting />
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which is a valid functional component?
- function greeting() { return <Text>Hello</Text>; }
- <Greeting />
- function Greeting() return <Text>Hello</Text>;
- function Greeting() { return <Text>Hello</Text>; } Correct answer
Explanation: Component names start with capital and return JSX inside braces.
2 Component call
function Greeting() { return <Text>Hello</Text>; }
function App() {
return (____);
}function Greeting() { return <Text>Hello</Text>; }
function App() {
return (<Greeting />);
}Explanation: <Greeting /> calls the component.
3 Match the component parts
| Term | Meaning |
|---|---|
function |
Definition |
return |
Return |
<Greeting /> |
Call |
Greeting |
Component name |