No Result
View All Result
CloudReports
  • Home
  • Linux
  • Web development
  • Javascript
  • SQL
  • Ant Design tutorial
  • QR Code Scanner
  • Home
  • Linux
  • Web development
  • Javascript
  • SQL
  • Ant Design tutorial
  • QR Code Scanner
No Result
View All Result
CloudReports
No Result
View All Result
Home Web development

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

npn by npn
August 23, 2019
in Web development, React
Reading Time: 5 mins read
0
0
SHARES
186
VIEWS
Share on FacebookShare on Twitter

Contents

    • 0.1 READ ALSO
    • 0.2 What is the location of the MySQL databases?
    • 0.3 Top 10 Best WordPress SEO themes of 2022
  • 1 About ReactJs Component
    • 1.1 Function component
    • 1.2 Class component
    • 1.3 Differences between Function Component and Class Component
    • 1.4 How do i decided when to use which one: Function or Class Component?
    • 1.5 Composing React Components
    • 1.6 Splitting Components
Rate this post

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.

READ ALSO

What is the location of the MySQL databases?

What is the location of the MySQL databases?

April 24, 2022
158
Top 10 Best WordPress SEO themes of 2022

Top 10 Best WordPress SEO themes of 2022

March 16, 2022
211

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

ADVERTISEMENT
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!

Tags: ReactJs Beginer tutorialReactJs ComponentReactJs tutorial
ShareTweetShare
Previous Post

ReactJs Setup tutorial for Beginner – ReactJs tutorial [P1]

Next Post

6 useful tips for JavaScript Developers

npn

npn

Related Posts

What is the location of the MySQL databases?
Linux

What is the location of the MySQL databases?

April 24, 2022
158
Top 10 Best WordPress SEO themes of 2022
Web development

Top 10 Best WordPress SEO themes of 2022

March 16, 2022
211
Gmail – Gmail Sign Up – Gmail Login
Web development

Gmail – Gmail Sign Up – Gmail Login

August 30, 2021
6.5k
Configuring VS Code for Node/JavaScript Development
Javascript

Configuring VS Code for Node/JavaScript Development

August 2, 2021
809
How does Nodejs solve the problem of high concurrency?
Javascript

How does Nodejs solve the problem of high concurrency?

July 18, 2021
888
How to create a self-signed SSL certificate for Apache on Ubuntu 16.04
Linux

How to create a self-signed SSL certificate for Apache on Ubuntu 16.04

July 18, 2021
682
Next Post
6 useful tips for JavaScript Developers

6 useful tips for JavaScript Developers

Discussion about this post

No Result
View All Result

Categories

  • Android (1)
  • Ant Design tutorial (7)
  • App/Game (2)
  • Javascript (16)
  • Layout and Routing (2)
  • Linux (9)
  • PC & LAPTOP (6)
  • PERSONAL FINANCES (1)
  • React (13)
  • SQL (2)
  • TECHNOLOGY & DIGITAL (7)
  • The Basics (5)
  • Web development (37)

Search

No Result
View All Result

Categories

  • Android (1)
  • Ant Design tutorial (7)
  • App/Game (2)
  • Javascript (16)
  • Layout and Routing (2)
  • Linux (9)
  • PC & LAPTOP (6)
  • PERSONAL FINANCES (1)
  • React (13)
  • SQL (2)
  • TECHNOLOGY & DIGITAL (7)
  • The Basics (5)
  • Web development (37)
No Result
View All Result
  • Home
  • Linux
  • Web development
  • Javascript
  • SQL
  • Ant Design tutorial
  • QR Code Scanner