Creating React Components | Chinese Rule of Eight

https://www.kirupa.com/react/components.htm

Concept

This is terrible coding because you are doing a lot of repetitive coding.

var speed = 10;

var time = 5;

alert(speed * time);

var speed1 = 85;

var time1 = 1.5;

alert(speed1 * time1);

var speed2 = 12;

var time2 = 9;

alert(speed2 * time2);

var speed3 = 42;

var time3 = 21;

alert(speed3 * time3);

thus, functions were created:

function getDistance(speed, time) {

var result = speed * time;

alert(result);

}

…and therefore, we can easily call the functions and provide parameters:

getDistance(10, 5);

getDistance(85, 1.5);

getDistance(12, 9);

getDistance(42, 21);

How it Works in React

Now, in React, say we want to render a bunch of h1. We have a index.html template with a given div for us to inject html content into like so:

<!DOCTYPE html>

<head>

<!--

manifest.json provides metadata used when your web app is added to the

homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/

-->

<title>React App</title>

</head>

<body>

You need to enable JavaScript to run this app.

</noscript>

</body>

</html>

Then, in index.js we use React’s API to render some custom html:

ReactDOM.render(

<div>

<h1>Batman</h1>

<h1>Nicolas Cage</h1>

</div>,

destination

);

this repetitive usage of the h1s is the equivalent of writing the same code over and over again. Because what if we want to change them to h3. Or add bold to it. Its tiring to change it for everyone one of them. Conceptually, we want to do something similar to as how functions have solved repetitive code.

React Components

React components are reusable chunks of JavaScript that output (via JSX) HTML elements

This is where we use JSX to generate and render html to throw into a specific div. In our case, it would be the id=root div.

You create a class that extends the features of component. We do so like this:

class HelloWorld extends React.Component {

}

This HelloWorld component is a component because it extends React.Component. If it didn’t do that, it would just be an empty class that doesn’t do much.

Inside our class, you can put all sorts of methods to further define what HelloWorld does.
However, there is mandatory function called Render which you must implement.

class HelloWorld extends React.Component {

render() {

return <p>Hello, componentized world!</p>

}

ReactDOM.render(

<HelloWorld/>,

document.querySelector("#container")

);

What we’ve done so far might seem crazy, but simply think of your component as a cool and new HTML tag whose functionality you fully have control over. This means you can do all sorts of HTML-ey things to it.

Properties

Our Hello component isn’t very useful because it only says Hello to one thing. It cannot say hello to other people/things. Say we want to have the Hello be applied to different names.

Just like with functions, you can pass in arguments that alter what your component does. There is a slight terminology update you need to be on top of. What we call arguments in the function world are going to be known as properties in the component world. Let’s see these properties in action!

Right now, our HelloWorld component is hard-coded to always send out Hello, world! as part of its return value. The first thing we are going to do is change that behavior by having return print out the value passed in by a property.

We are going to modify our HelloWorld component to allow you to specify who or what you greet besides the generic World.

Adding and accessing the property

We add the property by simply accessing it. If it doesn’t exist, it will be automatically added to the class. If it exists, it will access it.

The way you access a property is by referencing it via the this.props property that every component has access to. Notice how we specify this property. We place it inside curly brackets – { and }.

class HelloWorld extends React.Component {

render() {

return <p>Hello, {this.props.greetings} !! </p>

}

In JSX, if you want something to get evaluated as an expression, you need to wrap that something inside curly brackets. If you don’t do that, you’ll see the raw text this.props.greetings printed out.

Making the component call

ReactDOM.render(

</div>,

document.getElementById('root'));

registerServiceWorker();

Further example

Let’s make another component where we take an array, loop over it, and display the data. Define the component.
We add the nameArray property. Then we use the map function to look over each element in nameArray. We use parameter name and index to display the array data.

class ListWorld extends React.Component {

render() {

return (<ul>

{this.props.nameArray.map(function(name, index){

return <li key={index}>{index}, {name}</li>

})}

</ul>)

}

and we call the component like so:

1	<ListWorld nameArray= {["Ricky", "Vera", "John"]} />

output at localhost:3000:

Hello, Batman !!

0, Ricky
1, Vera
2, John
Hello, Superman !!

Source Code

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import registerServiceWorker from './registerServiceWorker';

class HelloWorld extends React.Component {

render() {

return <p>Hello, {this.props.greetings} !! </p>

}

class ListWorld extends React.Component {

render() {

return (<ul>

{this.props.nameArray.map(function(name, index){

return <li key={index}>{index}, {name}</li>

})}

</ul>)

}

<pre>

ReactDOM.render(

</div>,

document.getElementById('root'));

registerServiceWorker();