ARRAY HOOK IN REACT JS(V16)

• Hook let you use state and other React features without writing a class. 
• Hook doesn't work inside classes.
• Hook used for function components.
• Ex.:useState() is a hook function components, it returns an array of two items.

App.jsx

import React, { useState } from 'react';

import ReactDOM from 'react-dom';

import Card from './Cards';

import Sdata from './Sdata';

import "./index.css";

const App = () => {

    let newT = new Date().toLocaleTimeString();

    // Array Hook; setCtime is holding updated value

    // & ctime is holding current value of newT.

    const [ctime, setCtime] = useState(newT); // Array destructuring  

    const UpdateTime = () => {

        newT = new Date().toLocaleTimeString();

        setCtime(newT);

    }

    setInterval(UpdateTime, 1000)

    return(

        <>

        <h1 className='top_head'> {ctime}<br/> TOP 3 NETFLIX SHOWS</h1>

        {Sdata.map((val, index) => {

            return (

                <Card 

                key = {val.id}

                imgsrc = {val.imgsrc}

                imgname = {val.imgname}

                category = {val.category}

                tit = {val.tit}

                link = {val.link}

                />);

            })}

        </>);

};

export default App;

DESTRUCTING IN REACT JS

 Ternary Operator:

• condition?expTrue:expFalse
• Example:

const Fav = "SonyMax";

{Fav === "SonyMax"?<SonyMax />:<ZeeTV />}

Array Destructing:

const language = ['php',  'c',  'c++',  'java',  'jsp'];

//In ES5

var lang1 = language[0];

var lang2 = language[1];

.......

var lang5 = language[4];

console.log("My fav. languages are "+lang1+"and "+lang5);

//In ES6

let [lang1, lang2, lang3, lang4, lang5] = language;

console.log(`My fav. languages are ${lang1} and ${lang5}`);

For inserting Emojis in VS Code:

Press ":" or ":smilie"  

INTRODUCTION TO ANGULAR

Angular is a platform and framework for building single-page client applications using HTML and TypeScript. Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your apps.

Installation:

• Install Node.js and NPM
• Install REACT from terminal i.e. md prompt

1. cd <foldername>(where you want to install angular)

1. npm install -g  @angular/cli (i.e. command line interface)
2. ng v (for current angular version installed)
3. ng new <projetname>
4. cd <projectname>
5. ng serve

One Framework. Mobile and Desktop

A WEB-PAGE EXAMPLE IN REACT JS

Cards.jsx

import React from 'react';

import Images from './Images';

function Card(props)

    {

        //console.log(props);

        return (

            <>

                <div className="cards">

                    <div className="card">

                    <Images imgsrc={props.imgsrc} 

                    imgname={props.imgname}/>

                    <div className="card_info">

                        <span className="card_category">

                        {props.category}</span>

                        <h3 className="card_title">{props.tit}</h3>

                        <a href={props.link} target="_blank" rel="

                        noopener noreferrer">

                            <button className="card_button">

                                Watch Now</button>

                        </a>

                    </div>

                    </div>

                </div>

            </>

        )

    }

    

export default Card;

Sdata.jsx

const Sdata = [

    {

        id: 1,

        imgsrc: "https://icdn2.digitaltrends.com

        /image/digitaltrends/best-movies-on-netflix-marriage

        -story-1200x9999.jpg",

        imgname: "Marriage Story (2019)",

        category: "ONE",

        tit: "Marriage Story (2019)",

        link: "https://www.imdb.com/title/tt7653254/?ref_=nv_sr_srsg_0"

    },

    {

        id: 2,

        imgsrc: "https://icdn3.digitaltrends.com

        /image/digitaltrends/200612-da-5-bloods-1128_

        583aa9bc99df786adfba4979f13d0761-1200x9999.jpg",

        imgname: "Da 5 Bloods (2020)",

        category: "TWO",

        tit: "Da 5 Bloods (2020)",

        link: "https://www.imdb.com/title/tt9777644/"

    },

    {

        id: 3,

        imgsrc: "https://icdn4.digitaltrends.com

        /image/digitaltrends/lady-bird-netflix-1200x9999.jpg",

        imgname:"Lady Bird (2017)",

        category: "THREE",

        tit: "Lady Bird (2017)",

        link: "https://www.imdb.com/title/tt4925292/?ref_=nv_sr_srsg_0"

    }

];

export default Sdata; 

App.jsx

import React from 'react';

import ReactDOM from 'react-dom';

import Card from './Cards';

import Sdata from './Sdata';

import "./index.css";

ReactDOM.render(

  <>

    <h1 className='top_head'> TOP 3 NETFLIX SHOWS</h1>

    <Card 

      imgsrc ={Sdata[0].imgsrc}

      imgname = {Sdata[0].imgname}

      category = {Sdata[0].category}

      tit = {Sdata[0].tit}

      link = {Sdata[0].link}

    />

    <Card 

      imgsrc ={Sdata[1].imgsrc}

      imgname = {Sdata[1].imgname}

      category = {Sdata[1].category}

      tit = {Sdata[1].tit}

      link = {Sdata[1].link}

    />

    <Card 

      imgsrc ={Sdata[2].imgsrc}

      imgname = {Sdata[2].imgname}

      category = {Sdata[2].category}

      tit = {Sdata[2].tit}

      link = {Sdata[2].link}

    />

  </>,

  document.getElementById('root')

);

OR

import React from 'react';

import ReactDOM from 'react-dom';

import Card from './Cards';

import Sdata from './Sdata';

import "./index.css";

//Fat Arrow function (single line function)

//const addition = (a,b) => a+b;

//Array mapping 

function cardC(val){

  //console.log(val);

  return(

    <Card 

      key = {val.id}

      imgsrc = {val.imgsrc}

      imgname = {val.imgname}

      category = {val.category}

      tit = {val.tit}

      link = {val.link}

    />

  )

}

ReactDOM.render(

  <>

    <h1 className='top_head'> TOP 3 NETFLIX SHOWS</h1>

    {Sdata.map(cardC)}

  </>,

  document.getElementById('root')

);

OR

import React from 'react';

import ReactDOM from 'react-dom';

import Card from './Cards';

import Sdata from './Sdata';

import "./index.css";

const App = () => (

    <>

    <h1 className='top_head'> TOP 3 NETFLIX SHOWS</h1>

    {Sdata.map((val, index) => {

        return (

            <Card 

            key = {val.id}

            imgsrc = {val.imgsrc}

            imgname = {val.imgname}

            category = {val.category}

            tit = {val.tit}

            link = {val.link}

            />

        );

    })}

  </>);

export default App;

Images.jsx

import React from 'react';

const Images = (props) => {

    return <img className="card_img" src={props.imgsrc}

        alt={props.imgname}/>;

}

export default Images;

index.js

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

//Importing all from App

ReactDOM.render(<App />, document.getElementById('root'));

index.html

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8" />

    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <meta name="theme-color" content="#000000" />

    <meta

      name="description"

      content="Web site created using create-react-app"

    />

    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>React App</title>

  </head>

  <body>

    <noscript>You need to enable JavaScript to run this app.</noscript>

    <div id="root"></div>

  </body>

</html>

PHPMYADMIN DATABASE CONNECTION IN PHP

 Configuration file: config.php

<?php

$server = "localhost";

$user = "databaseUser";

$password = "dbPassword";

$database = "databaseName";

// Create connection

$link = new mysqli($server, $user, $password, $database);

// Check connection

if ($link->connect_error) {

  die("Connection failed: " . $link->connect_error);

}

error_log("Connected successfully");

?>

 Form-Action file: action.php

<?php

include_once 'config.php';

$name = $company = $email = $phone = $remark = '';

if(isset($_POST['submit']))

{  

    error_log("ss");

$name = $_POST['name'];

$company = $_POST['name'];

$email = $_POST['email'];

$phone = $_POST['phone'];

$remark = $_POST['message'];

$sql = "INSERT INTO tableName (name,company,email,phone,remark) 

                VALUES 

                ('$name','$company','$email','$phone','$remark')";

if (mysqli_query($link, $sql)) {

error_log("New record created successfully !");

echo "<div class='alert alert-success' style='margin-top:40px'>

                <strong>Success!</strong> Thank you for submitting your query, 

                        We'll get back to you soon!

             </div>";

//header("Location: http://www.website.in");

header("Refresh: 5;url='https://www.website.in'");

} else {

error_log("Error: " . $sql . " " . mysqli_error($link));

echo "<div class='alert alert-warning' style='margin-top:40px'>

                <strong>Warning!</strong> Something went wrong. Try again!

            </div>";

//header("Location: http://www.website.in");

header("Refresh: 5;url='https://www.website.in'");

}

mysqli_close($link);

}

?>

phpMyAdmin is one of the most popular applications for MySQL database management. It is a free tool written in PHP.

IMPORTING FILES & CSS styling IN REACT

 

import React from 'react';

import ReactDOM from 'react-dom';

import "./index.css"

const tech1 = "REACT";

const img1 = "https://picsum.photos/200";

const img2 = "https://picsum.photos/200";

const img3 = "https://picsum.photos/200";

const link = "https://www.webruchi.in/";

//for inline styling define here an object

//than call it in the JSX element as JS expression

const heading = {

  color: '#4444',

  textAlign: 'center',

  font: 'outline',

  textTransform: 'capitalize',

  fontWeight: 'bold',

  textShadow: '0px 2px 4px #f4f5',

  margin: '50px 0'

}

//style.css uses kebab(text-transform) but in react.js

// we use camelCase(textTransform). Here, 'top_head' is a css

// class whereas 'heading' is an inline css i.e.style

ReactDOM.render(

<> 

    <h1 className="top_head">Welcome to {tech1}</h1>    

    <div className="pic">

    <img src={img1} alt="dummyImage1"/>

    <a href={link} traget="_blank">

    <img src={img2} alt="dummyImage2"/>

    </a>

    <img src={img3} alt="dummyImage3"/>

    </div>

    <h3 style={heading}>This is a inline css Styling.</h3>

</>,

  document.getElementById('root')

);

JAVASCRIPT EXPRESSION, ES6 LITERALS, ATTRIBUTES IN JSX

import React from 'react';

import ReactDOM from 'react-dom';

//JavaScript Expressions in JSX in REACT

//we can only use expression inside'{}', can't use statements

const tech1 = "REACT";

const tech2 = "JS";

console.log(`This is ${tech1}`)//ES6 Template Literals in JSX

ReactDOM.render(

<> 

    <h1>Welcome to {tech1+" "+tech2}</h1>

    <h2>{`This is ${tech1} ${tech2}`}</h2>

    <p>JavaScript Expressions in JSX</p>

    <h3>Sum of three values(34+3+0) is {34+3+0}</h3>

</>,

  document.getElementById('root')

);

Date/Time  Methods:

const currentDate = new Date().toLocaleDateString();

const currentTime = new Date().toLocaleTimeString();

JSX attributes:

import React from 'react';

import ReactDOM from 'react-dom';

const tech1 = "REACT";

const img1 = "https://picsum.photos/200";

const link = "https://www.webruchi.in/";

ReactDOM.render(

<> 

    <h1 contentEditable="true">Welcome to {tech1}</h1>    

    <img src={img1} alt="dummyImage"/>

    <a href={link} traget="_blank">

    <img src={img1} alt="dummyImage"/>

    </a>

</>,

  document.getElementById('root')

);

RENDER MULTIPLE ELEMENTS INSIDE ReactDOM.render()

import React from 'react';

import ReactDOM from 'react-dom';

//It is possible in React V16 to return an array

// of elements in render()

ReactDOM.render(

[

    <h1>REACT</h1>, //do not use capital alphabets for JSX

    <p>A JavaScript library for building user interfaces</p>,

    <h3>Get Started</h3>

],

  document.getElementById('root')

);

OR

import React from 'react';

import ReactDOM from 'react-dom';

//In React we can use <React.Fragment>...</React.Fragment> OR <>...</>

// inplace of using <div>...</div> OR array of JSX elements

ReactDOM.render(

<React.Fragment> 

    <h1>REACT</h1>

    <p>A JavaScript library for building user interfaces</p>

    <h3>Get Started</h3>

</React.Fragment>,

  document.getElementById('root')

);

FLUTTER

 Flutter is an open-source UI software development kit created by Google.  In a few words, it allows you to create a native mobile application with only one codebase. This means that you can use one programming language and one codebase to create two different apps (for iOS and Android).

Flutter features:

• Fast Development
• Expressive and flexible UI
• Native performance

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

REACT FOLDER STRUCTURE

File Structure <projectname>

• node_modules: includes node related modules and annotations i.e. @ 
• public: include index.html/html web-pages, favicon/images, manifest, robots.txt
• src: includes javascript and css files, eg: react.js, App.js, App.css etc.
• package.json: is a json format file containing  all the informations of your project
• readme.md: is a file having basic commands of npm.

Example: react.js

import React from 'react';

import ReactDOM from 'react-dom';

ReactDOM.render(<h1>Hello REACTJS</h1>,

  document.getElementById('root')

);

import React from 'react'; is a module used for inserting JSX/html elements.

import ReactDOM from 'react-dom'; is a module, used for accessing JS ids manipulation

and updation in the REACT.

ReactDOM.render(show what, show where, callback func); is a method used to render(to

show) informations.

<h1>Hello REACTJS</h1> is a jsx element.

document.getElementById('root') is a JS method which returns element that has the ID

attribute and 'root' is a ID of <div> in index.html

Babel is a JavaScript compiler.

Babel is a free and open-source JavaScript transcompiler that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript that can be run by older JavaScript engines.

JSX is stands for JavaScript-XML, used by REACT that extends ECMAscript so that XML/HTML like text can co-exist with ReactJS code. It allow us to put html into JavaScript.

REACT DOWNLOADS/INSTALLATION

Installation:

• Install VS Code i.e. Visual Studio Code
• Install Node.js and NPM
• Install REACT from terminal i.e. md prompt
1. npm install -g create-react-app
2. create-react-app --version
3. create-react-app <projetname>
• npm start: to start the development server
• npm run build: bundles the app into static files for production
• npm test: start the test runner
• npm run eject: removes this tool and copies build dependencies, configuration files

NOTE: Server runs on localhost, port :3000

Visual Studio Code

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.Visual Studio Code is a free source-code editor made by Microsoft for Windows, Linux and macOS.

REACT PREREQUISITES

Before learning REACT:

• Basic knowledge of HTML, CSS and JavaScript
• Basic understanding of ES5/ES6/ES7
• Basic understanding of npm i.e. Node Package Manager.

ES5/ES6/ES7 refers the ECMA Script programming language. ECMA Script is the standardized name for JavaScript.

npm is the package manager for the Node JavaScript platform. It puts modules in place so that node can find them, and manages dependency conflicts intelligently. Most commonly, it is used to publish, discover, install, and develop node programs. Run npm help to get a list of available commands.

BOOTSTRAP

Bootstrap Features:

• HTML5
• Copy-paste css stylesheets
• Components approach with javascript functions
• Responsive view-port meta tag

Bootstrap is a framework for building responsive, mobile-first sites.

Bootstrap 4 is the newest version of Bootstrap, which is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.

REACT JS

ReactJs Features:

• Component based approach
• Uses declarative approach
• DOM (Data Object Model) updates handel gracefully
• Reusable code

React is javascript library for building user interfaces i.e. UI. It is an open source at JS conference.