React Components
When googling react components, the first thing that returns is a defining of components as independent and reusable bits of code. React components behave similarly to JavaScript functions but return HTML and are functionalities that work in isolation.
Components are special to JavaScript and can be passed as properties or props. Components interact with each other and can be referred to inside other components. These components are searate and are recommended to be separated out in separate .js files.
Note: The filename must start with an uppercase character.
Components can be likened to building blocks that together form a React app. A component optionally accepts inputs and returns a React element that defines how it’s piece of the user interface appears. These components comprise the full React app.
Note: The two types of components are functional and class components.
One of the component types, functional components, have the following attributes:
Functional- the components are basically functions
Stateless- the components do not hold state
Presentational- the components output UI elements
A simple example of a functional component is below:
Get Josh Fowler’s stories in your inbox
Join Medium for free to get updates from this writer.
const Greeting = ( ) => <h1> Hi, I’m a dumb component!</h1>
Class components on the other hand, have these attributes:
They contain logic.
They can hold and/or manage local state.
They can hold numerous other components.
If you need to manage local state, need to add lifecycle methods to your component, or need to add logic for event handlers use a class component.
Components can accept props and return a modified React element according to the received props. Props are what makes components in React customizable. They also allow the passing of data down from one component to another.
By specifying propName={propValue} within the components tag, the name you want rendered to the screen is passed in as a prop. There isn’t a limit to the number of props that can be supplied to a component.
References:
https://medium.com/the-andela-way/understanding-react-components-37f841c1f3bb
