U a

3 SIMPLE STEPS TO CREATE REACT JS

COMPONENTS
by Ashu | Jul 25, 2017 | Web Development | 0 comments

Today in this article, I will discuss how to create react js components, but before we start
to create components, lets 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 after creating component we can use this component in many les.
we dont need 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 browser)

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 for Exp: react.
In the src folder, you would include all your .js le.
The package.json le is your backup le of all your packages. When setup your application
on another system its 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

1 import React, { Component } from 'react';

 2 class SelectBoxesOption extends Component {
3 render() {
4 return (
5 <div className="App">
6 <p>This is the parent component</p>
7 </div>
8 );
9 }
10 }
11 export default SelectBoxesOption;

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 component 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 in another le.

Step 3: Component Creation

How to create a new component and uses in another
component:
Follow the following steps to create your another component.
> Create a folder in src components.
> Create a le in component folder labelComponent.js
> Write your code in labelComponent.js

1 import React, { Component } from 'react';

2 class LabelComponent extends Component{
3 render() {
4 return (
5 <div className=demo>
6 <label className="label">Hello App</label>
7 </div>
8 )
9 }
10 }
11 export default LabelComponent;

> Import this component in your another component by,

1 import React, { Component } from 'react';

2 import LabelComponent from './components/LabelComponent';
3 class SelectBoxesOption extends Component {
4 render() {
 5 return (
6 <div className="App">
7 <p>This is the parent component</p>
8 <LabelComponent />
9 </div>
10 );
11 }
12 }
13 export default SelectBoxesOption;

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.

1 import React, { Component } from 'react';

2 import LabelComponent from './components/LabelComponent';
3 class SelectBoxesOption extends Component {
4 constructor(props){
5 super(props);
6 }
7 render() {
8 return (
9 <div className="App">
10 <p>This is the parent component</p>
11 Hello <LabelComponent companyName={Habilelabs}/>
12 </div>
13 );
14 }
15 }
16 export default SelectBoxesOption;

> Get this property in your child component by,

1 import React, { Component } from 'react';

2 class LabelComponent extends Component{
3 constructor(props){
4 super(props);
5 }
6 render() {
7 return (
8 <div className=demo>
9 <label className="label">{this.props. companyName }</label>
10 </div>
11 )
12 }
13 }
14 export default LabelComponent;

How to pass an object from one component to another.

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

1 import React, { Component } from 'react';

2 import LabelComponent from './components/LabelComponent';
 3 class SelectBoxesOption extends Component {
4 constructor(props){
5 super(props);
6 }
7 render() {
8 const companyDetail = {
9 name: habilelabs,
10 address: jaipur
11 }
12 return (
13 <div className="App">
14 <p>This is the parent component</p>
15 Hello <LabelComponent {...copanyDetail}/>
16 </div>
17 );
18 }
19 }
20 export default SelectBoxesOption;

> Get object in child component.

1 import React, { Component } from 'react';

2 class LabelComponent extends Component{
3 constructor(props){
4 super(props);
5 }
6 render() {
7 const {
8 name,
9 address
10 } = this.props;
11 return (
12 <div className=demo>
13 <label className="label">{name} In {address}</label>
14 </div>
15 )
16 }
17 }
18 export default LabelComponent;

(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 object.
> Create a function and pass this in object like,

1 import React, { Component } from 'react';

2 import LabelComponent from './components/LabelComponent';
3 class SelectBoxesOption extends Component {
4 constructor(props){
5 super(props);
6 }
7 render() {
8 const companyDetail = {
9 name: habilelabs,
10 address: jaipur,
 11 handleclick: this.welcome,
12

Contact Us
13 }
14 welcome(){
15 alert(Hello this is parent component);
16 }
17
18 return (
19 <div className="App">
20 <p>This is the parent component</p>
21 Hello <LabelComponent {...copanyDetail}/>
22 </div>
23 );
24 }
25 }
26 export default SelectBoxesOption;

> Get object in child component.

1 import React, { Component } from 'react';

2 class LabelComponent extends Component{
3 constructor(props){
4 super(props);
5 }
6 render() {
7 const {
8 name,
9 address,
10 handleclick
11 } = this.props;
12 return (
13 <div className=demo>
14 <label className="label">{name} In {address}</label>
15 <button onClick={handleclick}>Show</button> We're Online!
16
17
</div>
)
How may I help you today?
18 }
19 }
20 export default LabelComponent;

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 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.

Learn how to install React Js : Automatic and Manual Installation

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

Hope you found it helpful, so dont forget to share with friends.

Share on Facebook Share on Twitter Share on Google+

Recent Posts

3 Simple Steps to Create React JS Components

Know 4 Types of Mistakes a Node JS Developer Makes

4 Basic Rest API Design Guidelines You should know

A Complete HTML and CSS Guidelines for Beginners

Steps to Create a Basic Application in Angular 2

What is Mini cation and Its Bene ts

Categories

Mobile development

Our Partners

Tech stack Migration

Web Development

Technologies

Node Js

Angular Js

Android

Ionic

MongoDB

Salesforce