Substring contains condition using ReactJS

if (weather.includes("Haze")){
vWeather = "Haze";
} else if (weather.includes("Clouds")){
vWeather = "Clouds";
}

Render Parent and Child Element using For Loop

export default class myHTMLTable extends React.Component {

  createTable = () => {
    let table = []

    // Outer loop to create parent
    for (let i = 0; i < 3; i++) {
      let children = []
      //Inner loop to create children
      for (let j = 0; j < 5; j++) {
        children.push(<td>{`Column ${j + 1}`}</td>)
      }
      //Create the parent and add the children
      table.push(<tr>{children}</tr>)
    }
    return table
  }


  render() {
    return(
      <table>
        {this.createTable()}
      </table>
    )
  }

}

How to comment in React JSX

We cannot use HTML comments inside of JSX because it thinks they are real DOM Nodes:

render() {
  return (
    <div>
      <!-- This doesn't work! -->
    </div>
  )
}

We can use regular /* Block Comments */, but this need to be wrapped in curly braces:

{/* A JSX comment */}

JSX and Coding Style

What is JSX?

• JSX stands for JavaScript XML. 
• JSX allows us to write HTML in React.
• JSX makes it easier to write and add HTML in React.

Coding using JSX:

JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement()  and/or appendChild() methods.
JSX converts HTML tags into react elements.

Example:

const helloWorld = <h1>Hello World using JSX!</h1>;

ReactDOM.render(helloWorld, document.getElementById('divID'));

Expressions using JSX:

With JSX you can write expressions inside curly braces { }.

Example:

const helloWorld = <h1>Hello World {10+25} using JSX!</h1>;

ReactDOM.render(helloWorld, document.getElementById('divID'));

Inserting a Large Block of HTML:

Wrap two headers inside one DIV element:

const myelement = (
  <div>
    <h1>Hello World ReactJS!</h1>
    <h1>using JSX</h1>
  </div>

);

Variables in ReactJS

var:

If we use var outside of a function, it belongs to the global scope.
If we use var inside of a function, it belongs to that function.

Example:

var iData = "This is Global Data";

function myFunction() {
var iFuncData = "This data scope within function i.e, myFunction";
}

console.log(iData);
//Output: This is Global Data

console.log(iFuncData);
//Output: 'iFuncData' is undefined

let:

let is the block scoped version of var, and is limited to the block (or expression) where it is defined.
If we use let inside of a block, i.e. a for loop, the variable is only available inside of that loop.

Example:

let iData = 2.5;

const:

const is a variable that once it has been created, its value can never change.

Example:

const iData = 2.5;

[SOLVED] - Couldnt find preset es2015 relative to directory

While starting React App using "npm start" got error message like below

ERROR in ./main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Couldn't find preset "es2015" relative to directory
    at \node_modules\babel-core\lib\transformation\file\options\option-manager.js:293:19


Solution:

npm install babel-cli babel-preset-es2015

npm install babel-preset-stage-2


then...

npm start

worked as expected, Compiled successfully.

import in React JS

• React Apps are basically a collection of interactive Components.

• Similarly, we can also import user-defined classes, components or even a part of the same.

• Using ES2015 which is shortly called as ES5, every module can have a default export or may export several named parameters, and if it is possible to export it will surely be possible to import the same.

Importing default export: 

Every module to have at most one default export. 

In order to import the default export from a file, we can use only the address and use the keyword import before it, or we can give a name to the import making the syntax as the following.

import GIVEN_NAME from ADDRESS

// Example: Importing Module
import ReactDOM from 'react-dom';

Importing named values: 

Every module can have several named parameters and in order to import one we should use the syntax as follows.

import { PARA_NAME } from ADDRESS

And similarly for multiple such imports we can use a comma to seperate two parameter name within the curly braces.

Importing a combination of Default Exports and Named Values: 

The title makes it clear what we need to see is that the syntax of the same. In order to import a combination, we should use the following syntax.

import GIVEN_NAME, { PARA_NAME, ... } from ADDRESS

// Example: Importing combination
import React, {Component} from 'react';