Updated Assignment file for all chapters

Chapter 01 - Inception/Assignment.md

@@ -3,35 +3,35 @@
 
 
 ## Theory -
-- What is Emmet?
-- Difference between a Library and Framework?
-- What is CDN? Why do we use it?
-- Why is React known as React?
-- What is crossorigin in script tag?
-- What is difference between React and ReactDOM?
-- What is difference between react.development.js and react.production.js files via CDN?
-- What is async and defer?
+- What is `Emmet`?
+- Difference between a `Library and Framework`?
+- What is `CDN`? Why do we `use` it?
+- Why is `React known as React`?
+- What is `crossorigin in script tag`?
+- What is difference between `React and ReactDOM`?
+- What is difference between `react.development.js` and `react.production.js` files via CDN?
+- What is `async and defer`?
 
 
 ## Coding -
-- Set up all the tools in your laptop
-    - VS Code
-    - Chrome
-    - Extensions of Chrome
-- Create a new Git repo
-- Build your first Hello World program using,
-    - Using just HTML
-    - Using JS to manipulate the DOM
-    - Using React
-        - use CDN Links
-        - Create an Element
-        - Create nested React Elements
-        - Use root.render
-- Push code to Github (Theory as well as code)
-- Learn about Arrow Functions before the next class
+- Set up all the `tools in your laptop`
+    - `VS Code`
+    - `Chrome`
+    - `Extensions of Chrome`
+- Create a `new Git repo`
+- Build your `first Hello World` program using,
+    - Using `just HTML`
+    - Using `JS to manipulate the DOM`
+    - Using `React`
+        - use `CDN Links`
+        - Create `an Element`
+        - Create `nested React Elements`
+        - Use `root.render`
+- `Push code to Github` (Theory as well as code)
+- Learn about `Arrow Functions` before the next class
 
 
 ## References:
 
 - https://beta.reactjs.org/apis/react/createElement
-- https://www.youtube.com/watch?v=IrHmpdORLu8
+- https://www.youtube.com/watch?v=IrHmpdORLu8

Chapter 02 - Igniting our App/Assignment.md

@@ -4,36 +4,37 @@
 
 ## Theory Assignment:
 - What is `NPM`?
-- What is `Parcel/Webpack`? Why do we need it?
+- What is `Parcel/Webpack`? Why `do we need it`?
 - What is `.parcel-cache`
 - What is `npx` ?
-- What is difference between `dependencies` vs `devDependencies`
-- What is Tree Shaking?
-- What is Hot Module Replacement?
-- List down your favourite 5 superpowers of Parcel and describe any 3 of them in your
+- What is `difference` between `dependencies` vs `devDependencies`
+- What is `Tree Shaking`?
+- What is `Hot Module Replacement`?
+- List down your `favorite 5 superpowers of Parcel` and `describe any 3` of them in your
 own words.
-- What is `.gitignore`? What should we add and not add into it?
-- What is the difference between `package.json` and `package-lock.json`
+- What is `.gitignore`? What should `we add` and `not add` into it?
+- What is the `difference` between `package.json` and `package-lock.json`
 - Why should I not modify `package-lock.json`?
-- What is `node_modules` ? Is it a good idea to push that on git?
+- What is `node_modules` ? Is it a `good idea to push that on git`?
 - What is the `dist` folder?
 - What is `browserlists`
-- Read about dif bundlers: vite, webpack, parcel
-- Read about: ^ - caret and ~ - tilda
-- Read about Script types in html (MDN Docs)
+- Read about `dif bundlers`: `vite`, `webpack`, `parcel`
+- Read about: `^` - `caret` and `~` - `tilde`
+- Read about `Script types in html` (MDN Docs)
 
 
 ## Project Assignment:
-- In your existing project
-    - intialize `npm` into your repo
+- In your `existing project`
+    - initialize `npm` into your `repo`
     - install `react` and `react-dom`
-    - remove CDN links of react
-    - install parcel
-    - ignite your app with parcel
-    - add scripts for “start” and “build” with parcel commands
+    - `remove CDN` links of `react`
+    - `install parcel`
+    - `ignite your app` with parcel
+    - add scripts for `“start”` and `“build”` with `parcel commands`
     - add `.gitignore` file
     - add `browserlists`
-    - build a production version of your code using `parcel build`
+    - `build a production version` of your code using `parcel build`
+
 
 ## References:
 - [Creating your own create-react-app](https://medium.com/@JedaiSaboteur/creating-a-react-app-from-scratch-f3c693b84658)

Chapter 03 - Laying the Foundation/Assignment.md

@@ -1,37 +1,39 @@
 ## Namaste React Course by Akshay Saini
 # Chapter 03 - Laying the Foundation
 
+
 ## Topics
-- JSX
-- React.createElement vs JSX
-- Benefits of JSX
-- Behind the Scenes of JSX
-- Babel & parcel role in JSX
-- Components
-- Functional Components
-- Composing Components 
+- `JSX`
+- `React.createElement` vs `JSX`
+- `Benefits of JSX`
+- `Behind the Scenes of JSX`
+- `Babel` & `parcel` role in JSX
+- `Components`
+- `Functional Components`
+- `Composing Components` 
 
 
 ## Theory Assignment:
 - What is `JSX`?
 - Superpowers of `JSX`.
-- Role of type `attribute` in script tag? What options can I use there?
+- Role of type `attribute` in script tag? What `options can I use` there?
 - `{TitleComponent}` vs `{<TitleComponent/>}` vs `{<TitleComponent></TitleComponent>}` in `JSX`.
 
 
 ## Coding Assignment:
-- Create a Nested header Element using React.createElement(h1,h2,h3 inside a div with class "title")
-    - Create the same element using JSX
-    - Create a functional component of the same with JSX
-    - Pass attribute into the tag in JSX
-    - Composition of Component (Add a component inside another)
+- Create a `Nested header Element` using `React.createElement`(h1,h2,h3 inside a div with class "title")
+    - Create the `same element using JSX`
+    - Create a `functional component of the same with JSX`
+    - `Pass attribute` into the tag in `JSX`
+    - `Composition of Component` (Add a component inside another)
     - `{TitleComponent}` vs `{<TitleComponent/>}` vs `{<TitleComponent></TitleComponent>}` in JSX.
 
-- Create a Header Component from scratch using Functional Component with JSX
-    - Add a Logo on Left
-    - Add a search bar in middle
-    - Add User icon on right
-    - Add CSS to make it look nice
+- Create a `Header Component` from scratch using `Functional Component` with JSX
+    - Add a `Logo on Left`
+    - Add a `search bar in middle`
+    - Add `User icon on right`
+    - Add `CSS to make it look nice`
+
 
 ## References:
 - [Babel](https://babeljs.io/)

Chapter 04 - Talk is Cheap, show me the code/Assignment.md

@@ -1,6 +1,7 @@
 ## Namaste React Course by Akshay Saini
 # Chapter 04 - Talk is Cheap, show me the code
 
+
 ## Theory Assignment:
 - Is `JSX` mandatory for React?
 - Is `ES6` mandatory for React?
@@ -14,22 +15,24 @@
 - What is `props in React`? Ways to.
 - What is `Config Driven UI`?
 
+
 ## Coding Assignment:
 - Build a `Food Ordering App`
     - Think of a `cool name` for your app
     - Build an `AppLayout`
-    - Build a `Header Component` with Logo & Nav Items & Cart
+    - Build a `Header Component` with `Logo` & `Nav Items` & `Cart`
     - Build a `Body Component`
         - Build `RestaurantList Component`
         - Build `RestaurantCard Component`
             - Use `static data initially`
             - Make your `card dynamic`(pass in props)
-                - `Props` - passing arguments to a function - Use Destructuring & Spread operator
-            - `Render` your cards with dynamic data of restaurants
+                - `Props` - passing arguments to a function - `Use Destructuring` & `Spread operator`
+            - `Render` your cards with `dynamic data of restaurants`
             - Use `Array.map` to render all the restaurants
 
 ### PS. Basically do everything that I did in the class, in the `same sequence`. `Don't skip small things`.
 
+
 ## References:
 - [Akshay Saini Code Link](https://bitbucket.org/namastedev/namaste-react-live/src/master/)
 - [React without JSX](https://reactjs.org/docs/react-without-jsx.html)

Chapter 05 - Let's get Hooked!/Assignment.md

@@ -3,8 +3,8 @@
 
 
 ## Theory Assignment:
-- What is the difference between `Named export`, `Default export`, and `* as export`?
-- What is the importance of `config.js` file?
+- What is the `difference` between `Named export`, `Default export`, and `* as export`?
+- What is the `importance` of `config.js` file?
 - What are `React Hooks`?
 - Why do we need `useState Hook`?
 
@@ -19,5 +19,6 @@
 - Use `useState` to create a variable and `bind` it to the input box.
 - Try to make your `search bar work`.
 
+
 ## References:
 - [Akshay Saini Code Link](https://bitbucket.org/namastedev/namaste-react-live/src/master/)

Chapter 06 - Exploring the world/Assignment.md

@@ -5,11 +5,11 @@
 ## Theory Assignment:
 - What is `Microservice`?
 - What is `Monolith architecture`?
-- What is the difference between `Monolith and Microservice?
+- What is the `difference` between `Monolith and Microservice?
 - Why do we need a `useEffect Hook`?
 - What is `Optional Chaining`?
 - What is `Shimmer UI`?
-- What is the difference between `JS expression and JS statement`?
+- What is the `difference` between `JS expression and JS statement`?
 - What is `Conditional Rendering`? explain with a code example.
 - What is `CORS`?
 - What is `async and await`?
@@ -21,10 +21,10 @@
 - Play with the `developer console` by putting a `debugger` in render and `useEffect`.
 - Call an `actual API call`.
 - `Handle Error` in your `API call`.
-- Build `Shimmer UI` when data is not loaded.
-- `Render your UI` with actual API data.
+- Build `Shimmer UI` when `data is not loaded`.
+- `Render your UI` with `actual API data`.
 - Make `Search functionality` work.
-- Make a `Login Logout` button that toggles with a state.
+- Make a `Login Logout` button that `toggles with a state`.
 
 
 ## References:

Chapter 07 - Finding the Path/Assignment.md

@@ -7,16 +7,16 @@
 - What would happen if we do `console.log(useState())`?
 - How will `useEffect` behave if we `don't add` a `dependency array`?
 - What is `SPA`?
-- What is the difference between `Client Side Routing` and `Server Side Routing`?
+- What is the `difference` between `Client Side Routing` and `Server Side Routing`?
 
 
 ## Coding Assignment:
-- Add `Shimmer Effect` without installing a library.
+- Add `Shimmer Effect without installing a library`.
 - Install `react-router-dom`.
-- Create an `appRouter` and Provide it to the app.
+- Create an `appRouter` and `Provide it to the app`.
 - Create a `Home, About, and Contact Page` with Link (use child routes).
-- Make an `Error page` for routing errors.
-- Create a `Restaurant Page` with dynamic restaurant ID.
+- Make an `Error page` for `routing errors`.
+- Create a `Restaurant Page` with `dynamic restaurant ID`.
 - (Extra) - Create a `login Page` using `Formik Library`.
 
 

Chapter 08 - Let's get Classy/Assignment.md

@@ -3,13 +3,13 @@
 
 
 ## Theory Assignment:
-- How do you create `Nested Routes` react-router-dom configuration?
+- How do you create `Nested Routes react-router-dom` configuration?
 - Read about `createHashRouter`, `createMemoryRouter` from React Router docs.
-- What is the order of life cycle method calls in `Class Based Components`?
+- What is the `order of life cycle method calls` in `Class Based Components`?
 - Why do we use `componentDidMount`?
-- Why do we use `componentWillUnmount`? Show with example.
-- (Research) Why do we use `super(props)` in constructor?
-- (Research) Why can't we have the `callback function` of `useEffect async`?
+- Why do we use `componentWillUnmount`? Show with `example`.
+- (Research) Why do we use `super(props)` in `constructor`?
+- (Research) Why `can't we have` the `callback function` of `useEffect async`?
 
 
 ## Coding Assignment:
@@ -21,9 +21,9 @@
     - Use `this.setState` to update it.
     - What if there are `multiple state variables`?
     - Write a `console.log` for each lifecycle method.
-    - Play with the `console logs` to find out the correct order of their execution.
-- Create interval inside `componentDidMount`?
-    - Use `clearInterval` to fix the issue caused by the interval
+    - Play with the `console logs` to find out the `correct order of their execution`.
+- Create `interval` inside `componentDidMount`?
+    - Use `clearInterval` to `fix the issue` caused by the `interval`
 
 
 ## References:

Chapter 09 - Optimizing our App/Assignment.md

@@ -5,16 +5,17 @@
 ## Theory Assignment:
 - When and why do we need `lazy()`?
 - What is `suspense`?
-- Why we got this `error`: A component was suspended while responding to `synchronous input`. This will cause the `UI` to be replaced with a loading indicator. To fix this, updates that suspend should be wrapped with `start transition`? How does `suspense fix` this error?
+- Why we got this `error`: A component was suspended while responding to `synchronous input`. This will cause the `UI` to be replaced with a `loading indicator`. To `fix this`, `updates that suspend` should be wrapped with `start transition`? How does `suspense fix` this error?
 - `Advantages and Disadvantages` of using this `code splitting pattern`?
-- When do we and why do we need `suspense`?
+- When `do we and why do we need suspense`?
 
 
 ## Coding Assignment:
 - Create your `custom hooks`.
 - Try out `lazy and suspense`
 - Make your `code clean`.
 
+
 ## References:
 - [React Custom Hooks](https://reactjs.org/docs/hooks-custom.html)
 - [React lazy](https://beta.reactjs.org/reference/react/lazy)