Skip to main content

Three steps How to Create React Component

Creating a React Component is simple as 123 understanding what is needed to create a react component is essential in App creation. On this post I am going to show you three steps to follow in creating react Component whether class based or functional based.

Why am i writing about this  as you already know i have been learning react and the journey has been very interesting with ups and down. My aim is to get you started without having going through a steep learning curve which i went through so that things can be simpler to you as you are going through this journey.

For that being said lets roll our shrive and get down into business.

React Component can be in two form one is class based and the other functional based all these two kind of Components can fall int stateful or stateless but lets leave this for future post and lets get down on component creation.

Step.1
import React from 'react';

while we are creating JavaScript functionality react adds some feature which are not JavaScript way of codding if we run the code without importing React we will get error to solve this issue our file need some help from React module that is why we have to import some of functionality.

Step.2
function MyApp(){} or class MyApp extends React.Component{}

Here we are going to create a class based Component or functional based component  both of these components works the same but have some differences in data handling.Class based Component store data and maintain its state while functional component receives data and do nothing about it but display it.Class based component can be stateless if no state provided. I will elaborate this in deeper look on another post.

import React, { Component } from 'react'; class Button extends Component { render() { } } export default Button;

Step.3
After you have created your component its time to send it to the main component to render it to the Dom your job is to make it available to be rendered  with export default

export default Button;

 I be-leave that there are many main points that where not addressed here. But i hope you got some sense out of this post please leave a comment to help your boy do better.


Popular posts from this blog

Rendering elements in React

  Rendering elements in React is the process of defining what you want to see on the screen and then instructing React to display it. React provides a simple and efficient way to render elements, which are the building blocks of React applications. Here's a basic introduction to rendering elements in React: Elements : In React, an element is a plain JavaScript object that represents a single piece of the UI. It describes what you want to see on the screen. Elements can be as simple as a single HTML tag or as complex as an entire tree of components. ReactDOM.render() : To render elements onto the screen, you use the ReactDOM.render() method provided by React. This method takes two arguments: the element you want to render and the DOM element where you want to render it. Virtual DOM : React uses a virtual DOM (Document Object Model) to efficiently update the UI. When you render elements with React, it doesn't immediately update the browser's DOM. Instead, it first creates a ...
Read more

Welcome to React Train where a driver is also a passenger

In less than a month ago approximately 4/1/2019  i started learning react after spending almost one year trying figure out JavaScript the the hard part. Now that am working with react most of the posts following this article will be based on react js and the experience i have gained. why Reactjs As most developers number one thing comes to there mind when trying to learn new technology is money. I think money was my number one thought, lets be honest here why learn what can never put food on the table?.That brings us to the next level ,how long will it take you to achieve your goal because if it takes you four years to learn a skill that pays good  why cant you go for it and in four years will that skill be in demand?. Learning react is fun and the demand in the market looks like is not dropping any soon. That's why am one of the developer here learning too. 
Read more