Skip to main content
Kinetic Community

Create your first components

Overview

In this exercise we will create some simple stateless components. The bundle is missing the ServiceCard components. The removed components will need to be re-added back to the bundle.  After the activity there is a challenge, complete the challenge or find the error in step 9 to get your application working!

Goals of this activity:

  • Create ServiceCard.js file.
  • Add ServiceCardTop, ServiceCardBottom, ServiceCardLarge and ServiceCardSmall components.
  • Remove commented and placeholder code from Catalog.js, CatalogSearchResults.js and Category.js
  • Add Link import and element

Goal of this challenge:

  • Refactor components to destructure necessary props.

Activity 3

For code readability add a new line after each step that instructs to add code to the file.  If the instruction asks to replace a comment then a new line is not necessary.  // indicates that the line is commented and should appear grey in the code editor.

Create the Service Cards

  1. From the root of the bundle navigate to the Services directory: <root>/src/components/Services.
  2. Create ServiceCard.js file in the Services directory.
  3. Add the React import to first line of the ServiceCard.js file.
import React from 'react';
// Add Link import from step 2 of the "Add the link" section here.
  1. Add ServiceCardTop component.
const ServiceCardTop = props =>
  <div className="service-icon-wrapper">
    <div className="icn-frame">
      <i className={`fa fa-fw ${props.form.icon}`} />
    </div>
  </div>;
  1.  Add ServiceCardBottom component.
const ServiceCardBottom = props =>
  <div className="service-details-wrapper">
    {/* Add step 2 of the "Add the link" section here. */}
    <p className="ellipsis">{props.form.description}</p>
  </div>;
  1. Add ServiceCardLarge component.
export const ServiceCardLarge = props =>
  <div className="card-wrapper col-xs-12">
    <div className="service-card clearfix">
      <ServiceCardTop form={props.form} />
      <ServiceCardBottom form={props.form} categorySlug={props.categorySlug} />
    </div>
  </div>;
  1. Add ServiceCardSmall component.
export const ServiceCardSmall = props =>
  <div className="clearfix submission">
    <ServiceCardTop form={props.form} />
    <ServiceCardBottom form={props.form} categorySlug={props.categorySlug} />
  </div>;
  1. In src/components/Catalog.js remove comment ( // ) from line 5.
  2. Replace line 72 - 75 with below code.
.map(form => <ServiceCardSmall form={form} key={form.slug} />)
  1. In src/components/Services/CatalogSearchResults.js remove comment ( // ) from line 3.
  2. Replace line 29 - 32 with below code.
{ forms.map(form => <ServiceCardLarge form={form} key={form.slug} />) }
  1. In src/components/Services/Category.js remove comment ( // ) from line 4.
  2. Replace line 27 - 30 with below code.
.map(props => <ServiceCardLarge {...props} />)
  1. In the browser visit localhost:3000/<spaceSlug>/<kappSlug>#/

Add the link

  1. Return to ServiceCard.js file in atom.
  2. Replace the comment on line 2 with the Link import.  
    import { Link } from 'react-router-dom';
    
  3.  Replace comment in the ServiceCardBottom component. 
    <h5 className="ellipsis">
      <Link
        to={
          categorySlug
            ? `/categories/${props.categorySlug}/${props.form.slug}`
            : `/forms/${props.form.slug}`
        }
      >
        {form.name}
      </Link>
    </h5>
    

Note: Step 3 will cause an error in the code continue on to learn how to fix it.

To see the final version of the ServiceCard component visit the github repo.

Challenge

The components in the exercise are pulling properties form the props object. The challenge will be to destructor the appropriate properties from the props object. Once the challenge is complete the bundle will be in a working state again.

Below is some help to assist with the challenge:

If we have a props object that look similar to this:
const props = {
    firstName: "Wally",
    lastName: "Data"
}


If we wanted to destructor the first and last name properties off of the props object we would do this:
const DestructorDemo = ({firstName, lastName}) => <div>
        <p>First Name: {firstName}</p>
        <p>Last Name: {lastName}</p>
      </div>;