Packt+ | Advance your knowledge in tech

You're reading from Getting Started with React

Product type Book

Published in Apr 2016

Publisher

ISBN-13 9781783550579

Pages 212 pages

Edition 1st Edition

Languages

JavaScript

Concepts

Front End Web Development

Authors (3):

Doel Sengupta

Manu Singhal

Danillo Corvalan

View More author details

Table of Contents (18) Chapters

Getting Started with React

Credits

About the Authors

Acknowledgments

About the Reviewers

www.PacktPub.com

Preface

1. Getting Started with ReactJS

2. Exploring JSX and the ReactJS Anatomy

3. Working with Properties

4. Stateful Components and Events

5. Component Life cycle and Newer ECMAScript in React

6. Reacting with Flux

7. Making Your Component Reusable

8. Testing React Components

9. Preparing Your Code for Deployment

10. What's Next

Index

Chapter 7. Making Your Component Reusable

Until now, we have dug into React's components' lifecycle, properties, state, and ECMAScript with respect to React 0.1.13 and future versions. In this chapter, we will also see how we can write reusable components/code in React applications. Such reusable components in React are named Mixins. Furthermore, we will explore how the React component's properties can be validated.

The following topics to be covered in this chapter:

Understanding mixins
A higher order component in ECMA6 (as Mixin is not supported in ECMA6)
Different types of validations in a React application
The structure of a React component and application's architecture

Understanding Mixins

The Mixins (reusable components) are typically those React components that are used in multiple places and thus can be reused. Typically, the design elements, such as buttons, layout components, form fields, or any code logic/computation, that are used more than once are extracted in code named Mixin. Thus, Mixins help us incorporate some additional functionalities to existing React components by acting as helpers.

Note

Like in the previous chapters , the index.html content remains the same. Only the contents of the corresponding js (having the React components) changes.

Exploring Mixins by example

In this example we are setting the interval of the window global objects for every 100 ms:

Content of index.html:

<!DOCTYPE html>
            <html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0-rc1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script...

Validations

Validations are an integral part of any application dealing with user input. In ReactJS, there are some validations provided by the library that enables the developer to validate the data received.

Data are received mostly as properties (props) in react application. The various validators are exported from React.PropTypes. Any validation error, if occurs, will appear in the JavaScript console. Any such error occurring due to validation check will only occur in the development mode due to performance reasons.

Take a look at the Facebook ReactJS development team documentation https://facebook.github.io/react/docs/reusable-components.html#prop-validation. The following is an example of the various validators:

React.createClass({
  propTypes: {
    // You can declare that a prop is a specific JS primitive. By default, these
    // are all optional.
    optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
    optionalFunc: React.PropTypes.func,
    optionalNumber...

The structure of component

Now that we have explored quite a lot regarding ReactJS, there might be queries in your mind about how to architecture a react component or more broadly a react application as a whole. There are no ground rules that have been set, which is ideal while writing an application based on ReactJS. However, if we dig into the tutorials by the Facebook documentation team, hyperlink https://facebook.github.io/react/docs/tutorial.html, we will be able to understand the underlying way they have used while writing such an app.

Let's explore first how a component is structured mostly:

The component declaredData is fetched from the server [if required].
The propTypes of the component are declared [used for validations].
Component lifecycle methods [componentWillMount, componentDidMount, componentDidUpdate,componentWillUnmount, and so on] are defined.
Within each of these lifecycle methods, the functions of these methods are either declared or called internally from another JS functions...

Summary

In this chapter, we explored how we can develop reusable components in ReactJS (Mixins, before ES6 implementation). We also came to know about the higher order components, which are used later in the latter versions of ReactJS (from 0.13), which support ES6 and doesn't support Mixins. Validations are an integral part of any application, especially those using user input (that is, form inputs). We explored how ReactJS deals with validations and how we can use our custom validations as well. We got an overview how the react components are structured. In the following chapter, we will be dealing with the testing, in a React application.