Lecture 5

ReactJS
 Index.html
• <noscript>--if browser not support
javascript then to enable it we use this.
• <div id=“root”></div>
• Single Page Application
 Index.js
Var React =require(‘react’);
Var ReactDom=require(‘react-dom’);
ReactDom.render(‘What to show’,’Where to
show’,’callback func’);
ReactDom.render((<h1>Helloworld!</h1>
Document.getElementById(“root”));
Babel,Webpack
 Import/Export
• Import React from’react’;
• Import ReactDom from ‘react-dom’;
• How to render multiple Elements?
• React Dom.render
• It actually takes one element like if you want
to use
• <h>,<p>then put it one section<div>
• For more than 16 versions,It accepts array of
elements[]
 Refer the links
• https://reactjs.org/docs/react-api.html#create
element
• https://reactjs.org/docs/react-dom.html#rend
er
• https://reactjs.org/docs/react-dom-client.html
#createroot
 React Fragment
• <React.Fragment>
• </React.Fragment>
• In order to avoid<div>-><div>
• Syntactic Form
• <></>
 Problem 1
• Create a reactapp from scratch
a)Add one h1 element
b)Add one p
c)Add list of 5 Netflix series in it using an order
list.
 JSX Expressions
• Import…
• Import…
• Const fname =“Sarveen”;
• ReactDom.render(<h1>my name is
fname</h1>;
• …..
• )
• {}
 Template Literal
• Const name=sarveen;
• Const lname=Harleen;
• Three ways-
• {}{}
• ${name}${lname}
• {fname+lname}(It will not show any space)
• {fname+””+lname} I t will give spaces.
 Problem 2
• Create a react app from scratch
• Add one h1 element Your name
• Add one p element in it that will show current
Date
• Add one p element in it with current Time
 OUTPUT
• Hello,My name is ABC
• Today Date is 20/2/2023
• Current Time is 3.05pm
 JSX Attributes
• <h1 contentEditable=“true”>
• <img src=Default image alt=“random
Images”>
 External CSS
• Class/className->we have to use className
instead of class in css as it is already reserved
word in css
• Internal Css
• Inline css