REACT JS Session-1 --PREREQUISITES: -HTML,CSS,JAVASCRIPT AND BOOTSTRAP --Why React came into picture? -JQUERY -React --What is React? -React is a javascript based library for building web and native user interfaces. -latest version-REACT 18 -REACT==>17- We will cover the basics. Syllabus: -BASICS OF HTML,CSS,JAVASCRIPT AND BOOTSTRAP -PROJECT-ECOMMERCE-MERN which is better React or Angular? -React is a library -Angular is a framework library-user/developer is in charge of calling the function framework-framework is in charge of calling the functions Is react enough to build a complete application? -No, support of framework When to use react? -If your project already have a framework its better to go with react. Criteria for selecting React or Angular: -requirement -what is it capable of? -what are the gaps in your technology Challenges : -Unified experience-across all devices -SPA(Single page application),Progressive web application -tightly coupled==>Regression issues -Heavy dependency on DOM(Document object Model) ------------------------------------------------------------------------------ Session-2 -React is one of the solution Features of React: -Component based design -Reausability -Simple to use -Loosely coupled -Virtual DOM -SEO based library Environment Setup: Using CDN Links: -NodeJS==>https://nodejs.org/en/download/prebuilt-installer -Node JS comes with npm(node package manager) -npm ==>helps you in managing the package and dependency -Download Visual Studio==>https://code.visualstudio.com/download --https://legacy.reactjs.org/docs/cdn-links.html --https://babeljs.io/docs/babel-standalone --add public folder and src folder React

Click here

Abhi me ------------------------------------------------------------------------------------------------------ Session 3: HTML,CSS and JS-backend -- DOM: Document Object model==> It is a structural representation of HTML elements that are available in the webpage. Virtual DOM:It is a lightweight copy of actual DOM.It is also an in-memory representation of actual DOM. React uses VirtualDOM concept. HTML: Hyper text markup language Headers:

Welcome to React

paragraph: if we want to break or take a new line we use br tag.br is a self closing tag hr is used to draw a horizontal line

hi this

is abhi

image tag: alt is the attribute whenever your picture/image give some error relevant message will be displayed to the user nature image

list: -ordered list --ol -unordered list--ul

Home
cars

maruti
BMW
tata

About
Call us

Home
Sign in
About
Call us

table tags:

Name	Age
Abhi	32
Raj	22

Inline and Block elements: Block elements: Always starts on a new line and it will stretch out to the left and right as far as possible. It occupies the whole horizontal space of its parent element and the height equals to the content. ex: div,p,h1 to h6,ul, ol Inline elements: It doesn't start on a new line and it takes up the necessary width ie required by them. ex:span ,a ,strong , b id and class: we need to identify elements in order to manipulate them --id==> its is unique to identify any element --class==>classes can be same for multiple elements # is for id and .(dot is for class) HTML forms and input tags: --Its a tool to collect user inputs via different interactive controls.

Username

Password:

Address:

comments://By defaults rows is set as 2 u can think of it as rows=1 will be equal to length as normal input type=text as u increase it will increase in height for cols default is 20

Email:

Male Female

Select car: Maruti Tata BMW

Select File:

Description list: The dl tag in HTML can be used to display the glossary list on the HTML page. What does a glossary do? Some written works use a lot of uncommon words, especially academic works, such as research or thesis papers. As an aid to readers, these works sometimes provide a glossary to define the difficult words, so readers can look them up quickly without consulting a dictionary. It was originally definition list and was then changed to description. Changed occurred during HTML 4 to 5 The

(data term) and

(data description) pairs.

Coffee: Black hot drink
Milk: White cold drink

------------------------------------------------------------------------------------------------- CSS: CSS:cascading style sheet==> giving your webpage a good look Syntax: element {property:value} three ways to define CSS for a HTML file: --inline CSS --internal CSS --external CSS inline CSS: Allows you to apply styles directly within HTML Tags using style attribute. internal CSS:Allows you to apply styles directly within HTML files by including style tag external CSS: create a separate CSS file with a .css extension and then linking it to HTML file using tag. What if we have different combo? If we give inline CSS it takes the utmost priority than other 2. If you want your internal CSS to take priority u need to write !important next to css property What if we add external CSS? i.e abcd.css and call in the file In this case if no !important tag is there the line which comes latest will take priority But if we add !important to any property than that will take priority And If we add !important to both internal and external property again it comes to which is coming afterwards in the code types of CSS selector: -CSS universal selector -CSS element selector -CSS id selector -CSS class selector -CSS grouping selector Each parameter (red, green, and blue) defines the intensity of the color with a value between 0 and 255. To display black, set all color parameters to 0, like this: rgb(0, 0, 0). To display white, set all color parameters to 255, like this: rgb(255, 255, 255). A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. ________________________________________ HEX Color Values In HTML, a color can be specified using a hexadecimal value in the form: #rrggbb Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255). For example, #ff0000 is displayed as red, because red is set to its highest value (ff), and the other two (green and blue) are set to 00. Another example, #00ff00 is displayed as green, because green is set to its highest value (ff), and the other two (red and blue) are set to 00. To display black, set all color parameters to 00, like this: #000000. To display white, set all color parameters to ff, like this: #ffffff. Text properties text-align: left|right|center|justify| text-align:start means left in normal except urdu,Hebrew Left means that the left edge of the text is aligned.right means right edge of the text is aligned Justified text means that both the left edge and the right edge of the text is aligned.center means no side text is aligned By default left line.even when we write English/hindi in our notebook we write from left Text-decoration Text-decoration: underline/overline/line-through/none Line-through -cut via line Best use case anchortag to remove underline use none text-decoration: underline red; font-weight: range 100 to 900 normal/lighter/bold etc font family: use google font Units of css -absolute units,relative units -pixel 96px=1 inch -use font size and show it -line-height: spacing between two lines -text-transform ;uppercase/lowercase/capitalize -capitalize: first letter of every word will become capital background color box model in CSS: -height -width -border -Padding -Margin In border we have: border width Border style: solid/dotted/dashed border-color: blue; border-width: 2px; border-style: dashed; border: 2px solid blue for margin and padding refer the slides(with diagram). Extra notes: • margin: 25px 50px 75px 100px; o top margin is 25px o right margin is 50px o bottom margin is 75px o left margin is 100px If the margin property has three values: • margin: 25px 50px 75px; o top margin is 25px o right and left margins are 50px o bottom margin is 75px • margin: 25px 50px; o top and bottom margins are 25px o right and left margins are 50px • margin: 25px; o all four margins are 25px • You can set the margin property to auto to horizontally center the element within its container. • The element will then take up the specified width, and the remaining space will be split equally between the left and right margins. same for padding ----React 17 without CDN--- What if I want to install these libraries ie want to work offline: npm install react --save npm install react-dom --save npm install @babl/standalone --save We can directly go and use all the three commands in the same line npm install react react-dom @babel/standalone --save After installation u can see node_module folder being created which contains all the library/functions required for the project to be developed in react Use these below script code to link all the required libraries for your project: Note: us only umd files React is all about components ,every component consist of : -HTML -CSS -JS Creating component can be done in two different ways: -JavaScript function -JavaScript class //obsolete //declaration function function login(){ ----- ---- } Rules of components: -cant be void type,return JSX elements -JSX-Java script extension language (Java script +HTML) Note: JSX returns only one fragment ie markup function login(){ return(

hello

//error ) } JSX will not allow void elements. void elements : which doesn't have end tokens solution: give an end tag Attributes are defined by html: properties are defined by DOM: className,childNodes etc design components using react: Document