What is react ?

React is an interactive UI library written in Javascript and open source under MIT License created by engineering team at Facebook. React can be used for website, server, native mobile apps and even 360 VR applications.

The core of react lies in Virtual DOM (Document Object Model) manipulation on client side. React has easy and smooth learning curve and mostly follows modern Javascript with minimal design pattern.

React follows following ECMAScript Standards :-

• ES6
• ES7
• ES8

To get started with React you should be well aware of modern JS feature which I will be discussing below : –

How to declare variable in React ?

1.  let : use to declare variables that can change values in block/method scope
2. const: constant values
3. var: global variables

const SOMEVALUE = 100; // this value can’t be changed once defined // but arrays and ojects  can be modified

var title = “Some Title”; // this variable can be changed from anywhere in code

let count=0; // this variable can be accessed    and changed in given block scope and nowhere else in code

Spread syntax/operator ( … ) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

function sum(x, y, z) {
return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(…numbers));
// expected output: 6

console.log(sum.apply(null, numbers));
// expected output: 6

In react we can use Spread operator for following

• Pushing values in array
• spread attributes/ props on component

The rest parameter syntax allows us to represent an indefinite number of arguments as an array.

function sum(…theArgs) {
return theArgs.reduce((previous, current) => {
return previous + current;
});
}

console.log(sum(1, 2, 3));
// expected output: 6

console.log(sum(1, 2, 3, 4));
// expected output: 10

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

var a, b, rest;
[a, b] = [10, 20];

console.log(a);
// expected output: 10

console.log(b);
// expected output: 20

[a, b, …rest] = [10, 20, 30, 40, 50];

console.log(rest);
// expected output: [30,40,50]

React Destructuring usage example

// Imagine we are on our component and we are

// receiving the props (in this.props): City, State and Country.
render() {
// Our props are:
// {city: ‘Jaipur’, state: ‘Rajasthan’, country:
‘India’ }
console.log(this.props);
const { city, state, country } = this.props;

// Now we can use the nodes as constants…
console.log(city, state, country);

return (

• City: {city}
• State: {state}
• Country: {country}

);
}

// Also the destructuring can be used on function parameters
const Place = ({ city, state, country }) => (

• City: {city}
• State: {state}
• Country: {country}

);

The Arrow functions / ( => ) operator are anonymous function used as a way to bind the this / context object in methods instead of binding it in the constructor.

prevItem = () => {
    console.log("Div is clicked")
}

render(){
    return (
         <SecondClass prevItem={this.prevItem} />
    )
}

Creating string using Template literals  allow you to write multi line strings enclosed in back ticks, eliminating the need to escape each line with a backslash or having to concatenate each line with +.

`All
 day
 breakfast`

Instead of

'All\
 day\
 breakfast'

// or

'All' +
'day' +
'breakfast'

and also allow embedding of placeholders in string using ${} expression

const uri = 'portfolio.php'

console.log(`http://unanimoustech.com/${uri}.`)

// http://unanimoustech.com/portfolio.php

Map / map() method is used to iterate over an array and is most commonly used to render multiple elements like list table or group of html element inside react component like

const friends = [
    {id:1, name: 'Dave',age:50},
    {id:2,name: 'Kellie',age:42},
    {id:3,name: 'Max',age:12},
    {id:2,name: 'Jack',age:12}
];

render(){
  return <ul>
    {friends.map(p => <li key={p.id}>{p.name}</li>)}
  </ul>;
}

Object.assign() method copies values of all enumerable own properties from one or more source objects to a target object. This method comes quite handy when using Redux framework to create immutable objects and return a new state to reducers.

const object1 = {
a: 1,
b: 2,
c: 3
};

const object2 = Object.assign({c: 4, d: 5}, object1);

console.log(object2.c, object2.d);
// expected output: 3 5

JacaScript classes are in fact “special functions”, and just as you can define function expressions and function declarations, the class syntax has two components: class expressions and class declarations.

React uses classes to create class Components:

import React, { Component } from ‘react’;

class HelloWorld extends Component {
render() {
return <h1>HelloWorld Component</h1>;
}
}

export default HelloWorld;

 

These were some basic  modern javascript concept that you must be aware and get used to in order to begun React Js development.

In next tutorial I will explain how to create different type component in React.