REACT

LECTURE-03
01basicreact: It has following files:
1. Node Modules: It is not found in many repositories. It gets
simply installed when we install npm.
2. Src: It has initially two files which is-
App.js
Index.js
3. .gitignore: It contains file which would be uploaded on github. It
is editable and can be edited by us.
4. Package-lock.json: It is similar to package.json but here the
dependencies are locked,that is, we can use these
dependencies only.
5. Package.json: It gives information about all the dependencies
and all other data.
Now in public folder we see Index.html file. This html file contains
only one div with id=root. Here we don’t see any script tag.

Now we see index.js which is a default file in react. We use two

libraries here (so we Import them)-React and ReactDom.
ReactDom is a dom created by react called as Virtual DOM .This
ReactDom compares itself with the websites’s DOM and make
changes accordingly instead of changing the whole DOM.

Here render renders the App.js which we will see now. <App/> is a
custom-made tag. React has this ability where we use jsx where the
javascript file returns html content.
Now what is this App here-
This app is nothing but the App function which is exported here and
is imported in index.js.
Now the question arises that if the index.html file does not have the
script tag how is the javascript file linked with it. So here the function
of react-scripts comes(present in dependencies). It links the html
with index.js . This can be seen using website’s page source.

Now comes 01vitereact,

Here we don’t have react-scripts because the script tag is present in
html itself. Furthermore the html file in this case is present normally
not in any public folder.
Comparing the index.js and main.jsx ,we see many similarity

Index.js Main.jsx

Now we will create our own file and try to render it. File Name= chai.jsx

1. Remember file name can be either in small or caps(better keep it in caps).

2. Function name must be in caps .
3. For react with vite file name must be with .jsx instead of .js .

Now we will try to render it through App.jsx-

Here if we don’t use <>…..</> , the code will show error.This is called fragment. We use fragments in
which every element is returned. This is called jsx wrapping.

The exported Chai from chai.jsx is imported here in the first line.
Now doing the same thing with 01basicreact-

1. Here the file name can be Chai.js or Chai.jsx . No issues in both the case.
2. Function name must be in caps in this case too.

App.js chai.js

NOTE: Name must be in caps(first letter) in both cases of basicreact and

vitereact.

LECTURE-04(Create Your Own React Library and JSX)

Now we will create our own react. Start with creating a folder named
customreact which has the file index.html and customreact.js .
We create html file with a div with id=root and linking the customreact.js using
script tag.
In customreact ,we take the id=root using queryselector. Now we need to
render this . To render this we need a function which returns any element like
‘a’ tag, ‘p’ ,etc.
Now we will learn how react sees the element which is to be returned.
Now the code has some problem like - if the tag is without any attribute like
‘div’ tag and ‘a’ tag then we don’t need to set attributes. So we will use a loop
for this-

Now we will see how the html elements are transcribed by the react in
vite(01vitereact).
We know that in main.jsx app is a function. So we will try to create another
function in main.jsx only and try to render it.
We can try to run reactElement instead of MyApp but it would show error.
Because to render reactElement the syntax is different (We have created the
custom syntax by ourselves above).
So .render expects a different kind of function/object. Now we will try to create
another element.
In this way also rendering of an element is possible.
Now we will try to render element in accordance with React.

Now we will know that how to inject variables in App-

LECTURE-05: HOOKS in REACT JS
Now we will create a file named 02counter and go to App.jsx.
In return we are returning two button where one button has the onClick
action.For this onclick we will pass a function addValue.
In console we see that the value of counter is changing but it is not showing in
the UI. The problem here is UI updation. Now React provides us special
methods called Hooks.
To use hooks we import useState hook or any other hook according to our need
from react.
useState is a React Hook that allows functional components to manage state. It
enables components to store and update values dynamically.
We use it in this way-

Lecture-06: Virtual DOM, Fibre and reconciliation

The Virtual DOM (VDOM) is a lightweight copy of the real DOM used in React
to optimize rendering and improve performance.
In main.jsx of any react file ,createRoot method creates a DOM like structure
similar to website’s DOM.
How It Works:
1. Initial Render: React creates a Virtual DOM tree representing the UI.
2. State/Prop Change: When the state or props of a component change,
React creates a new Virtual DOM tree.
3. Diffing (Reconciliation): React compares the new Virtual DOM with the
previous one using a diffing algorithm to find changes.
4. Efficient Updates: Instead of re-rendering the entire UI, React updates
only the changed parts in the real DOM.

When setCount updates the state, React:

1. Creates a new Virtual DOM tree.
2. Compares it with the old one.
3. Updates only the <p> tag with the new count in the real DOM.
To know more Go to google and search React Fibre. Go to the gitHub link and
read the documentation.
NOTE: Reconciliation is the algorithm behind what is popularly understood as the "virtual
DOM."
IMPORTANT: Hydration: When the page is first loaded, buttons and images are visible
(HTML is rendered), but no clicking occurs because JavaScript has not yet loaded. Then once
JavaScript is loaded, React is connected with HTML and everything becomes interactive, our
process is called hydration. And this fiber has become very fast through algorithm.

LECTURE:07-TailWind and Props is ReactJs

Tailwind CSS is a utility-first CSS framework that allows you to build modern, responsive
web interfaces quickly. Instead of writing custom CSS, you use predefined utility classes
directly in your HTML to style elements.
Example:

First create a new project using vite and name the project- 03TailwindProps
Now we will install tailwind using tailwindcss.com
The command- npm install -D tailwindcss@3 postcss autoprefixer; means the
dependency of the tailwind.
The command- npx tailwindcss init -p; it creates tailwind.config.js and
postcss.config.js files.
Now open app.jsx , and we write a h tag and for this h tag we can write class
but in jsx file instead of class we write className.
In className we can use TailWind classes.We can find this classes on Tailwind
css website. All the css for that particular tag can be written in that line
only(This is the specialty of Tailwind).
Now we will write code for a card which is to be shown on the website. This
code is available on Tailwind’s website.

Note: Image tag generally has no closing tag but you need to close it here.
Now we would learn about Props.
Props make the components reusable. Suppose to reuse a card, we can keep the code of
card in a prop and can use it multiple times with different css styling.
We create a new folder component and in the folder we make a file name card.jsx where we
copy paste the code for the card.Now we would import this card from card.jsx to app.jsx.
Now we see the return function. If we write card tag twice, two cards appear on the
website. To give different information in different cards we use props. The props is present in
card function by default. If we try to see what prop contains using console.log, we would see
that props has objects.
Now in app.jsx we try to pass several values in the chai tag. This value would be shown in
props.We can pass objects and arrays in this tag.
Suppose we want different username for the cards. We pass different userNames. Not just
that we can change anything like the btnText.To pass more than one information we write-
function Card({username,btnText})…
If we don’t pass the prop (suppose we do not pass the btnText) then it would take the
default value. To write the default value we write-
function Card({username,btnText=”visit Me”})
Conclusion: We learned about tailwind,props ,how to make components ,how to pass
default values ,etc.

REACT FOUNDATION OVER