React Components
Components are reusable UI pieces — buttons, cards and nav bars become composable building blocks.
Why this matters on Global Tuts
Component thinking scales from one page to full apps maintained by teams.
Common beginner mistakes
- Huge components doing everything
- Prop drilling without planning structure
- Mutating state directly instead of setState/setter
React Components
Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML.
Components come in two types, Class components and Function components, in this tutorial we will concentrate on Function components.
In older React code bases, you may find Class components primarily used. It is now suggested to use Function components along with Hooks, which were added in React 16.8. There is an optional section on Class components for your reference.
Create Your First Component
When creating a React component, the component's name MUST start with an upper case letter.
Class Component
A class component must include the extends React.Component statement.
This statement creates an inheritance to React.Component, and gives your component access to React.Component's functions.
The component also requires a render() method,
this method returns HTML.
Example
Create a Class component called Car
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
Function Component
Here is the same example as above, but created using a Function component instead.
A Function component also returns HTML, and behaves much the same way as a Class component, but Function components can be written using much less code, are easier to understand, and will be preferred in this tutorial.
Example
Create a Function component called Car
function Car() {
return <h2>Hi, I am a Car!</h2>;
}