jonasschmedtmann · SuryaG212001 · Feb 26, 2026 · Mar 12, 2026 · Mar 12, 2026 · Mar 26, 2026
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,7 @@
+# Ignore README files so Prettier won't reformat them
+README.md
+readme.md
+**/README.md
+**/readme.md
+**/README.MD
+**/Readme.md
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  "liveServer.settings.port": 5501,
+  "prettier.ignorePath": ".prettierignore"
+}
diff --git a/00-setup/image-1.png b/00-setup/image-1.png
diff --git a/00-setup/image-2.png b/00-setup/image-2.png
diff --git a/00-setup/image.png b/00-setup/image.png
diff --git a/00-setup/readme.md b/00-setup/readme.md
@@ -0,0 +1,55 @@
+%%quick visit to larn react:%%
+https://react.dev/learn
+
+- creating a new react app
+  https://create-react-app.dev/?ref=jonas.io
+
+- build tool vite and its setup
+  https://vite.dev/guide/?ref=jonas.io
+
+- adding react urlt o an html document
+  https://gist.githubusercontent.com/gaearon/0275b1e1518599bbeafcde4722e79ed1/raw/db72dcbf3384ee1708c4a07d3be79860db04bff0/example.html
+
+**react**:
+
+- why does forntend frameworks react exist:
+
+before 2010 all the websites are rendered on the frntend and the backend of the app has to assembeld before hand from the application and the browser will only just paint the output to teh web browser. this is called serevr side rendering
+![alt text](image.png)
+eg: this concept was used in wordpress. tehse applications were just build to have some basic hovering features and a few tabs as and when people started writing more js code this lead to the current single page web applications
+
+these web application does rendering on the client side i.e on the broser side and not on the server side.
+here teh browser will fetch teh data from teh apis
+![alt text](image-1.png)
+
+- these single page applications though have multiple tabs, links , forms and everything but still technically user will be in the same page and hence teh name
+  **single page apps with vanilla js**
+- font end is about handling data+displaying data in user interface and ui needs to be in sync with the data. this is very hard problem to solve
+- each piece of data is in itself a piece of state. we have to maintain the persistence amoung the data and we need to have some consistency.
+- if we are using vanilla js , jquery then it requires a lot of direct dom manipulation and traversing. then the code will have very difficult code to understand
+- data state is usually stored in dom shared across entire app in here. hence it creates many bugs thats why we go for frameworks like react, angular and vue
+
+- these frameworks take teh syncing of data from us and it syncs teh data and the ui
+- different frameworks have a different approach for doing this. these frameworks have their own structured way of wrinting this
+
+what is reat?
+
+- react is a declarative component based state driven javascript library for building user interfaces created by facebook
+- component based rendering- react basically takes all teh components and renders tehm on the web page . componnets are teh basic blocks of component
+- complex ui is built using simpler components
+- we describe how components look like and how they work using a declarative syntax called jsx
+- decalartive means telling what the component should look like based on teh current data/state
+- react is abstraction away form dom. here we will never even touch the dom
+- jsx: is a syntax that combines the html, css, js as well as referencing otehr components
+
+- if we say we never touch dom how we update the page based on teh cahnge . that is why we have the state driven architecture
+- based on teh current sattse of teh app we first render them to the ui and the broser uses teh components written with jsx.
+- once if tehre is a change in the current state of the components then react will re-render the ui
+  ![alt text](image-2.png)
+
+- react is just a library we need some otehr frameworks like next.js, remix to do the api integration and data fetching. these are also built on top of react
+
+- fiber tree, vitual dom, and few otehr techniques are used by react in place of actual odm manipulation which is often
+
+eslint, prettier are the extensions
+color theme: one monokai
diff --git a/01-pure-react/starter/index.html b/01-pure-react/starter/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>hello react!</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <!-- including react manually rather than using a build tool-->
+    <script
+      crossorigin
+      src="https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.production.min.js"
+    ></script>
+    <!-- this is the core react component that deals with the dom component management-->
+    <script
+      crossorigin
+      src="https://cdn.jsdelivr.net/npm/react-dom@18.2.0/umd/react-dom.production.min.js"
+    ></script>
+    <!-- used for rendering react -->
+    <script>
+      function App() {
+        // const time = new date().toLocaleTimeString();
+        // creating a state
+        const [time, setTime] = React.useState(new Date().toLocaleTimeString());
+
+        //using an effect to set up a timer to indicate what is teh state every second
+        React.useEffect(function () {
+          setInterval(function () {
+            setTime(new Date().toLocaleTimeString());
+          }, 1000);
+        }, []);
+        // app is a component in our react js . all components are started with a capital letter
+        return React.createElement(
+          "header",
+          null,
+          `Hello React! the time is ${time} `
+        ); //creating a header element inside our dom
+      }
+      //   after declaring a component lets render it
+      const root = ReactDOM.createRoot(document.getElementById("root"));
+      root.render(React.createElement(App));
+    </script>
+  </body>
+</html>
+<!-- pure react -->
diff --git a/01-pure-react/starter/readme.md b/01-pure-react/starter/readme.md
@@ -0,0 +1,14 @@
+react js:
+using create-react-app:
+
+- complete starter kit to create a react applications
+- it has eslint, prettier, jest(a testing tool) already set up
+- but this starter is decommisioned as it uses slow and outdated technologies in its web pack
+
+vite:
+
+- a modern build tool that has a templete to create a react application
+- here we have to set up the esling and other tools manually
+- it has extremely fast hot modulue replacement and bundling
+
+- we can also create a reacte app using remix or next.js which has solutions for api, clinet side rendering
diff --git a/02-JS-review/starter/readme.md b/02-JS-review/starter/readme.md
@@ -0,0 +1,94 @@
+quokka- a extension to see teh output of our short scripts in vscode itself rather than a html browser page
+
+destruturing arrays:
+arr=[[1,2,3],[4,5,6]]
+[el1,el2]=arr
+arr1=[{
+name:"surya",
+address:"hyderabad",
+marks:[1,2,3]
+},
+{
+name:"ubi",
+address:"chennai",
+marks:[1,2,3]
+}]
+[el1:{name,marks: [mark]}]=arr1
+
+destructuring objects:
+obj1={
+name:"surya",
+address:"hyderabad",
+marks:[1,2,3],
+details:{
+worksat: "optum"
+experience:"2"
+
+}
+}
+{details: {experice:surya_experince}}=obj1
+
+// creating a new property and overridding an existing property while doing a copy of an object
+obj2={...obj1,name:"ubi"}
+
+- name of the object will be updated
+
+- rest operator:
+- to take the rest of teh elements from the array or objects
+  spread operator:
+- if we want to create a new object or array using all the elements of the array/object then we use the spread operator
+- it takes individual elements of the obj/ array
+
+array methods:
+map:
+
+- it returns a new array after applying the lambda function on it. here the arrow function is used for a lambda fuction
+  const essentialData1 = books.map((book) => ({
+  title: book.title,
+  author: book.author,
+  }));
+
+filter:
+
+- filters out based on a condition
+- it also has a callbasck function and it has a codition. if the condition is true then the particular element gos into the new array
+  const longBooks = books.filter((book) => book.pages > 500);
+
+reduce:
+
+- can implemet other mehtods too like map, filter and sort
+  const pagesAllBooks = books.reduce((acc, book) => (acc = book.pages), 0);
+
+sort:
+
+- can be used to sort the array
+- it has a call back function which when returns negative then it will do a ascending ordering and if it retunrs a positive value then it will do a descending function
+- note that sort does not create a new array it does sorting in place
+
+promises:
+
+- inorder to fetch data from teh api we use the fetch function. using this we can test the fetch api
+- if we are fetching something form an api then it will take some time but the compiler will not wait for it.
+- inorder to wait for the completion we have to wait until the promise changes its state to successful. to maintain the async nature
+- the fetch function returns a promise. we use the then function on the promises to do a callback and provide something
+- note that jonas will still be executed before the result comes from tyhe promise
+  eg:
+  console.log(fetch("https://jsonplaceholder.typicode.com/todos")));
+  fetch("https://jsonplaceholder.typicode.com/todos").then((res=>res.json()).then((data)=>console.log(data));
+  console.log("jonas");
+
+- js will move to teh next line immediately way before the data from any promise comes by. but in the async function it will wait till the fecth function gets teh data by using the keyword await
+
+//async/await
+async function getTodos(){
+const res=await fetch("https://jsonplaceholder.typicode.com/todos")
+const data= await res.json();
+console.log(data)
+
+}
+getTodos()
+console.log("jonas")
+
+- js. will wait only in the places where we have the await keyword inside the async function
+- the async function always returns a promise always
+- the use of teh async function is to set the satte variable