React-A java script library for building user interfaces

Hello there learners,
React, as we all know a trendy java script library which helps us creating an application by re-using the code written. A module and simple approach which definitely reduces the complexity in creating the java script applications.

Lets start a quick tour for the same… Learning should never stop and so am i not stopping to learn this new trending technology REACT. This is my very initial stage with react and want to explore more! And i found it very useful and thought of sharing and writing it to the community.

So the basic conceptual learning which i have gained till now is as below and will keep on sharing with you all in future…

Basic Introduction

Why React?

Alternatives

Some of the very common alternatives for react comes to be the following, but the react seems to be unbeatable for the future we see.

Note: If we consider java script in this list, we could say that we can do the same task with java script too but react being a library of java script only helps to perform this in a better way.

JAVA Script refresher

Before diving into react we must be knowing some very basic concepts of java script. One may or may not have the full fledged knowledge of java script but to start with react we must have some working and conceptual knowledge for the same.

Some of the core features of JAVA Script are as below:

Let and Const

Different ways of creating variables…. We use it on the place of var, but it is recommended to use let at the place of var for creating variables; and const for creating a constant

Functions & Arrow Functions

The Arrow functions just have a bit of shorter syntax than functions.

Function:

func printMyName(name){

console.log(name)

}

Arrow function:

const printMyName = (name) => {

console.log(name)

}

// So if we call the function like below

printMyName(name)

We’ll be getting same output from both of these types.

If you have only a single statement in the function, you can use the arrow functions as below:

const multiplyBy2 = (number) => number*2

This above statement is a complete arrow function… And this is very short version of writing a function….

Import and Export

We have default exports and we need to move with the imports very carefully if we don’t have default exports from the files

You can move for as keyword to import it with some other naming conventions. OR you can import everything as a bundle.

You choose the name as per your needs.

Classes and Objects

As we say, classes are essentially blueprints for objects (java script objects indeed)….

A class can have both properties and methods, methods are the simple function attached to classes and properties are different variables attached to classes.

Classes as in other programming languages, do also possess the feature of inheritance here too and works with the keyword extends.

You need to call a super() function to initialize the parent class and its constructor.

Example:

class Human{

constructor(){

this.gender = ‘female’

}

printGender(){

console.log(this.gender);

}

}

class person extends human{

constructor(){

super();

this.gender = ‘male’;

this.name = ‘kk’;

}

printMyName(){

console.log(this.name);

}

}

const me =new person();

me.printMyname();

me.printGender();

So, with the above example you must understand that the classes are just the blueprints and the inheritance works with prototype things.

This was the basic java Script code.. But what the next generation JAVA Script code but what we use now a days is the next generation java script code, have a look at it below:

Example:

class Human{

gender = ‘female’

printGender(){

console.log(this.gender);

}

}

class person extends human{

gender = ‘male’

name = ‘kk’;

printMyName(){

console.log(this.name);

}

}

const me =new person();

me.printMyname();

me.printGender();

The code above is the next generation java script code and we actually use the above for the implementations; This is in accordance with ES6/Babel.

Note: ES6 is the standard governing JavaScript whereas JavaScript is the programming language. ES6 is next gen JavaScript syntax and nothing else.

And Babel is a compiler that will convert your development code (written in ES6 with all of its goodies) to code that you will run on your production site, often bundled and minified with Web-pack as well.

Spread and Rest operators

You must be wondering what are those operators… Let me take you through his complete area of operators.

This is a spread operator, now you’ll be thinking how will this operator be used. Consider the following example for the same.

Example:

const oldArray = [1,2,3,4,5];

const newArray = […oldArray,6,7]

This is the spread operator, if we will print the values of the newArray, I will be — 1,2,3,4,5,6,7.

The rest and spread functions don’t have a huge differnce. You can work with the rest operator using the spread operator only. We use a Rest operator in a function, pass some of the arguments in a function, say as per in the example below:

Example:

const filter = (…args) => {

return args.filter(el => el === 1);

}

console.log(filter(1,2,3,4));

So, the above performs a rest operator working. This gives us an output of :

[1]

So this is how a rest operator works…

De-Structuring

This is something which helps to differentiate between the parts and different elements of an array or object like things. Say if you assign some values to any of the array and give a particular name to it, and you access those elements independently is called de-structuring.

Example:

const numbers = [1,2,3,4];

[num1, num2, num3] = numbers;

Console.log(num1, num2, num3, num 4);

This will give you the following output:

1,2,3,<undefined>

However if we have the following piece of code then we’ll get different output.

const numbers = [1,2,3,4];

[num1, num2, ,num3] = numbers;

Console.log(num1, num2, num 4);

Output -> 1,2,4

So, these were some of the basic concepts of java script, which one must know before kick starting the react.

This was some of the learning i did till today, and found it interesting… so I thought of sharing this to community.

Will soon get back with some new stuff

Keep Learning!