Introducing ReactJs Terminologies With Next Generation Javascript

Let & Const

Use let for variable values, something you will assign and can always change at any point in time.

Use const if you want to create a constant value, something you will assign once and will never change.

Exports & Imports (Modules)

We can write our JavaScript files in “modules” and then reference them as dependencies in other scripts. This allow us to split our code into different concern based on functionalities. Each file can be called a module.

We need to use the export keyword if we are going to use a particular module within another module. The default keyword in the Person.js class below means that whenever we import Person from another class, the Person will just be the default export hence no need for {} in the import statement.

To use the above module within another module, we need to import it like below:

We can always export more than one module from a file, that was the reason why I didn’t use the default keyword, this will affect the way we will import the module and use within another class.

To use the above module within another modules, we need to import it like below and use the {} to the extract the particular export we need from the module since there is no default export.

Functions

There are two main ways to declare functions in javascript which are the function expression and the function declaration like below:

From the Let & Const lesson above, we can change the functionTwo variable declaration to const since I am sure my there will never be a reason for me to change the value of the function. Hence functionTwo can be declared like below:

Again, there is something called Arrow Function in javascript and the function above can be represented with arrow function like below:

If our function is going to receive parameters, we can represent it with the arrow function like below:

There are situations whereby all our function does is to return something without doing some computation or whatsoever. This can allow us use a shorter syntax like below:

An example of this within reactjs is with the use of a functional component to return just a JSX like below:

Classes

We can represent classes in javascript like below:

this.name is the class property and printMyName() is a class method. A class can also have inherit from another class like below:

An example of this within reactjs is with the use of a stateful component like below:

Introducing Component

A sample react component look similar to what we have below:

Remember, We imported React, {Component} and ‘./App.css’ because we need to use them inside the component, we also export the App because we are going to use it within another component. The App inherit from Component, this is common way of writing a stateful react component, unlike the functional component below. We won’t need to import {Component}.

A stateful component must have the render() method but a functional component does not have to.

A react component (stateful or functional) must always return an HTML like syntax to the dom called JSX.

That html been return within a react component is actually a JSX which is not just an HTML but an HTML with Javascript.

Introducing JSX

A sample JSX below:

The React.createElement() can take at least three parameters. The first been the parent element(i.e <div>), the second can represent an object which can contain styling(Note, we use classNameinstead of class within JSX). The third is the element or content that is going to be within the parent element. This can also be another React.createElement(). The above JSX will translate to:

<div class="App">
  <h1>I am a React App</h1>
</div>

Thanks to create-react-app. We can easily just write the above code like below

And It will be translated for us. That is the more reason why we have to import React from ‘react’, because there is going to be a translation to the previous way of writing it behind the scene.

Meanwhile, if we use create-react-app, The above will be translated for use hence we simple have to do below:

I feel Setting up webpack and scaffolding our own react setup is really something you should learn later after getting to understand reactjs better. Someone just getting into it should just use the create-react-app.

This is just my way of introducing ReactJs, thanks you for taking the time to read this article.