In a previous blog, I wrote about Elements and JSX, and gave examples of how they’re used in React. Building off of that knowledge, this week we’ll be going over the following:
- Components and Props
- Lists and Keys
- Events and Event Handlers
We’ve got a lot to go over, so let’s get started!
Components and Props
We briefly discussed Components in last weeks blog. Remember this?
Functional Components are my component of choice, as they’re much easier to read and test since they’re plain JavaScript functions without state or lifecycle-hooks.
Unlike normal JavaScript functions, Functional Components must be capitalized.
Arrow functions may also be used.
We also have Class Components, which use extends and render method. These are also known as Stateful Components because they implement logic and state. React lifecycle methods can be used inside of Class Components (like componentDidMount).
Fun fact about components: They can be reused in multiple pages in an app!
Data can be passed down to components with properties or Props
“Props” is a special keyword in React, which stands for properties, and is used for passing data from one component to another. Furthermore, props data is read-only, which means that data coming from the parent should not be changed by child components.