MOCKSTACKS
EN
Questions And Answers

More Tutorials









React Components

Creating Components


This is an extension of Basic Example:

Basic Structure


import React, { Component } from 'react';
import { render } from 'react-dom';
class FirstComponent extends Component {
 render() {
 return (
 <div>
 Hello, {this.props.name}! I am a FirstComponent.
 </div>
 );
 }
}
render(
 <FirstComponent name={ 'User' } />,
 document.getElementById('content')
);

The above example is called a stateless component as it does not contain state (in the React sense of the word).

Stateless Functional Components


In many applications there are smart components that hold state but render dumb components that simply receive props and return HTML as JSX. Stateless functional components are much more reusable and have a positive performance impact on your application.

They have 2 main characteristics:

1. When rendered they receive an object with all the props that were passed down
2. They must return the JSX to be rendered


// When using JSX inside a module you must import React
import React from 'react';
import PropTypes from 'prop-types';
const FirstComponent = props => (
 <div>
 Hello, {props.name}! I am a FirstComponent.
 </div>
);
//arrow components also may have props validation
FirstComponent.propTypes = {
 name: PropTypes.string.isRequired,
}
// To use FirstComponent in another file it must be exposed through an export call:
export default FirstComponent;

Stateful Components


In contrast to the 'stateless' components shown above, 'stateful' components have a state object that can be updated with the setState method. The state must be initialized in the constructor before it can be set:

import React, { Component } from 'react';
class SecondComponent extends Component {
 constructor(props) {
 super(props);
 this.state = {
 toggle: true
 };
 // This is to bind context when passing onClick as a callback
 this.onClick = this.onClick.bind(this);
 }
 onClick() {
 this.setState((prevState, props) => ({
 toggle: !prevState.toggle
 }));
 }

 render() {
 return (
 <div onClick={this.onClick}>
 Hello, {this.props.name}! I am a SecondComponent.
 <br />
 Toggle is: {this.state.toggle}
 </div>
 );
 }
}

Extending a component with PureComponent instead of Component will automatically implement the shouldComponentUpdate() lifecycle method with shallow prop and state comparison. This keeps your application more performant by reducing the amount of un-necessary renders that occur. This assumes your components are 'Pure' and always render the same output with the same state and props input.

Higher Order Components


Higher order components (HOC) allow to share component functionality.

import React, { Component } from 'react';
const PrintHello = ComposedComponent => class extends Component {
 onClick() {
 console.log('hello');
 }

 /* The higher order component takes another component as a parameter
 and then renders it with additional props */
 render() {
 return <ComposedComponent {...this.props } onClick={this.onClick} />
 }
}
const FirstComponent = props => (
 <div onClick={ props.onClick }>
 Hello, {props.name}! I am a FirstComponent.
 </div>
);
const ExtendedComponent = PrintHello(FirstComponent);

Higher order components are used when you want to share logic across several components regardless of how different they render.

Conclusion

In this page (written and validated by ) you learned about React Components . What's Next? If you are interested in completing React tutorial, your next topic will be learning about: React Basic Component.



Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.


Share On:


Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.