Golang React JS Technology Blog

React Components

React components are the fundamental unit of a client-side application written in React. React components are useful because they provide access to the React support for creating features by combining JavaScript, HTML, and other components. React components allow us to reuse the same structure and then we can populate those structures with different sets of data. We can define components using JavaScript functions or classes that receive properties as inputs and maintain their internal state. Components can be nested and can create other components as well. We can create two primary types of components Stateless and Stateful.

Create Simple Component

In this section, we will create a React component. For now, there is no need to use node.js or any anything else to get everything set up and running. Just type out the below code in index.html and run in the browser.

The HelloReact() would be consider as a component in React. This reusable component (or function) we use whenever we want to display a heading message. It is a good practice to capitalize component names in React to distinguish them from normal functions.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script src="https://fb.me/react-0.14.3.min.js"></script>
	<script src="https://fb.me/react-dom-0.14.3.min.js"></script>
</head>

<body>
	<div id="root"></div>
</body>

<script>
function HelloReact(message) {
	return	React.createElement(
				"H1",
				{id: "msg", className: "title"},
				message
			);
}

ReactDOM.render(
  HelloReact("Hello React Components"),
  document.getElementById('root')
);
</script>
</html>

The code above would result in H1 tag DOM element being added to the page.

Stateless React Components

Stateless components can illustrate using as JavaScript functions that return a single or multiple react elements. React elements can be defined using HTML in the JSX format or created using createElement() function. 

I have replaced the placeholder content of App.js file with below code snippet:

export default function App() {
    return "Hello React Components";
}

In this example of stateless component, a function simply returns text content that React will display to the user, this we called as rendering. The index.js have the code that renders the App component and displays the result to the user as shown below:

React Components with JSX

JSX is an extension for JavaScript that allows for writing what looks like HTML and XML in our JavaScript. JSX allows to mix HTML with JavaScript.

I have modified content of App.js file with below code snippet:

import React from "react";

export default function App() {
    return  <h1 className="title" id="msg">
                Hello React Components
            </h1>
}

We specify the JSX that will be inserted into the DOM as HTML when component's view is rendered. The return keyword used to render the result of component to the user as shown below:

When we create components using functions in React, it is possible to use arrow functions for a shorter syntax. Arrow functions in JavaScript do not keep track of the this keyword. When building simple components we do not need the this keyword. Hence arrow functions are an acceptable syntax for creating components when this is not in scope.

Created functional stateless component using Fat Arrow by updating App.js

import React from 'react';

const Programming = () => ( React.createElement(
			  	"section", {id: "coding"}, React.createElement("h1", null, "Programming Languages"),
					React.createElement("ul", {className: "coding"},
						React.createElement("li", null, "Java"),
						React.createElement("li", null, "Python"),
						React.createElement("li", null, "PHP"))
				)
			)

export default function App() {
    return  Programming()
}
Stateful React Components

Stateful components created using a class or by adding hooks to a functional component. They have their data that can be used to modify the content the component renders.

src\Message.js

import React, { Component } from 'react';

class Message extends Component {
	state = {
		name : "React Components"
	}

    render() {
        return (
            <h1> Hello {this.state.name} </h1>
        )
    }
}
 
export default Message;
We have extended class called Component. This is a class in the React core that offers base functionality for building components with classes. Next, we have set up our state object using the fields syntax. Here, state has one property, name. We also have a render() method, all class based components must have a render() method in React that returns a React element.
Most Helpful This Week
React JSX Create React App React Elements