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
$ npm install -g generator-electrode-component
Then generate your new component:
$ yo electrode-component
Fill out the Electrode generator-electrode-component with your information:
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:
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.
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
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.
A configuration file that sets our custom linting rules and basic syntax validation. In this case it is extended from the
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:
Trust us, it will be worth it.