Introduction to react component | Create component with react

A react component is used for reuse the UI. we can use our  react component in another component. As we all know every page have some components, in react we can make individual components and assemble them to make any page.

components accepts the inputs called props. react component describing what should display in view.

First you have to setup a react app in your system, if you already setup then go to next step and if not then check introduction to react after that go to next step.

There are following steps to make and use the component in React js:

Step 1: Make a file "myComponent.jsx" (This file will contain the data of this component).

For making the component you need to add react module in this component.

Step 2: Paste the following code in the component file:

import React from 'react';
class MyComponent extends React.Component {
render() {
       return (
               <div>
                 This is the component
               </div>
           );
    }
}
export default MyComponent;
Save the file and your component is ready, this component will print the text "This is the component".
In the component, render function always return the UI of the component.
You can use this component, render this component on any page as well as another component.

Step 3: You can render this component using "react-dom" module. Make an index.js file and paste the following code:

import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './myComponent.jsx';

ReactDOM.render(<MyComponent />, document.getElementById('myPageId'));

Step 4: Now this component will render on that page where this div id "myPageId" will present in the HTML file.

Now run your app and see the magic!!!

if you have any query regarding this post please ask using the comment box.

How to install and start with React

Hope you found it helpful.

One thought to “Introduction to react component | Create component with react”

Leave a Reply

Your email address will not be published. Required fields are marked *