Skip to content

Commit 4ec6643

Browse files
vishalsingh2972vishalsingh2972
committed
set
1 parent 88d4764 commit 4ec6643

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

82 files changed

+10857
-0
lines changed

‎Namaste React/E1-Inception/Code/README.md

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
## Episode 01 - Inception
2+
3+
**Detailed Mention of Topics and its Timestamps according to Namaste React Web Series**
4+
5+
```sh
6+
00:05:25 - Visual Code Setup
7+
00:10:00 - Hello World Program by using plain HTML
8+
00:14:25 - Hello World Program using Vanilla JavaScript
9+
00:18:00 - CDN links discussion
10+
00:32:00 - Hello World Program in React
11+
- Separately writing JS code within <script> tags in HTML
12+
- React.createElement explanation
13+
00:54:50 - Nested Elements
14+
01:02:00 - Array of children
15+
01:05:00 - Need of JSX
16+
- Rearrangement of CDN files
17+
01:19:00 - React Library v/s Framework discussion
18+
01:21:00 - Advantages/Specialties of React
19+
01:23:00 - Session Recap
20+
```

‎Namaste React/E1-Inception/Code/React_index.html

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="./index.css">
8+
<title>Namaste React with React</title>
9+
</head>
10+
11+
<body>
12+
<h1>Hello from top of root</h1>
13+
<div id="root"></div>
14+
<div id="root2"></div>
15+
<div id="root3">
16+
<h1>bewakoof</h1>
17+
<h3>bittu</h3>
18+
</div>
19+
<h1>Hello from bottom of root</h1>
20+
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
21+
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
22+
23+
<script src="./app.js"></script>
24+
</body>
25+
26+
</html>

‎Namaste React/E1-Inception/Code/Vanilla_index.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Namaste using JS</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
11+
<script>
12+
const heading = document.createElement("h1");
13+
heading.innerHTML = 'Hello from inside JavaScript tag';
14+
15+
const root = document.getElementById("root");
16+
root.appendChild(heading);
17+
</script>
18+
19+
</body>
20+
</html>

‎Namaste React/E1-Inception/Code/app_1.js

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
// const heading1 = React.createElement(
2+
// "h1",
3+
// {id: "name", xyz: "abc" },
4+
// "Hello from inside React!"
5+
// );
6+
7+
// console.log(heading1);
8+
// console.log(typeof heading1); //heading1 is a react element or javascript object
9+
// const root = ReactDOM.createRoot(document.getElementById("root"));
10+
// root.render(heading1);
11+
12+
13+
//Nested Divs in React
14+
const parent = React.createElement("div", {id: "parent"},
15+
React.createElement("div", {id: "child"},[ //for adding 2 or more elements as siblings inside an element we use Arrays
16+
React.createElement("h1", {id: "grandchild", key: "h1"}, "I am h1 tag!"),
17+
React.createElement("h2", {id: "grandchild2", key: "h2"}, "I am h2 tag!")
18+
])
19+
);
20+
21+
console.log(parent);
22+
console.log(typeof parent); //parent is a react element or javascript object
23+
const root2 = ReactDOM.createRoot(document.getElementById("root2"));
24+
//root.render(parent);
25+
root2.render(parent);
26+
//ReactDOM.createRoot(document.getElementById("root2")).render(parent);
27+
28+
//ReactElement(Object) => HTML(Browser Understands)
29+
//In React, the React.createElement function creates lightweight JavaScript objects that describe the UI components you want to display. These objects are called React elements and act as blueprints for the actual HTML elements. When you use ReactDOM.render, React takes these blueprints and translates them into real HTML elements within the browser's Document Object Model (DOM). This process involves creating the necessary HTML elements with their attributes and inserting them into the designated container element in your HTML, making them visible on the webpage.
30+
31+
32+
//Arrays inside Arrays
33+
const parent2 = React.createElement("div", {id: "parent"},[
34+
React.createElement("div", {id: "child"},[
35+
React.createElement("h1", {id: "grandchild1", key: "h1"}, "Hare"),
36+
React.createElement("h2", {id: "grandchild2", key: "h2"}, "Krishna")
37+
]),
38+
React.createElement("div", {id: "child2"},[
39+
React.createElement("h1", {id: "grandchild3", key: "h1"}, "Luv"),
40+
React.createElement("h2", {id: "grandchild4", key: "h2"}, "Kush")
41+
])
42+
]);
43+
44+
console.log(parent2);
45+
console.log(typeof parent2);
46+
const root3 = ReactDOM.createRoot(document.getElementById("root3"));
47+
root3.render(parent2);
48+
49+
//even after using React, parent2 is still very untidy and can get difficult to understand as the code gets more complicated, to solve this we use JSX
50+
//React - library - can work independently in a small portion of the app/code

‎Namaste React/E1-Inception/Code/index.css

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
#name{
2+
color: red;
3+
}
4+

‎Namaste React/E1-Inception/README.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
## E1 - Topics coverd in this session:
2+
3+
- React DOM and React
4+
- Emmet
5+
- VS Code Extensions
6+
- Use React as a library

‎Namaste React/E1-Inception/Theory/Written Notes 1.pdf

5.55 MB
Binary file not shown.

‎Namaste React/E1-Inception/Theory/Written Notes 2.pdf

1.52 MB
Binary file not shown.

0 commit comments

Comments
 (0)