In this article, we are going to learn about Dumb components in react Native. The dumb component is one of the categories of React Component so before diving into the dumb components detail. Let’s know a little bit about components. A Component is one of the core building blocks of React. The component is a piece of code that is reusable in nature. Every application in react or react-native is made up of components. With the help of components, the task of creating UIs becomes much easier. We work on every component independently and merge them all in a parent component to create our final UI.
To organize the react-native applications we have to split the components into dumb and smart components so that it becomes easier for us to handle state changes and data flow.
Now let’s learn about Dumb Component.
Dumb Components: Dumb components are the most reusable component whose only work is to render something to the view or can say DOM. Dumb components mainly focus on a presentation that is why it is also called Presentational components. Once the presentation is done, the component is done with it. Basically, they are only concerned about how things look. We can write a dumb component in one place and use it several times in the application. Doing so will save a lot of time. If we want to change anything, we need to update the code in only one place and all screens using that dumb component will also get updated. This component does not contain any business logic. It only has the render() method. The dumb component also does not know anything about the state or any lifecycle hooks. It can receive data and callback from the parents via props. Below, is the syntax of the dumb component.
Syntax:
const Function = (props) => {
return(
...code of creating any element
)
}
Characteristics of Dumb Components:
- Focus on the UI: Dumb components mainly focus on how things look. So almost all UI components like buttons, inputs, modals, etc should be considered dumb components.
- Accepting props: Dumb components accept props to receive data and the callback function from the parent component. This makes them dynamic and reusable.
- The state is rarely included: Dumb component does not include state, the only time it includes state is to manipulate the UI itself not the data.
- No dependencies: Dumb components do not require any dependencies on the rest of the app.
- Easy Testing: It is easy to test dumb components as it only takes props and returns the UI. It does not have any complex logic or state for data.
Installation: Here we will use the Expo CLI version that will much smoother to run your React Native applications. Follow the below steps one by one to set up your React native environment.
Step 1: Open your terminal and run the below command.
npm install -g expo-cli
Step 2: Now expo-cli is globally installed so you can create the project folder by running the below command.
expo init "projectName"
Step 3: Now go into the created folder and start the server by using the following command.
cd "projectName" npm start
Example: In this example, we have created the dumb component named GFG and used it three times in the APP function.
Javascript
import React from 'react'; import { Text, View, StyleSheet } from 'react-native'; const GFG=()=>{ return ( <View style={styles.container}> <Text style={styles.text}> Geeksforneveropen </Text> </View> ); } const styles=StyleSheet.create({ container:{ backgroundColor:"green", alignItems:"center", }, text:{ fontSize:25, backgroundColor:"white", margin:10, borderRadius:5 } }); export default function App() { return ( <View> <GFG/> <GFG/> <GFG/> </View> ); } |
Output:
GFG
