Habilelabs-Logo
Blog

3 Simple Steps to Create React JS Components

July 25th, 2017 . 5 minutes read
Blog featured image

Today in this article, We will discuss how to create react js components, but before we start to create components, let’s have an idea about what is components and why it is required.

The component is a small part of HTML tags. For example, input, label, select, etc.

It is required because we can use this component in many files and we don’t have to create HTML tags on every page.

Before creating a component it is required to know that how you can install react-js.

Step 1: Install React.Js

> Create a folder in any drive,
> Open Command prompt.
> Enter commands and run.
• Npm install -g create-react-app
• Create-react-app my-app
• Cd my-app
• Npm start
(Note: my-app is name of your application, your application run on the browser)

React JS Running Application


Your Application Running Like This.

After the learning how to install react.js, it is important that where we can create our component, so I am explaining the folder structure of react-js.

Step 2: Folder Structure

> Node_modules
> Public
• Favicon.ico
• Index.html
• Manifest.json
> Src
> Package.json

This is your folder structure. Your all packages are installed in node_modules which you installed by command prompt.
Exp: react.
In the src folder, you would include all your .js files.
The package.json file is your backup file of all your packages. When setting up your application on another system, it’s not necessary to run all commands again you just run a single command npm install then all packages are installed automatically.

Basic structure of your component

selectBoxesOption is the name of your component. Your component name must start with capital letter.

Import React, {Component} from ‘React’. It is necessary to import React in your component. So, you should add this line in your every component.

Render()this function return a HTML.

Export default SelectBoxesOption all components are displayed on index.html so it is compulsory to export your component.

Now we are ready to create our React JS components and how to use them in another file.

Step 3: Component Creation

How to create a new component and uses in another component:

Follow the following steps to create another component.
> Create a folder in src ‘components’.
> Create a file in component folder ‘labelComponent.js’
> Write your code in labelComponent.js

> Import this component in your another component by,

Now you can reuse this (‘LabelComponent’) component. In any other component.

How to pass property from one component to another:

> Set a property in child component.

> Get this property in your child component by,

How to pass an object from one component to another.

> Create an object in your parent component and pass in child component by,

> Get object in child component.

(NOTE: –In this code, we are using spread operator by this operator we can easily handle an object, if you already have props as an object then we are using spread operator.)

How to pass a function from parent component to child component using the object.

> Create a function and pass this in object like,

> Get object in child component.

Conclusion:

In this post, I guide you to create React JS components in your react application and I have introduced 4 types of components. So, you can create a new react application and use your custom components in this application or you can add components in your existing application with the help of this blog.

If you have any queries then ask your quires about react components in the comment section.

Hope you found it helpful, so don’t forget to share it with friends.

Also read-

Author: ashish
Share: