Building Enterprise JavaScript Applications

Defining React components

Although we have made our React code much clearer by using JSX, it's still not as clean and DRY as it could be. For instance, we are defining the same input element twice, even though they have the same structure.

<label>  Email  <input type="email" /></label><label>  Password  <input type="password" /></label>

This is not ideal because of the following factors:

• It can lead to inconsistency. To achieve a consistent user experience, we should apply a consistent style and layout for all components, including these input boxes. Defining input boxes without a standard template will make it difficult to do this.
• It is difficult to update. If the designs change and we need to update all the input boxes to fit this new design, ...