Inline styling in react:
import react from "react";
import reactDom from "react-dom";
const style = {
color: "blue",
border: "2px solid red",
fontSize: "16px"
};
style.color = "green";
reactDom.render(
<div>
<h1 style={{ color: "red" }}>Hello World</h1>
<p style={style}> hey brother</p>
</div>,
document.getElementById("root")
);
Inline styling practice:
import React from 'react'
import ReactDOM from 'react-dom'
// import App from './App.jsx'
// import './index.css'
// ReactDOM.createRoot(document.getElementById('root')).render(
// <React.StrictMode>
// <App />
// </React.StrictMode>,
// )
// let react=require("react");
// let reactdom=require("react-dom");
const time=new Date();
const hours=time.getHours();
let greet;
const style={
color:""
}
if(hours<12){
greet="Good Morning";
style.color="red";
}else if(hours<18){
greet="Good Afternoon";
style.color="green";
}else{
greet="Good Night";
style.color="blue";
}
ReactDOM.render(
<h1 style={style}>{greet}</h1>
,document.getElementById("root"));
React component:
In heading.jsx
import react from "react";
function Heading() {
let greeting;
let currenttime = new Date(2019, 5, 3, 19);
let hours = currenttime.getHours();
let cstyle = {
color: ""
};
if (hours < 12) {
greeting = "Good Morning";
cstyle.color = "red";
} else if (hours < 18) {
greeting = "Good Afternoon";
cstyle.color = "green";
} else {
greeting = "Good night";
cstyle.color = "blue";
}
return (
<div>
<h1 style={cstyle}> {greeting} </h1>
</div>
);
}
export default Heading;
In App.jsx
import react from "react";
import Heading from "./Heading";
function App() {
return (
<div>
<Heading />
</div>
);
}
export default App;
In Index.jsx
import react from "react";
import reactdom from "react-dom/client";
import App from "./coponent";
reactdom
.createRoot(document.getElementById("root"))
.render(<>{ <App /> }</>);
In Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<link href="style.css" rel="stylesheet">
<title>React</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Import,export,modules in react
In index.js
import react from "react";
import reactdom from "react-dom/client";
// import App from "./App";
import pi from "./sol";
import { doubleepi, triplepi } from "./sol";
// import * as pi from "./sol";
reactdom.createRoot(document.getElementById("root")).render(
<div>
<ul>
{/* <li>{pi.default}</li> */}
{/* <li>{pi.doubleepi()}</li> */}
{/* <li>{pi.triplepi()}</li> */}
<li>{pi}</li>
<li>{doubleepi()}</li>
<li>{triplepi()}</li>
</ul>
</div>
);
In sol.js
import react from "react";
let pi = 3.1415962;
function doubleepi() {
pi = 6.28;
return pi;
}
function triplepi() {
pi = 9.42;
return pi;
}
export default pi;
export { doubleepi, triplepi };
import export module practice:
In calculator.js
import react from "react";
function add(n1, n2) {
return n1 + n2;
}
function sub(n1, n2) {
return n1 - n2;
}
function mul(n1, n2) {
return n1 * n2;
}
function div(n1, n2) {
return n1 / n2;
}
export { add, sub, mul, div };
In index.js
import react from "react";
import reactdom from "react-dom/client";
// import { add, sub, mul, div } from "./calculator";
import * as pi from "./calculator";
reactdom.createRoot(document.getElementById("root")).render(
<div>
<ul>
<li>{pi.add(2, 3)}</li>
<li>{pi.sub(9, 2)}</li>
<li>{pi.mul(4, 5)}</li>
<li>{pi.div(10, 2)}</li>
</ul>
</div>
);
import react from "react"
import Heading from "./heading"
import Footer from "./footer"
import Note from "./note"
import "./App.css";
// import List from "./list"
function App(){
return(
<div>
<Heading />
<Note/>
<Footer />
</div>)
}
export default App;
import react from "react";
function Footer(){
let date=new Date().getFullYear();
return (
<footer>
<p>
Copyright © {date}
</p>
</footer>)
}
export default Footer;
import react from "react";
function Heading(){
return (
<div>
<header>
<h1>Keeper</h1>
</header>
</div>)
}
export default Heading;
import react from "react"
function Note(){
return (<div class="note">
<h1>This is title</h1>
<p>This is text content</p>
</div>)
}
export default Note
In index.css
*{
/* background-color: grey; */
}
header {
background-color: yellow;
margin: -10px -8px;
padding: 1px 24px;
}
header h1 {
color: white;
font-weight: 200;
}
footer {
position: absolute;
text-align: center;
bottom: 0;
width: 100%;
height: 2.5rem;
}
footer p {
color: #b18989;
}
.note {
background-color: #fff;
border-radius: 7px;
width: 160px;
box-shadow: 0 2px 5px #ccc;
padding: 10px;
margin: 25px;
}
.note h1 {
font-size: 1.1rem;
margin-bottom: 6px;
}
.note p {
font-size: 1.1rem;
margin-top: 3px;
/* white-space: pre-wrap; */
/* word-wrap: break-word; */
}
Props in react:
Props are defined as the properties (type of object)where the value of attribute of tag is stored.Facilates
code reusability.
In app.jsx
import react from "react";
function Card(props){
return(
<div>
<h1>{props.name}</h1>
<img src={props.src} style={{height:100, width:100}} alt="image"/>
<p>{props.tel}</p>
<p>{props.email}</p>
</div>
)
}
export default Card;
In main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './components/App.jsx'
import './index.css'
// ReactDOM.createRoot(document.getElementById('root')).render(
ReactDom.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<App name="kritika" tel="8947" email="[email protected]" src="img.jpg" />
<App name="kripa" tel="6378" email="[email protected]"
src="https://i.guim.co.uk/img/media/dc9683b99ebc4fe01c8a90b748691886c0e61727/994_3274_3349_2010
/master/3349.jpg?
width=1200&height=1200&quality=85&auto=format&fit=crop&s=6591876a0e58df7519e3720c3ca7567f"/>
</React.StrictMode>
)
Map function:
Map function allows you to iterate over the array and access all the elements throughout the array.
Const arr=[3,6,7,1,9,12,90];
Var mynumber=arr.map(function(x){
Return x*2;
Console.log(mynumber);
Using for each loop:
let arr=[3,7,12,9,12,5];
let array=[];
arr.forEach(function name(x){
array.push(5*x);
});
console.log(array);
Filter function:
Filter function allows you to iterate over the array allowing to access only those elements/items
which returns true.
let arr=[3,7,12,9,12,5];
let num=arr.filter(function(x){
return x>9;
})
console.log(num); let arr=[3,7,12,9,12,5];
let num=arr.filter(function(x){
return x>9;
})
Using ForEach loop:
let arr=[3,7,12,9,12,5];
let array=[];
arr.forEach(function name(x){
if(x>7){
array.push(x);
}
});
console.log(array);
Reduce Function: Take as a single output.Accumulate value by doing
something on each item of the array.
let arr=[3,7,12,9,12,5];
var numbers=arr.reduce(function(accumulator,x){
return accumulator+x;
}
);
console.log(numbers);
Using forEach loop:
let arr=[3,7,12,9,12,5];
var numbers=0;
arr.forEach(function(x){
return numbers+=x;
}
);
console.log(numbers);
Find function:
Find function is used to find the first element that matches
from an array.
let arr=[3,7,12,9,12,5];
var numbers=arr.find(function(x){
return x>6;
})
console.log(numbers);
FindIndex Function:
Findindex function is used to find the index of first element that
matches from an array.
Substring function:
It returns the part of string between start and end or to the end of the
string;
Var Str=”kritika”;
Str.substring(0,3);
