QUICK RECAP

In Chapter 2, I dealt primarily with the diverse ways of styling React Components. Each way had their own specific use-cases and advocated for the use of External CSS for larger projects. The Chapter also contained two projects – AwoCSS and HoverCSS. AwoCSS is a color palette library while HoverCSS is a hover animation library. The two projects helped in exploring the diverse ways of styling React Components.

SIMPLE PROPS

Chapter 3 continues the journey in React. This time I would be elaborating on a crucial aspect of React – which is Props. What then are Props? According to the React documentation, props can be defined as an element which React Components use to communicate with one another. This is an intuitive definition. But the way I like to think of props is as parameters and arguments that you can pass to a function. And in way, they do operate as parameters and arguments the only difference being that in React, props usually contain some sort of data encapsulated in a data container like arrays, dictionaries, variables, and even other functions.

TIPS

To read more about Props, you can visit the React Documentation.

Props are tools that I use whenever I create React Applications as they help in writing leaner code and increase the level of encapsulation between components. However, there is a drawback (I’m sure there are more but this one stands out), Props increase the dependency amongst components hence leading to tight coupling. This is why they must be used with caution.

I think that’s enough literature for now, let’s dive into the project and get our hands dirty examining and understanding Props. Below is the code for the first way of using Props in React.

// 1. List of Programming Languages
// 2. Props include: Language Name, Creator, Year Created, Major use
// Major Identifier, Code of Hello World.

import React from "react";

const HelloWorld = () => {
    const ProgrammingLanguage = (props) => {
        return (
            <section>
                <details>
                    <summary>{props.languageName}</summary>
                    <h4>Creator : {props.languageCreator}</h4>
                    <time datetime="2000">Year Created : {props.languageYearCreated}</time>
                    <p>{props.languageIdiosyncracy}</p>
                    <ol>
                        <h4>Popular Usecases</h4>
                        <li>{props.languageIndustry1}</li>
                        <li>{props.languageIndustry2}</li>
                        <li>{props.languageIndustry3}</li>
                    </ol>
                    <h4>Hello World in {props.languageName}</h4>
                    <code>{props.languageCode}</code>
                </details>
            </section>
        );
    }
    
    return (
        <>
            <h2><b>{HelloWorld.name}</b></h2>
            <ProgrammingLanguage 
                languageName = "Python"
                languageCreator = "Guido Van Rossum"
                languageYearCreated = "1991"
                languageIdiosyncracy = "Dynamic, easy to learn language for fast prototyping"
                languageIndustry1 = "Machine Learning"
                languageIndustry2 = "Artificial Intelligence"
                languageIndustry3 = "Data Science"
                languageCode = "print('Hello World')"
            />
            
            <br />
            
            <ProgrammingLanguage 
                languageName = "Javascript"
                languageCreator = "Brendan Eich"
                languageYearCreated = "1995"
                languageIdiosyncracy = "Multi-Paradigm language, efficient for building web technologies"
                languageIndustry1 = "Internet & Web"
                languageIndustry2 = "E-commerce"
                languageIndustry3 = "Visualizations"
                languageCode = "console.log('Hello World')"
            />
            
            <br />
            
            <ProgrammingLanguage 
                languageName = "C"
                languageCreator = "Dennis Ritchie"
                languageYearCreated = "1972"
                languageIdiosyncracy = "A general-purpose computer programming language"
                languageIndustry1 = "Operating System"
                languageIndustry2 = "Device Drivers"
                languageIndustry3 = "Physical Computing"
                languageCode = '#include <stdio.h>;

int main() {
  printf("Hello World!");
  return 0;
}'
            />
            
        </>
    );
};

export { HelloWorld };

CODE EXPLANATION

At the top of the code, you’d notice three statements giving a summary of the application. The second comment contains a list of props I want to pass from the child component to the parent component.

CHILD AND PARENT COMPONENTS

What is a Child Component and a Parent Component? In the code above the Child Component would be ProgrammingLanguage() while the Parent Component would be HelloWorld(); so, a Child Component can be defined as a component that’s nested in another component as shown in the code above while the Parent Component is the opposite, it’s a component that has one or more components.

The logic for this application is housed in the HelloWorld() component. This component has a Child Component called ProgrammingLanguage() which contains a parameter called props. Note that the use of the word “props” is a convention, you can name this variable whatever you desire but you must remember to be consistent in using the chosen name when passing it as an argument in the code. In this example, I followed the convention and passed a parameter called “props” to the ProgrammingLanguage() component.

PROPS

There are a total of eight props that I created. These include:

1. languageName
2. languageCreator
3. languageYearCreated
4. languageIdiosyncracy
5. languageIndustry1
6. languageIndustry2
7. languageIndustry3
8. languageCode

The languageName prop is the name of the programming language. The languageCreator prop is the name of the creator of the programming language. The year the language was created is what concerns languageYearCreated. The peculiarity of the language is the concern of languageIdiosyncracy. languageIndustry1, languageIndustry2, languageIndustry3 – these all deal with the main sectors in technology where these languages are most efficient and popular with and lastly, languageCode shows how to write “Hello World” in that language.

Before I continue explaining the code, I’m convinced that I need to make a small detour and talk briefly about an aspect of components for the next set of the code to begin to make sense.

HIGHER ORDER COMPONENTS

If you recall sometime in Chapter 2, I mentioned that React Components are like functions and they can return variables, arrays, dictionaries and even – components. Yes, Components can return Components. So, in a way React Components when they return other Components can be called Higher-Order Components. You can see how similar writing React Code is to Declarative Programming. An example below shows how this is done:

import React from "react";

const Component1 = () => {
  const Component2 = () => { return <h1> This is a Component </h1>;}
  return <Component2 />;
}

The code above shows how Components return other Components in React. And this is not limited to a Parent-Child relationship, in React we can return Components that even exist in a different file (the second implementation of the ‘Hello World’ application shows this), in the same file or as done above in the same component. The important idea I want to get across is how the returned components are, you can see that they look like HTML attributes e.g., <input /> etc. The components can also be returned in the classic way of writing the opening and closing tag e.g.

import React from "react";

const Component1 = () => {
  const Component2 = () => { return <h1> This is a Component </h1>;}
  return <Component2><Component2 />;
}

And the code still works but the first approach has less code and makes other React programmers that come across your code know it is a React Component and not an HTML Element. Hence, we can see that React Components can return a diverse set of elements from HTML elements to other components. Let’s head back to talking about “Props”.

TIP

To know more about Declarative Programming (telling the computer what to do) and its difference from Imperative Programming (telling the computer how to do it), you can read the material over at freecodecamp.

PROPS CONTINUATION

The ProgrammingLanguage() component, contains the structure of the application. In it we then pass the different props where we want them to show e.g. { props.languageName } wrapped in curly braces since these are all Javascript and not the regular HTML code. This is how we can pass data up i.e. from the Child Component to the Parent Component. We do this for all the props we want to pass up referencing each of them with props then dot notation then props name. If you were going to use a name other than props for instance data, it would be { data.languageName } and so on.

Next, in the return statement of the parent component, we return the child component – ProgrammingLanguages then pass unique values to the different props:

return (
        <>
            <h2><b>{HelloWorld.name}</b></h2>
            <ProgrammingLanguage 
                languageName = "Python"
                languageCreator = "Guido Van Rossum"
                languageYearCreated = "1991"
                languageIdiosyncracy = "Dynamic, easy to learn language for fast prototyping"
                languageIndustry1 = "Machine Learning"
                languageIndustry2 = "Artificial Intelligence"
                languageIndustry3 = "Data Science"
                languageCode = "print('Hello World')"
            />

We do this for any amount of Programming Language we want to add to the application. In this case, I house all the different components inside an empty React Fragment (<></>) – you can use a <div></div> or other HTML elements but it must return only one thing; then each different component had different props passed to them.

What happens if you don’t pass any value to the prop? Passing no value to the prop using this style has no side effects and React does not emit any type of error. However, if we were receiving data from an external source – an API – then there would be a problem as no value can be null or empty, React would spit out an error. In such a scenario, there are different approaches to handle this problem. In subsequent chapters we would look at them but to give you a heads up, I have edited one of the props in the ProgrammingLanguages component:

const ProgrammingLanguage = (props) => {
        return (
            <section>
                <details>
                    <summary>{props.languageName}</summary>
                    <h4>Creator : {props.languageCreator || "No Creator" }</h4>
                    <time datetime="2000">Year Created : {props.languageYearCreated}</time>
                    <p>{props.languageIdiosyncracy}</p>
                    <ol>
                        <h4>Popular Usecases</h4>
                        <li>{props.languageIndustry1}</li>
                        <li>{props.languageIndustry2}</li>
                        <li>{props.languageIndustry3}</li>
                    </ol>
                    <h4>Hello World in {props.languageName}</h4>
                    <code>{props.languageCode}</code>
                </details>
            </section>

In line 6 of the code above I have used the logical operator “or” in Javascript to provide a fallback option in case the languageCreator prop has no value. So, any programming language component that has no languageCreator prop value would have “No Creator”. The live site is shown below where this is the case:

And that concludes this first section on Props. Before I can go any further, I must make a long detour on an important React topic – Hooks. After writing about Hooks, then we can approach the second way of passing props to components and conclude the Chapter 3 of this journey. The image below shows the live implementation of the site.