Edit on GitHub

Create a Reusable Component

First things first. Let's make our thing...a Thing!

In this guide, we’ll take some of the basics we explored in our Quick Start and go further. We will make our resource list a dynamic list that is styled, tested, published and capable of being deployed with other deployment software like Docker and Kubernetes.

Building this application with React components will allow for greater modularity, which will enable reuse of code in later iterations. This greatly increases workflow efficiency by allowing developers to easily divide and conquer tasks during the production process. Furthermore, better separation of concerns allows for much easier debugging in general.

Let's begin by using cd .. to exit the directory for Your-Awesome-App and create a new, separate directory for your reusable component:

$ cd ..
$ mkdir your-awesome-component
$ cd your-awesome-component

Again, we'll use Yeoman to scaffold our first stand alone component. We will globally install the Electrode generator-electrode-component:

$ npm install -g generator-electrode-component

Then generate your new component:

$ yo electrode-component

Fill out the Electrode generator-electrode-component with your information:

component-form

Open the application up with your favorite text editor. We'll start with a fast high level view of the most important files in your component:

  • demo/

    A live demo of your component. You can play with its integration in real time. This folder contains the .example files which you can customize to demonstrate the default state of your components when mounted in the playground.

  • node_modules/

    Other Javascript files contained in modules that we will use in this application, including Electrode modules that create your out-of-the-box Universal app.

  • src/

    Where all our component's source code lives. Non-universal apps might normally call this the client folder, but since our app code will run both on the client and server, via server-side rendering, we call this folder src.

  • test/

    Test driven development is the WalmartLabs way and critical for successful growth and scaling. All testing code lives in this folder and we will focus on unit testing with Mocha + Enzyme soon.

  • src/components/.eslintrc

    A configuration file that sets our custom linting rules and basic syntax validation. In this case it is extended from the electrode-archetype-react-component.

  • gulpfile.js

    Gulp is a Javascript build tool that lets us automate tasks and gulpfile.js is where we define those tasks. We like its simple syntax and the increased productivity from using an intuitive task runner.

Now that we understand the basic structure of the component, let's build out the component's functionality by following the below steps:

  1. Develop a couple of low-level components
  2. Develop helpers for the components
  3. Develop styles using CSS modules
  4. Develop main high-level component
  5. Develop tests for the above components
  6. Add Examples to the Demo
  7. Build and Demo the component
  8. Generating documentation

Trust us, it will be worth it.