React: Core Concepts (Pt.2)

Stephanie Segura
2 min readJun 1, 2021

--

Written by Stephanie Segura | May 30, 2021

Thank you for visiting this post! Be sure to also take a look at my other work on LinkedIn, Github, and my website.

Building Blocks

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.

Functional Component Syntax

Arrow functions may also be used.

Functional Component: Arrow Function

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).

Class Component Syntax

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.

--

--