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.

	//Old way of using var
	var myAge = 27; //this can change
	var myGender = "Male"; //this cannot change
	//To express the above in the new way
	let myAge = 27; //I use let because my age will always change
	const myGender = "Male";
	/**
	* Below will give a Type Error:
	* because a predefined const should not change
	*/
	myGender = "Female"; //Error

view raw let_const.js hosted with ❤ by GitHub

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.

	//Person.js module/class
	const Person = {
	name: 'Abel'
	};
	export default Person

view raw export_person.js hosted with ❤ by GitHub

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

	//We can import the Person class like below:
	import Person from './Person';
	//We can even give it a different name like below
	import Pers from './Person';

view raw import__default_app.js hosted with ❤ by GitHub

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.

	//utility module/class
	export const baseData = 10;
	export const baseUrl = 'agoiabeladeyemi.com';

view raw export_utility.js hosted with ❤ by GitHub

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.

	//notice the {}
	import { baseData } from './Utility';
	import { baseUrl } from './Utility';
	//we can even use alias like below
	import { baseData as SomethingElse } from './Utility';

view raw import_non_default.js hosted with ❤ by GitHub

Functions

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

	function functionOne() {
	// Some code
	}
	var functionTwo = function() {
	// Some code
	};

view raw function_example.js hosted with ❤ by GitHub

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:

	const functionTwo = function() {
	// Some code
	};

view raw const_function.js hosted with ❤ by GitHub

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

	const functionTwo = () => {
	// Some code
	};

view raw arrow_function.js hosted with ❤ by GitHub

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

	//more than one parameter
	const functionTwo = (param1, param2) => {
	// Some code
	};
	//only one parameter
	const functionTwo = (param1) => {
	// Some code
	};
	/**
	* Only one parameter can also be represented
	* Like below
	*/
	const functionTwo = param1 => {
	// Some code
	};

view raw arrow_function_with_parameters.js hosted with ❤ by GitHub

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:

	const sum = (param1, param2) => {
	return param1 + param2
	}
	/**
	*We can easily just remove the {}
	*and rewrite as
	*/
	const sum = (param1, param2) => param1 + param2;

view raw function_arrow_return.js hosted with ❤ by GitHub

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

	const myComponent = () => (
	<div>
	Some Jsx return
	</div>
	);
	export default myComponent;

view raw function_stateless_component.js hosted with ❤ by GitHub

Classes

We can represent classes in javascript like below:

	class Person {
	//The constructor will be called first
	constructor () {
	this.name = 'Abel';
	}
	printMyName() {
	console.dir(this.name);
	}
	}
	//We can call the class like below::
	const person = new Person();
	person.printMyName(); //we return 'Abel'

view raw class.js hosted with ❤ by GitHub

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

	class Human {
	constructor () {
	this.gender = 'Male';
	}
	printGender() {
	console.dir(this.gender);
	}
	}
	//The extends keyword means
	//we are inheriting from the Human
	class Person extends Human {
	constructor () {
	//we have to call the super constructor
	super();
	this.name = 'Abel';
	}
	printMyName() {
	console.dir(this.name);
	}
	}
	//We can call the class like below::
	const person = new Person();
	person.printMyName(); //we return 'Abel';
	person.printGender(); //we console 'Male';

view raw extends_class.js hosted with ❤ by GitHub

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

	import React, { Component } from 'react';
	class App extends Component {
	render() {
	return (
	<div>
	Something is return sha
	</div>
	);
	}
	}
	export default App;

view raw function_stateful_component.js hosted with ❤ by GitHub

Introducing Component

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

	import React, { Component } from 'react';
	import './App.css';
	class App extends Component {
	render() {
	return (
	<div className={App}>
	<h1>Hi, I am a React App</h1>
	</div>
	);
	}
	}
	export default App;

view raw sample_stateful_component.js hosted with ❤ by GitHub

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.

	import React from 'react';
	import './App.css';
	const App = () => {
	return (
	<div className={App}>
	<h1>Hi, I am a React App</h1>
	</div>
	);
	}
	export default App;

view raw stateless_component.js hosted with ❤ by GitHub

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:

	import React, { Component } from 'react';
	import './App.css';
	class App extends Component {
	render() {
	React.createElement('div', {className= 'App'},
	React.createElement('h1', null, 'I am a React App')
	)
	}
	}
	export default App;

view raw jsx_sample.js hosted with ❤ by GitHub

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:

	import React, { Component } from 'react';
	import './App.css';
	class App extends Component {
	render() {
	return (
	<div className={App}>
	<h1>Hi, I am a React App</h1>
	</div>
	);
	}
	}
	export default App;

view raw sample_stateful_component.js hosted with ❤ by GitHub

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.