CSS Styling

Make a box with rounded corners:
	You can see that the box has a rounded corner, which we can do by using the CSS code below. In this case, "box" is the class name for the div. .box { height: 120px; width: 120px; background-color: #06d590; color: black; border-radius: 15px; }

Create a box with a shadow effect using only CSS:
	You can see that the box has a shadow effect, which we can do by using the CSS code below. In this case, "boxShadow" is the class name for the div. .boxShadow { height: 120px; width: 120px; background-color: #cf6a22; color: black; box-shadow: 10px 10px 18px 0px #808080; }
	Box shadows take five values and are applied to the outside portion of tags by default. first value for the X index, second value for the Y index, third value for the blur option, fourth value for the spread, and last value for the shadow's color
Create a box with a Linear Gradient using only CSS:
	You can see that the box has a linear background color, which we can do by using the CSS code below. In this case, "boxLinearGradient" is the class name for the div. .boxLinearGradient { height: 120px; width: 120px; background:linear-gradient(blue, #cf6a22,green);// Default it put color from top to bottom background:linear-gradient(to right,blue, #cf6a22,green);// This will start color from right background:linear-gradient(to left,blue, #cf6a22,green);// This will start color from left background:linear-gradient(45deg,blue, #cf6a22,green);// This will rotate the color with 45deg color: black; }
	Multiple colors are added to the background using a linear gradient. By default, the order is top to bottom. We are also able to adjust the order to "left," "right," and "60 degrees."

Using text shadow in CSS, create a text shadow:
Text shadow effect	You can see that the text shadow effect , which we can do by using the CSS code below. In this case, "Shadoweffect"is the class name for the div. .Shadoweffect color: white; text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;

Using loader in CSS, create a loader:
	You can see the loader , which we can do by using the CSS code below. In this case, "loader"is the class name for the div. .loader { width: 50px; height: 50px; border-radius: 50%; border: 10px solid white; border-top: 10px solid blue; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

Using filter: drop-shadow in CSS, create a image shadow:
	You can see that the image shadow , which we can do by using the CSS code below. In this case, "image"is the class name. .image{ width: 100px; filter: drop-shadow(10px 10px 2px #1a1a1a)!important; } .image>img{ width: 100%; border: none; background:none; }

Using this code to ensure that the image size will always fit within the div even if the div size changes.
	You can see the image that we were able to create with the CSS code below."Photo" is the class name in this instance. .photo{ height: 100px; width: 150px; display: flex; justify-content: center; align-items: center; } .photo>img{ width: 100%; height: 100%; background: none; border: none; }

What is State in React?

State of a component is an object that holds some information that may change over the lifetime of the component. The important point is whenever the state object changes, the component re-render

Lets take an example of User component with message state.
Here useState hook has been used to add state to the User component and it return array with current state and function to update it.

Declare state in the function component

  import React ,{useState} from "react";
  function User(){
  const [message,setMessage]=useState("welcome to React world");
  return(
  <h1>{message}<h1/>
  );
  }

Declare state in the class component

  import react from 'react';
  class User extends React component {
  constructor (props){
  supper(props);
  this state={
  message:"welcome to React world",
  };
  }
 render(){
  return(
  <h1>{this.state.message}<h1/>
 );
  }
  }

State is similar to props,but it is private and fully controlled by the component. It is not accessible to any other component till the owner component decides to pass it.

What is Props in React

Props are input to Component. It can be single value or objects, containing a set of values that are passed to components on creation, similar to HTML tag attributes.
The primary purpose of props in React is to provide following component functionality.

• Pass custom data to your component
• Trigger state changes
  

This reactProps(or whatever you come up with) attributes name then becomes a property attached to React's native "props" object which originally already exists on all components created using React library
//props.reactProps

Functional Component

import React from "react";
import ReactDom from "react-dom";
const ChildComponent =(props)=>{
return(
<div>
<p>{props.name}</p>
<p>{props.age}</p>
</div>
);
};

const ParentComponent =(props)=>{
return(
<div>
<ChildComponent name="jo" age="30"/>
<ChildComponent name="So" age="29"/>
</div>
);
};

Class Component

import React from "react";
import ReactDom from "react-dom";
class ChildComponent extends React.Component{
render(){
return(
<div>
<p>{this.props.name}</p>
<p>{this.props.age}</p>
</div>
);
}
}

React Tutorial

What is React?

React is an open-source front-end JavaScript library that's utilized for building component bassed client application

• React is especially used for Single page application
• It is used for handling View layer of Web Application and Mobile app.
• React Uses JSX syntax. JSX is as syntax extension of JS that allow developers to write HTML in their JS Code
• React uses Virtual Dom instead of Real DOM.
• Real DOM manipulation are expensive.
• React uses reusable UI Components to develop the view.

What is JSX?

JSX stands for JavaScript XML and it is an XML-Like extension to ECMA Script. Basically it provide the syntax for the Below Function.

React.createElement(type, props,... children)

In the below example the text inside <h1> tag is returned as JavaScript function to render function.

export default function App(){
return(
    <h1>{"Hello this is JSX code!"} </h1>
  );
 }

If you don't use JSX syntax then the respective JavaScript code should be written as below.

Functional Component

  import {createElement} from 'react';
  export default function App(){
     return createElement(
      'h1',
      {
     className:'greeting'},
      'Hello, This is a JSx Code'
    );
  }

Class Component

  class App extend React.Component{
     render(){
      return(
     <h1>"{Hello, This is a JSx Code}</h1>
    );
  }
 }