Menu Icon Close
App Development

React quickly to changing requirements, with ReactJS

Blog React Compositions image
March 07, 2017
By abhijeet
Reading Time: 3 minutes

Have you ever seen an application without a change request? Changes are inevitable when you are developing an application; so how should one cope with the ever-changing world of development? But, 5 Questions one should consider before opting for Mobile Applications.

Let’s dig a bit deeper.

Suppose, you are creating User Interface for a content management application. All you need is a form, using which, you can upload different types of content.

It goes without saying that different types of content require different fields. For example, video content requires genre and length, while images require resolution and alternate description. In addition to those, there are also a few common properties such as Title and URL. Creating a form separately for both the types is definitely a pain, especially, given the fact that you may create content of varied types, in future – Audio, for example!
And this is precisely where React Compositions can prove to be a life-saver by allowing re-usability of code between the components. Props and compositions, give you all the flexibility required to customize a component’s look and behavior.

Here’s a quick walkthrough of how we can create a component called ContentUpload and reuse it for different content types; passing special children props to the children elements and changing their outputs, directly:


import React from 'react';
export default class ContentUpload extends React.Component { constructor(props) { super(props); this.state = {title: '',url:''}; this.handleChange = this.handleChange.bind(this); } handleChange(event) { const target = event.target; const name = target.name; const value = target.value; this.setState({ [name]: value }); } onSave(event) { console.log("event",this.state); this.props.onSave(event); } render() { return (

{this.props.header}

{this.props.children}

) } } ContentUpload.propTypes = { header: React.PropTypes.string.isRequired, onSave: React.PropTypes.func.isRequired };
This component can now be reused in the parent component for different content types, as follows:


import React from 'react';
import './App.css';
import ContentUpload from './ContentUpload';
const divStyle = { 'marginTop': '20px'
};
class App extends React.Component { constructor(props) { super(props); this.state = { value: 'video', form: (

 

) }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { let contentForm; switch (event.target.value) { case "image": contentForm = ; break; case "video": contentForm =

 

; break; default: contentForm = ; } this.setState({form: contentForm}); this.setState({value: event.target.value}); } handleSubmit(event) { event.preventDefault(); } onContentUpload(event) { } render() { return (

Content Type :

{this.state.form}

); } } export default App;

This saves the overhead of creating and managing different forms for different content types and reduces redundancy of the code. Hopefully this will give you an idea of how to design react components and re-use them using Compositions in React.

Prior to React Compositions, Mixins were used for sharing code between components. But due to some pitfalls, it’s wiser to use React compositions. The above example is a simple use case for creating composite components in React, this can be used in complex use cases as well which we will discuss along with the pitfalls of Mixins, in another blog post.

Sampurn Banerjee

Sampurn Banerjee works as a Full Stack Developer at BluePi. His areas of interest include Scala, Angular, React, Java, Meteor, and Javascript. A football fanatic, when he is not working he likes to keep himself busy by playing on ps4 and reading fiction. Connect with him for anything that’s Tech-savvy and prepared to be surprised.

TAGS :

Invest in better
solutions today

Contact Us