Components
In React, components make up the UI of the application. Components are pieces of code that are reusable and independent. Each component comes with one or both of the following:
- A state object that contains component data that is expected to change over time.
- A props object with data that can be passed down from parent component to child component.
Class Components
Class components contain a state and use a render()
function to return JSX markup. When defined, the class
has to be an extention of the React.Component
class:
import React from 'react';class ClassComponent extends React.Component {this.state = {property1: "A string",property2: 1,property3: true}render() {return (<div>...<div>)};};
Function Components
Function components are stateless and only use the return
statement. No import statement necessary:
function FunctionComponent(props) {return (<div>...<div>)}
Arrow Function
The arrow function is a feature that was introduced in ES6. It uses the =
and >
characters to define a function like a variable. In React, function components can be defined with this syntax:
const FunctionComponent = (props) => {return (<div>...<div>)}