Introduction to Components in React.js

React is a declarative, efficient, and flexible front-end JavaScript library for building user interfaces (UI). It was deployed first on Facebook’s newsfeed by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. Currently, React.js is used for the development and maintenance of Single Page Applications (SPA) and React Native is used for the development of mobile applications by applying the React Architecture to native Android, iOS and UWP applications.

What are React Components?

A component is an isolated piece of interface. This could be the menu bar for our website, the footer where we keep useful links and contact details, or a sidebar with the latest updates from a Twitter feed. Plain HTML tags are components on their own. Components are used to tell React what appears on the screen. When our data changes, React will efficiently update and re-render our components.

Fig 1. The component model represented in a classroom setting (source: https://medium.com/@worldclassdev/a-deep-dive-into-react-components-part-one-a-gentle-introduction-821fef560382)

ReactDOM.render()

ReactDOM.render() is the most common way to render JSX into the DOM and return a reference to the component. ReactDOM is the name of a JavaScript library. This library contains several React-specific methods. The ReactDOM.render() method creates a corresponding tree of DOM nodes. ReactDOM.render()’s first argument is a JSX expression. In this example, a JSX expression named helloGitSome is defined byReactDOM.render(helloGitSome). The second argument returns an Element object representing the element whose id property matches the specified string ReactDOM.render(helloGitSome, document.getElementById('app')). One special thing about the ReactDOM.render() method is that it only updates DOM elements if they are changed. If we duplicate the render, to render the exact same thing twice in a row, the second render will not do anything.

// This will add the return value of the helloGitSome method to the screen
ReactDOM.render(helloGitSome, document.getElementById('app'));

// This will not do anything at all
ReactDOM.render(helloGitSome, document.getElementById('app'));

Component Class

A component class is similar to a factory that manufactures components. In this metaphor, the component class factory can produce as many components as we would like it to produce.

import React from 'react';
import ReactDOM from 'react-dom';
class MyComponentClass extends
React.Component {
render() {
return <h1>Hello Git Some</h1>
}
}

Props

Props is a shorthand for properties. Starting from the top component, every child component gets its props from the parent. Everything flows downwards. Therefore, children cannot give props back to their parents. In a stateless component, props is all that gets passed in and they are available by adding props as an argument.

const GitSome = props => {
return (
<div>
<h1>{props.greeting}</h1>
</div>
)
}

Putting it all together: rendering this.props.name

this.props.name is located inside of a return statement. This means that the Blog component class will display the value of “name”, which is the “Git Some” string in this instance. Functions can also be passed as props, which is especially useful when dealing with event handlers.

Fig 2. <Blog /> instances will render the text “Hello, Git Some”

Useful Resources

A DEEP DIVE INTO REACT COMPONENTS PART ONE: A GENTLE INTRODUCTION

ReactDOM - React

Components and Props - React

A developer's introduction to React - JAXenter

React Components

React: How To Access Props In A Functional Component