Create a simple component with React.js

react.js simple component

React.js is a JavaScript library for implementing user interfaces. In this short chapter we will learn the basics of creating a React.js component.

React.js basics

React.js is all about creating components that produces some html. All components are nested inside the container element.

Steps to create a component:

  • create a js file for a component
  • render the html inside of the component
  • insert component into DOM (Document Object Model)

Create a simple React component example

This is an example of a simple component that should render some stub html. It’s not going to work because its main goal is just to show the react basics.

import React from 'react';
import ReactDOM from 'react-dom';

// create  a component to produce html
const App = () => {
  return <div>Hello World!</div>;
}

// take component's html to the DOM
ReactDOM.render(<App/>, document.querySelector('.container'));

import statements injects the library’s functionality into the currentĀ component.

consta App is a component declaration that renders the html passed into the return statement.

ReactDOM.render – this line inserts the html into the DOM’s node. In our case we specified to insert the component into a html node with class ‘container’.

Leave a Reply

Be the First to Comment!