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 ‘{}’.

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:

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:

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:

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:

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:

Full code:

--

--

At LearnFactory we Train proficient software, Outsource them for development work around the world and build software solutions for clients.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Omoyemi Arigbanla

Tech enthusiast | Petroleum engineer and software developer | Philosopher | Traveler | Writer.