Fundamentals of React(Part 2)

React Components

Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML.

There are two types of React components:

• Class Components

extends React.Component statement creates an inheritance to React.Component, and give access to React.Component's functions.

render() method returns HTML

class Car extends React.Component {
  render() {
   return <h2>Hi, I am a Car!</h2>;
  }
}

• Function Component

Function components can be written using much less code, are easier to understand.

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}

Components make code more clean and readable it is easy to use.

ES6 Module Import and Export

export default name

The term 'default' export only one variable.

export {age, name}

Rest of all objects will be written inside curly braces.

import {age,name} from './App'

Here, we are importing different variables from App.js File.

import * as que from './App'

<li> {que.default} </li>
<li> {que.age} </li>
<li> {que.name} </li>

Props in React.js

Props stands for properties. React props are like function arguments in Javascript and attributes in HTML.

import  React from 'react'

function Card(props){
return(
        <>
          <div className="cards">
          <div className = "card">
                <img src = {props.imgsrc}>
                 <span className = "card_category">{props.title}</span>
                  <h3 className = "card_title">{props.sname}</h3>
                  <a href={props.link} target="_blank">
                </>

)
}
 export default Card

In different file:

import Card from './Card'

ReactDom.render(
<>
<Card 
      imgsrc = "---"
      title = "----"
      sname = "---"
      link = "---"
/>

Like this you can use props easily.

Array map

Map method needs a unique Key, keys are necessary to improve performance of your React app.

array.map(function(currentValue,index,arr),this value)
              function nCard(val){
      return (
      <Card
imgsrc = {val.imgsrc}
title ={val.title}
sname = {val.sname}
link = {val.link}
/>
)
}
{sData.map(nCard)}

Fat Arrow Function

{sData.map(function nCard(val){
return(
<Card
      imgsrc = "---"
      title = "----"
      sname = "---"
      link = "---"
/>
)})}

old version:

function myname(a,b){
return a+b
}

New Version:

const myname = (a,b)=> a+b

React developer tools

Key : Keys help React identify which items have changed(added/removed/re-ordered). To give a unique identity to every element inside the array, a Key is required.

If-else Statement

const favSeries = 'netflix'
const favS = () =>{
if(favSeries === "netflix"){
return <netflix/>
}
else{
return <amazon/>
}
}

React Hooks

• Hooks are the new feature introduced in the React 16.8 version.

• It will allow you to use state and other React features without writing a class. Hooks are the functions which "hook into" React state and lifecycle features from function components.

• It does not work inside class.

• Hooks should always be used at the top level of the react functions.

• Node version 6 or above. NPM version 5.2 or above.

UseState Array which returns two items

[undefined,f] => current data, updated data = initial data

import React ,{useState} from "react";
const App =()=>{
const state = useState()
const [count,setCount] = useState(0);
//count take initial value i.e 0
const IncNum =()=>{
setCount(count+1)
}
return (
<>
<h1>{count}</h1>
<button onClick="IncNum">Click Me</button>
</>
)}
export default App;

import React ,{useState} from "react";
const App =()=>{
let newTime = new Date().tolocalTimeString();
const [Time,CurTime]=useState(newTime);
const setTime =()=>{
newTime = new Date().toLocalTimeString();
CurTime(newTime);
}

return(
<>
<h1>{cTime}</h1>
<button onclick = 'setTime'>Get Time</button>
</>
)}
export default App;

Forms

In react we have controlled and uncontrolled component.

• An input form element whose value is controlled by react in this way is called a controlled component.

• Uncontrolled components ,where form data is handled by the DOM itself.

import React, {useState} from 'react'
const App =()=>{
const inputEvent =(event)=>{
setgreet(event.target.value)
}
const [greet,setgreet]=useState()
const[fullname,setfullname] = useState()
const onSubmit =() =>{
setFullName(greet)
}
return(
<>
<div>
<h1>Hello {fullName}</h1>
<input type='text' placeholder = 'enter your name' onchange ={inputEvent} 
value ={greet}></input>
<button onclick = {onSubmit}>click me</button>
</div>
</>
)}
export default App;