React components consist of three main parts:
- Data:
Data includes the state and props of the component.
State represents data that can be updated by the component's logic.
Props (short for properties) are used to pass data from a parent component to a child component.
The parent component controls how the child component should look or behave through props.
Props are data that comes from the outside and can only be updated by the parent component. The parent component owns the data and transfers it to the child components.
- Logic: The logic of a component refers to the code that handles the component's behavior and functionality. It includes functions, event handlers, and any other operations that manipulate or process data. 3. View (UI): The view, or UI (User Interface), represents the visual part of the component that users interact with. It includes elements, styles, and layout configurations that define how the component appears on the screen.
React follows a one-way data flow:
Data flows from the parent component to its child components through props.
Child components cannot directly modify the data received via props; they can only read and display it.
If a child component needs to update data, it should communicate with its parent component by triggering events or callbacks.
The parent component can then modify its own state based on these events and pass the updated data down to its child components again.
By separating data, logic, and view, React components promote a modular and reusable structure, making it easier to build complex user interfaces.
Here is a working example of a Profile Card from Jonas Schmedtmann's React Course Challenge, Problem #1, and I solved. Sandbox Link below
Top comments (0)