React JS Component Tutorial – Complete guide for beginners

In this tutorial we will learn to recognize and create components in React JS, as we know React JS is a library of javascript that is very popular today where its use is to build the UI (User Interface) of a website or web application and in React JS can not be separated from the name component, this component is reusable, which means that each component can be reused, even many times each component is needed. There are lots of React JS components on the internet that are ready to use and will make it easier for us to create a web application.

Table of contents :

1. React JS Component Definition
2. How React JS Components Work
3. Various React JS Components
4. How to write Component React JS
5. How to Use React JS Components
6. Closing

1. REACT JS COMPONENT DEFINITION

Components are the most important part of the code for React JS applications, because React JS applications are made up of various components which will later be rendered and produce HTML. Each Component in React JS has its own function and role in shaping the UI (User Interface) of a website.

2. HOW REACT JS COMPONENT WORK

In my opinion, there is a close relationship between components and data. The way React JS works is very simple, when data changes, the UI (user interface) also changes automatically, but if the UI (user Interface) changes the data automatically changes? The answer is No. This way of working is called One-Way Data Flow.

React JS uses Virtual DOM, in this Virtual DOM the component will tell React JS which parts to render which will then generate HTML so that it produces a UI (user Interface) to the user.

3. VARIOUS REACT JS COMPONENT

There are 3 types of components in the React JS framework, that is :

1. Stateful Component

The first is Stateful Component. The Statefull Component has all the features and lifecycle of ReactJs. In this Statefull Component we can perform various state changes, logical operations, and fetch data from the server of course, for lifecycles such as static getDerivedStateFromProps(), componentDidMount(), componentDidUpdate(), shouldComponentUpdate() we can use in this Statefull Component.

Example

class Main extends Component {
 constructor() {
   super()
   this.state = {
     kursi: []
   }
 }
 render() {
   return <BooksList books={this.state.kursi} />;
 }
}

2. Pure component

Based on the concept of purity in the functional programming paradigm, a function is said to be pure if:

The return value is determined only by the input value
The return value is always the same for the same input value

A React component is considered pure if it produces the same output for the same state and props. For class components like this, React provides the base class Pure Component. Class components that extend the React.PureComponent class are treated as Pure Components.

Pure components have some performance improvements and rendering optimizations because React implements the shouldComponentUpdate() method for them with shallow comparisons for props and state.

Example

import React from 'react';

class PercentageStat extends React.PureComponent {

  render() {
    const { label, score = 0, total = Math.max(1, score) } = this.props;

    return (
      <div>
        <h6>{ label }</h6>
        <span>{ Math.round(score / total * 100) }%</span>
      </div>
    )
  }

}

export default PercentageStat;

3. Stateless Component

Stateless Component or Component without state is the 3rd type of component. This component only accepts props and context in React. This component also doesn’t carry the react lifecycle in it. So the component model is very suitable for solving problems such as making Badges, Tickers, Labels, etc.

Example

import React from 'react';

const BadgePreOrder = (props) => {
  return (
    <div>Pre Order {props.num} hari</div>
  );
}

export default BadgePreOrder;

4. HOW TO WRITE COMPONENT REACT JS

There are 3 ways to write components, that is : function component method, class component method and arrow component method

Example of Writing With Function Component

function navbar() {
returns (
<div>
<h1>NAVbAR Functions</h1>
</div>
)
}

Example of Writing With Class Component

class navbar extends Component {
render() {
returns (
<div>
<h1>NAVbAR Class</h1>
</div>
)
}
}

Example of Writing With Arrow Component

const navbar = () => {
returns (
<div>
<h1>Arrow Component</h1>
</div>
)
}

5. HOW TO USE COMPONENT REACT JS

Below is an example of using component

Above we have created 2 components, namely:

Function components
================
function App() {
returns (
<div classname=”App”>
<navbar />
</div>
);
}

Arrow components
==============
const navbar = () => {
returns (
<div>
<h1>Arrow Component</h1>
</div>
)
}
To be able to use these two components, we have to export like the bottom of the component above : “export default App;”

after we export and then we import where this component will be used, here I will give an example this component will be used in index.js with the command “import App from ‘./App’;” like the picture below

If you run it, it will look like the image below:

6. CLOSING

That’s the tutorial for making components in react js, hopefully it can be useful, thank you