Introducing ReactJs Terminologies With Next Generation Javascript
Tags: react, javascript, beginners
Published: 2018-04-15 07:48:45

---
title: Introducing ReactJs Terminologies With Next Generation Javascript
published: true
description: Reactjs, Javascript
tags: reactjs, javascript, react, beginners
---

### Let &&nbsp;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.

{% gist https://gist.github.com/agoiabel/a8d2f5167fd9b945a100bff8f53531c1 %}


### 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.

{% gist https://gist.github.com/agoiabel/512cf7359c2fc8dcd083c348e0491bb9 %}

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

{% gist https://gist.github.com/agoiabel/262a3c90fa844f3b338c354e2df29629 %}


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.

{% gist https://gist.github.com/agoiabel/8da76da6373ca46ab6cba22dd9877dbf %}


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.

{% gist https://gist.github.com/agoiabel/e68a38fb2379dc1099daed1a59102069 %}

### Functions

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

{% gist https://gist.github.com/agoiabel/cc0160f7ade16098d2f41ed47479c6f2 %}

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:

{% gist https://gist.github.com/agoiabel/a18678355bdd472503b309b03d8139ee %}

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

{% gist https://gist.github.com/agoiabel/9a05bbeac46d1fe6e7cf26c36f7a3504 %}

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

{% gist https://gist.github.com/agoiabel/089ddd50ddde624b5a41a991a38e1f87 %}

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:

{% gist https://gist.github.com/agoiabel/37d57436d6bc59e873cdebdbfcdf042d %}

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

{% gist https://gist.github.com/agoiabel/082d28e8b96e4f97d006ad5c206dc0f8 %}

### Classes

We can represent classes in javascript like below:

{% gist https://gist.github.com/agoiabel/3bedb50de7663bd27595a2989ac5030b %}

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

{% gist https://gist.github.com/agoiabel/0a09fe1c2c04a34ed231feb9c32d92bd %}

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

{% gist https://gist.github.com/agoiabel/c6798c404ca8b1952c3c0fc351cfe940 %}

### Introducing Component

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

{% gist https://gist.github.com/agoiabel/eae9f1cfd2a29ad050822b18f8e92bd2 %}

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&nbsp;to.

{% gist https://gist.github.com/agoiabel/ede1ab5373c31cffe556fbf996af7218 %}

> A react component (stateful or functional) must always return an HTML like syntax to the dom called&nbsp;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:

{% gist https://gist.github.com/agoiabel/4a05cbbe3e6c2c92df7edc5de5fe43a5 %}

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 `className `instead 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](https://www.npmjs.com/package/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:

{% gist https://gist.github.com/agoiabel/eae9f1cfd2a29ad050822b18f8e92bd2 %} 

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](https://www.npmjs.com/package/create-react-app).

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