DEV Community

Cover image for What you need to know before transitioning from JavaScript to React: A Guide
Kelvin.eth
Kelvin.eth

Posted on

What you need to know before transitioning from JavaScript to React: A Guide

Introduction

This article is intended for developers who have little or no knowledge about JavaScript but would like to transition into ReactJs. JavaScript is a widely-used programming language which plays an important role in modern web development. It is used for building functional and interactive user interfaces. ReactJs on the other hand is a popular JavaScript library for building web applications. In this article we’ll guide you through important JavaScript concepts to learn before taking ReactJs.

Article Objective

At the end of this article, the reader will learn about the important concept required for a solid background in JavaScript before transitioning into ReactJs. Also the reader would learn by seeing coding examples of some concept and get resources to further understand each concept listed below.

Variables and Data types

In JavaScript, variables are “named storage” for data. Variables can be used to store data such as strings, arrays and numbers e.t.c. Variables can be declared by using the “var” keyword, followed by the name of the variable and the assigned value which could be (strings, numbers or arrays).


var name = "David"; // strings
var radius = 2.77; // number
var user = {
name: "John Doe",
age: 30
} // object
var isDark = false; // boolean

Learn more about JavaScript variables click here

Data types in JavaScript describe the kind of data that can be stored in variables. It includes;

  • Strings
  • Numbers
  • Symbol
  • Boolean
  • Object
  • Null
  • Undefined
  • Bigint

You can learn more about them here

Operators and Expression

Operators are used to perform mathematical or logical operations between operands. Some common operators includes;

. Arithmetic operators

  • Addition (+)
  • Subtraction (-)
  • Multiplication (*)
  • Division (/)
  • Modulus (%)

. Logical operators

  • AND ( && )
  • OR ( || )
  • NOT ( ! )

. Comparison operators

  • Greater than (>)
  • Less than (<)
  • Equals to ( ==)
  • Not equals to ( !=)

Expressions are combinations of variables, values and operators that produce results. For example;

var x = 20;
var y = 15;
var score = x + y; // 35

Functions

Functions are reusable blocks of code that performs a specific task, and can be called anywhere in your program. This eliminates the need of rewriting the same code again. Functions takes input (arguments) and returns output (return values) and its declared using the “function” keyword. For example

function addNumbers(a, b) {
return a + b;
}

The above example creates a function “addNumbers” that takes two parameters ( “a” and “b” ) and returns their sum when called. Lets see a real example;

function addNumbers(a, b) {
return a + b;
}
addNumber(3,2); // output = 5;

The above example calls the functions with two parameters ( 3 , 2) and the returned value after execution is 5.

Learn more about functions here

Conditional Statement

A conditional statement allows you to execute code only if a certain condition is met. There are several types of conditional statements in JavaScript, the most common of which is the if-else statement. It allows you to execute code if a program is true and another block of code if the statement is false. For example;

var score = 20;
if (score >= 20) {
console.log("you passed")
}else{
console.log("try again")
}

The first condition ran successfully, because the score was equal to 20. Learn more about conditional statements here

Loops

Loops allows you to write a block of code over and over again or until a condition is met. The two most commonly used loops are “For” and “While” loops.

For loops creates a statement with 3 optional expressions;


for (expression 1; expression 2; expression 3) {
statement
}

  • Expression 1 is executed (one time) before the execution of the code block.
  • Expression 2 defines the condition for executing the code block.
  • Expression 3 is executed (every time) after the code block has been executed.

for ( i = 0; i < 10; i++){
console.log(i) // 0,1,2,3,4,5,6,7,8,9
}

While loop repeats a block of code as long as the condition is true. For example;

var i = 0;
while (i < 10) {
console.log(i);
i++;
} // 0,1,2,3,4,5,6,7,8,9

Learn more about loops here

Arrays and array methods

Arrays are ordered lists of values and each value is an element specified with an index.
Arrays are declared using the square bracket ‘ *[ ] *“ and its elements are separated by commas. For example;

const myArray = [“baby”, "two", 1, true];

The above example creates an array “myArray” which contains 2 strings ( “baby” and “two”), a number (1) and a boolean (true).

Array methods are built-in functions that allows you to manipulate the content of an array, it includes;

  • push(): Adds one or more elements to the end of the array.
  • pop(): Removes the last element from the array and returns it.
  • shift(): Removes the first element from the array and returns it.
  • unshift(): Adds one or more elements to the beginning of the array.
  • slice(): Returns a new array that contains a subset of the original array.
  • splice(): Removes or replaces elements in the array and returns the removed elements.

Learn more about Array and its methods here

Destructing

In ES6, we are able to extract data from arrays and objects into distinct variables using destructive assignment.
The process of destructuring an array involves creating variables to correspond to the elements of the array. For example

const myArray = [1, 2, 3, 4, 5];
const [a, b, c, d, e] = myArray;
console.log(a, b, c, d, e); // Output: 1 2 3 4 5

In the above example, the variables “a, b, c, d, e” are created and assigned to the variables in “myArray

You can learn more about Destructing in JavaScript here

Template literals

Template literals are ECMAScript 6 (ES6) features that allow you to embed expressions and variables in strings. Template literals are enclosed in backticks (`) and can include placeholders for expressions, using the dollar sign ( $ ) syntax. For example

const name = "David";
const greeting =
Hello, ${name}!;
console.log(greeting); // Output: Hello, David!

In the above example, the variable name is embedded inside the string using the ${} syntax, allowing you to create a dynamic string that incorporates the value of the name variable.

Learn more about Template literals here

Ternary operators

Ternary operator is a shorthand way of writing an if statement. It is a way of expressing if statement in a single line of code. The syntax is written below;

condition ? expression1 : expression2

Example of a ternary operator is found below;

var score = 25;
var result = score >= 20 ? "You passed : "Try again.";
console.log(result); // You passed.

In the above example, the ternary operator checks to see if the value of score is greater than or equals to 20. If true, the text “You passed” is assigned to the variable result. If not, the variable “Try again” is assigned to the variable result.

Learn more about Ternary operators here

Modules Import / Export

Import and Export are new features in JavaScript introduced to allow the reusability of codes. Its keywords “Import” and “Export” help to utilize the code of one file to another, divide the code into smaller, reusable parts and also makes it very easy to maintain.

Export: You can export values, functions, or objects from a module using the export statement. For example;

// module.js
export const myFunction = () => {
console.log("Hello, David");
};

import : you can also import values or functions from a module using the import statement. For example;

// main.js
import { myFunction } from "./module";
myFunction(); // Output: Hello, David!

In the above example, we exported the “myFunction” from the “module.js” file and imported it into the “main.js” file. This process can allow us use the “module.js” in multiple file by just exporting and importing it when needed.

You can learn more about Import and Export here

Conclusion

The above-mentioned topics are important and relevant topics in JavaScript every developer is expected to know before transitioning to ReactJS.

Top comments (1)

Collapse
 
vulcanwm profile image
Medea

this is a nice post for someone like me who has just started learning react!