React Components - The Building Blocks of Software Success

#react #beginners #webdev #tutorial

On first glance, React components look like some esoteric construction that only the most experienced software engineers could understand or even use. However, this couldn't be further from the truth. React components are revolutionary in their ability to compartmentalize various code and share it to construct more complex software applications. Let's take a deeper look at this amazing application.

What are React Components?
In a nutshell, React components are independent, reusable code snippets that allow us, as the coder, to piece together to create more complex code. Conceptually, components work in the same way as JavaScript functions as they accept various inputs and then produce JSX elements that dictate how the code should be displayed on the DOM. A way to think about components is that they are the bricks, planks of wood, pipes, etc. that come together to construct a building. In our analogy, each material used serves a different purpose but when they are combined, they each contribute to the proper function of the building. Components are no different, they each have their own functionality but when combined, they produce a unique web application that functions the way it is intended.

Enough analogies and memes about components, let's see some code.

React Components Example Code

function Home(){
    return (
        <div>
            <h1> Welcome to Components in React! </h1>
            <h2> 
                This is an example of one component. We
                will first see how this displays on the
                DOM and then we will see how to properly import
                and export this in the next example. 
            </h2>
        </div>
    )
}

Let's closely examine our code example above:

First, we declared our function "Home"
Next, we declared our return by using JavaScript XML (JSX) which "tells" the app what we want to be displayed on the DOM and how we want it to be laid out. Here's how the code will be displayed on our app:

The next step to using components is to compartmentalize them into parent and child components.

Parent and Child Components
Understanding the relation between parent and child components is what allows us to properly share "props" ("properties") or data between individual components. To start, let's look at our code example below:

function App(){
  return(
    <div>
      <Home />
      <About />
    </div>
  )
}

In our example above, we have a new component called "App" (our parent component) that includes both "Home" and "About" components which are our child components. To clarify, the "App" component does not have the "Home" and "About" components on the same file, the "Home" and "About" have their own separate files that are imported onto the "App" component file. Let's see this import and export of components in our code:

import Home from "./Home"
import About from "./About"
function App(){
  return(
    <div>
      <Home />
      <About />
    </div>
  )
}

export default App;

In our example above, you will notice that we are telling our "App" file to grab the "Home" and "About" components from their respective files as seen in "./Home" and "./About". Additionally, we exported our "App" component so that it can be used by other components as well. Note: In the files for "Home" and "About," these components are also exported in the same way as "App". One final thing we need to discuss are the use of "props" in sending data from parent component to child component.

Props
Props allow us to send data and functions from parent to child components. This is helpful as it allows us to further connect components but by also having them still be compartmentalized. Before we see an example of this, there are two very important rules that apply to sending props and the child-parent component relation:

Props can ONLY be sent from parent to child component
Child components can only import into parent components, parent components can NOT import into child components.

Note: the 2nd rule is important when we are sending props from parent to child component as the child component MUST be imported into the parent in order for the props to be successfully sent to the child component.
Prop example (parent component passing props to child):

import Home from "./Home"
import About from "./About"
function App(){

  return(
    <div>
      <Home articleText="Hello, I'm a prop that is a string" number={2}/>
      <About />
    </div>
  )
}

export default App;

In our example, the parent component("App") sent the props named "articleText" and "number" to the child component("Home"). These props will then be used by the child component to either be displayed, used in a function, etc. Now, let's see how the child component received the props from the parent component...

function Home(props){
  return(
    <div>
      {props.articleText} {props.number}
    </div>
  )
}

export default Home;

In our example code, the child component took in the props and then displayed the props in the

tag. Note, the prop can also be "destructured" meaning that we can declare it as a parameter in the function and thereby shorten the declaration of it in the child component function. For example:

//parent component:
import Home from "./Home"
import About from "./About"
function App(){
const article = "Hello, I'm a prop that is a string"
const number = 2
  return(
    <div>
      <Home articleText={article} numberValue={number}/>
      <About />
    </div>
  )
}

//child component:
export default App;

function Home({articleText, numberValue}){
  return(
    <div>
      {article} {number}
    </div>
  )
}

export default Home;

In example above, we sent our props from parent to child but in the child component, we destructured the prop names so that instead of declaring the props as "props.articleText", we could declare it simply as "article" as that is the value of the prop.

Conclusion
We merely just touched on the basics of React components. The possibilities of what you can do with React components are almost endless. Regardless, now you have the tools and building blocks to create amazing apps - time to get building.

Discussion Questions