A quick guide to creating a React Component

Components are the life-blood of react. They are like JavaScript functions -- they accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.
There are two types of components ; functions and class components but in this article I'd be focusing on class components.
Creating a Class Component
When creating a React component, the component's name must start with an upper case letter. This is because React treats components starting with lowercase letters as DOM tags.

In the code below, we will call our class component "Todo". All of our code for the component will go between the curly braces ‘{}’.

import React, {Component} from 'react'; 
class Todo extends React.Component { 
render(){
return (
<h1> Welcome to my Todo App
</h1>
)
}

The same code written above can be written in another way using a method known as “destructuring.The destructuring assignment syntax was introduced to JavaScript in ES6, it is a simple way of extracting data stored in objects and arrays into variables. Using the destructuring method, we can re-write the code as:

import React, { Component } from 'react';
class Todo extends Component { 
render(){
return (
<h1> Welcome to my Todo App
</h1>
)
}

Now your React application has a component called Todo, which returns a <h1> element. To use this component in your application, use similar syntax as normal HTML: <Todo />.
It should be noted that if this is a component in a file of it’s own, it will have to be exported. To achieve this,we can simply put a line after the class that exports it. The example of this is shown below:

class Todo extends React.Component { *your code goes here* } 
export default Todo;

Since we have our component in a separate file, we will first need to import the component into the file where we want to use it. We can do it with this code:

import Todo from ‘./Todo’;

Rendering a component

React makes use of what's known as a Virtual DOM. Like actual DOM, the Virtual DOM is a node tree that lists elements and their attributes and content as objects and properties. React’s render() method creates a node tree from React components and updates this tree in response to mutations in the data model, caused by actions.

Let’s say there is a <div> somewhere in your HTML file:

<div id="root"></div>

We call this a “root” DOM node because everything inside it will be managed by React DOM. Applications built with just React usually have a single root DOM node.
To render a React element into a root DOM node, pass both to ReactDOM.render().
ReactDOM.render() takes in two parameters/arguments; what to render and where to render it. Code below:

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

Full code:

import React from 'react';
import ReactDOM from 'react-dom';
import Todo from './Todo'
ReactDOM.render(<Todo />, document.getElementById('root'));
import React, { Component } from 'react';
class Todo extends Component {
render(){
return (
<h1> Welcome to my Todo App
</h1>
)}}
export default Todo