ReactJS #5: Write Simple React Component.

React Components are basic building blocks of any react apps and allow us to split our UI into a reusable piece of code which accepts data through properties and states and return HTML elements.

There are two ways we can define components in ReactJS.

  • The functions components using javascript
  • The class components using ES6 Classes

In this lab, we will covers :

  • How react components works.
  • How to write simple react component using Javascript functions
  • How to write simple react component using ES6 classes

So, let’s get started

Folder Structure:

First, we will create “components” folder inside “src” and then we will create one more folder named “lists” inside “components”.

c:/codebase/todo-app/
  
  node_modules/
  public/
  src/
  .../Components
  ............../lists

In the above code, we have created lists folder for “TodoLists” component. So, in the future, we will have a separate folder for each reacts component. This will help us to organize and make it easy to access all required stuff like unit test cases files, CSS, etc together for a particular component.

Function components

Function components are very easy to implement. Simply write a javascript function that returns the HTML elements.

Your first component

function TodoList() {
  return (
            <div className="todo-list">
                <h1>TodoLists</h1>
                <ul>
                    <li>Buy a big doll</li>
                    <li>Do yoga</li>
                    <li>Review component article</li>
                </ul>
            </div>
        );
}

function App() {
    return (
    <div>
      <TodoList/>
    </div>
  );
 }

ReactDOM.render(<App />, document.getElementById('root'));

Try it on CodePen

Passing properties to function component TodoList

let’s create an array of todos and pass it as props to TodoList component.

We can render one component into other components. Now , render <TodoList> function component into <App> component

function App() {
    return (
    <div>
      <TodoList data={todos}/>
    </div>
  );
 }

ReactDOM.render(<App />, document.getElementById('root'));

Try it on CodePen

Output :

Write a simple class component using ES6 classes

import React from "react";
import  "./TodoLists.css";
export default class TodoList extends React.Component {
    render() {
        return (
            <div className="todo-list">
              <h1>TodoList</h1>
              <ul>
                <li>Buy a big doll</li>
                <li>Do yoga</li>
                <li>Review component article</li>
              </ul>
            </div>
        );
    }
}

Try it on codepen