Understanding and using ReactJs component in real project – ReactJs tutorial [P2]

Welcome back to our ReactJs tutorial! In this second post, we will learn some basic concepts about ReactJs Component and how to use it in real project.

To start this tutorial, we will re-use the code we wrote in the previous one: https://github.com/cloudreports/tutorial-reactjs-basic/

First, clone and switch to branch ReactJsBasicSetup to check the source code. This source code only contain some basic setup that required to run our sample project. You can skip this step if you already have the Setup in your local machine.

About ReactJs Component

Now we will find out What is ReactJs Component?

To answer this question, we need some basic knowledge about JSX. JSX is a custom syntax and stand for Javascript XML. JSX was developed and maintained by Facebook dev team. You can learn more about JSX here: https://reactjs.org/docs/introducing-jsx.html

React Components are special blocks built with JSX, these blocks are used to build ReactJs application. One ReactJs app is buit based on many Components and one Component can also be built with many Components. You can imagine about React Component as a Html node.

Unlike Html node, React Component is built in special way that was introduced by Facebook dev team. We can create React Component by two methods:

Function component

Function component is just like a normal javascript function. This mean: To create ReactJs Function Component, we have to create a Javascript Function. This function must return React element with data type of: null, string or JSX expression. For example:

function MyReactFunctionComponent(props) {
  return <h1>Attribute value: {props.myAttribute}</h1>;
}

A Function Component accept one argument that store properties passed from outside

Class component

Class component is a javascript class with a must-have method called render , this render method work like Function component, it can have own logic and must return a React element. For example:

class MyReactClassComponent extends React.Component {
  render() {
    return <h1>Attribute value: {this.props.myAttribute}</h1>;
  }
}

As you can see in the above example, we are accessing myAttribute property through this.props. props is a special property of React Class Component. If you pass a props object into the constructor of the class, then it will be presented in this.props

Differences between Function Component and Class Component

Function Component is just like a normal Javascript function, it’s aimed to present /output UI element. One more important thing: Function Component is stateless, you can not achieve the benefits of state with Function Component

Class Component is in opposite to Function Component, it is Stateful and can handle any many logic/event within current Component. Class Component provide many convenient when working with React Component. You can register custom event handler, loading data or any thing you can imagine…

How do i decided when to use which one: Function or Class Component?

When you just need React elements and some simple logic without caring about state, then Function Component will fit your needs.

If your component is big or need be more powerful, then use Class Component. I will demo how to use each ones and some thing that each type of Component can do, so you can find out what to choose when writing React Component

The usage of Function Component and Class Component are the same:

// Function component
<MyReactFunctionComponent />
// or 
<MyReactFunctionComponent></MyReactFunctionComponent>
// Class component
<MyReactClassComponent />
// or
<MyReactClassComponent></MyReactClassComponent>

with props

<MyReactFunctionComponent myAttribute="one" />
<MyReactClassComponent myAttribute="two" />

You can pass as many attributes as you want

Composing React Components

React Component make you think it’s like a Html Element, you can combine components in the same way as you had combined Html element

<ParentComponent>
    <FirstChildComponent>
        First Child
    </FirstChildComponent>
    <SecondChildComponent>
        Second Child
    </SecondChildComponent>
</ParentComponent>

our child components output will be combined ad send back to ParentComponent via a special prop that named “children”, like this

class ParentComponent extends React.Component {
    render() {
        return(
            <div>
                <h1>Parent component with childs</h1>
                {this.props.children}
            </div>
        );
    }
}

as you can see, will have to manual output {this.props.children} in our ParentComponent, because it hold whole child content of ParentComponent

Splitting Components

When your Component grow big, you can consider to split it into multi smaller Components, then import it in the main Component, for example:

Fist Child Component: FirstChildComponent.jsx

import React from 'react';

export default class FirstChildComponent extends React.Component {
    render() {
        return <div>First child content</div>
    }
}

Second Child Component: SecondChildComponent.jsx

import React from 'react';

export default class SecondChildComponent extends React.Component {
    render() {
        return <div>Second child content</div>
    }
}

Main Component: ParentComponent.jsx

import React from 'react';

import FirstChildComponent from './FirstChildComponent'
import SecondChildComponent from './SecondChildComponent'

export default class ParentComponent extends React.Component {
    render() {
        return <div>
            <h1>Parent component</h1>
            <FirstChildComponent />
            <SecondChildComponent />
        </div>
    }
}

Thank you for reading my post, if you have any question, please let me know!