Few things about React components

Let’s talk a little bit technical stacks from the company that I’m working for. We’re using React and Apollo GraphQL as main libraries for front-end stacks. And before I joined this company, I know a little bit about React - something like initializing a component, fetch an API from server and lifecycle methods in React and how the Flux works.

I had a chance to learn more about React components from my team. They prefer to write higher-order-component (HOC) and stateless component and they helped me understand about these, to contribute to our project. I’m so happy when had chances to learn something new.

After few months, now the project works well - So I spend the time to write down my understanding about React component as a way to share and keep a note in the future.

Component

I knew a little bit about component when I was an intern web developer. At that time, I tried to split a web UI to multiple UI entities so I can write CSS code for it. Then when I was a junior web developer I knew more about component - it’s not only UI part, component includes its own code, structure, and API.

Now, after few years, I’m a software developer, my knowledge about the component is extended. Components are able to reusable. The component architecture allows you to think of each piece in isolation. Each component can update everything in its scope without being concerned about how it affects other components.

In React, there’re two different ways to combine components and data: props and state. State is mutable and Props is not (immutable).

State’s scope it limited to the current component. A component can init the state and update it when necessary.

Props should be immutable and top-down. This means a parent component can pass whatever data to its children as props and the child can’t modify its props. That’s explain if we want to pass the state to child component, we should use props.

Functional component vs Class component

Functional component

Functional components are just JavaScript function. They take in optional props as inputs.

1
2
3
4
5
6
7
8
const Error = ({ msg }) => (
  <Alert
    message="Error"
    description={msg}
    type="error"
    showIcon
  />
);

Class component

Class components offer more features and we can initialize the state in class component - this is a primary reason when choosing between class vs function component.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class LogInForm extends React.Component {
  constructor() {
    super();
    this.state = {
      redirectToReferrer: false, // to redirect to admin if login is successful
      hasError: false, // Show the error message
      loading: false, // loading button
    };
  }

  render() {
    // JSX
  }
}

Class components can exist without state too. About the super() or constructor I think almost developer understands it - so I don’t need to write.

Stateful component vs Stateless component

Stateful component

Stateful components are always class components. Stateful components have a state that gets initialized in the constructor. And we able to update the state in order to create an interactive application.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class LogInForm extends React.Component {
  constructor() {
    super();
    this.state = {
      redirectToReferrer: false, // to redirect to admin if login is successful
      hasError: false, // Show the error message
      loading: false, // loading button
    };
  }

  handleSubmit() {
    // Update the state
  }

  render() {
    // Render based on the state
  }
}

Stateless component

For creating the stateless component, you can use either a function or a class.

Higher-order Component (HOC)

Have you heard about Higher-order function?

In mathematics and computer science, a higher-order function is a function that does at least one of the following:

  • takes one or more functions as arguments (i.e. procedural parameters),
  • returns a function as its result.

So, Higher-order Component (HOC) is a function that takes a component and returns a new component. How you use the passed Component and returns a Component is up to you. You can return Stateful or Stateless component.

HOC doesn’t modify the input component - HOC composes the original component by wrapping it in a container component.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const Layout = ({ component: Component, ...props }) => (
  <Layout className="organizationLayout">
    <Header>
      {
        /*
        <div className="logo" />
        */
      }
      <Menu
        theme="dark"
        mode="horizontal"
        defaultSelectedKeys={['2']}
        style={{ lineHeight: '64px' }}
      >
        {
          /*
          <Menu.Item key="1">nav 1</Menu.Item>
          <Menu.Item key="2">nav 2</Menu.Item>
          <Menu.Item key="3">nav 3</Menu.Item>
          */
        }
      </Menu>
    </Header>
    <Content style={{ padding: 50 }}>
      <div style={{ background: '#fff', padding: 24, minHeight: 600 }}>
        <Component {...props} />
        </div>
    </Content>
    <MyFooter />
  </Layout>
);

HOCs are common in third-party React libraries.

Recompose

A React utility belt for function components and higher-order components.

1
2
3
4
const composedHoc = compose(hoc1, hoc2, hoc3)

// Same as
const composedHoc = BaseComponent => hoc1(hoc2(hoc3(BaseComponent)))

Ant Design

Ant Design is a React UI library that contains a set of high quality components and demos for building rich, interactive user interface

Final Thoughts

My post is just a simple note about React components, hopefully it can give to you guys a basic picture about React components. In the next posts, I’ll go detail to HOCs are Recompose and Ant-Design.

Refers