Merge pull request #221 from developedbysaad/copy-lms-content-to-repo

Update scripts for the video lessons to be made

README.md

@@ -133,14 +133,13 @@ This work is licensed under a
 
 - [Understanding useEffect](./react-hooks/use-effect/understanding-use-effect/README.md)
 - [Async code with useEffect](./react-hooks/use-effect/async-code-use-effect/README.md)
-- Making first API call from useEffect hook
 
 ### Introducing localStorage
 
 ### Custom Hooks
 
 - [Overview of custom hooks](./react-hooks/custom-hooks/overview/README.md)
-- [Process of building custom hooks](./react-hooks/custom-hooks/build-custom-hook/README.md)
+- [Building and using custom hooks](./react-hooks/custom-hooks/build-custom-hook/README.md)
 
 ### Milestone
 
@@ -187,7 +186,7 @@ This work is licensed under a
 ### Revamping the app UI
 
 - [Headless UI and designing layout](./react-app-state/app-ui/README.md)
-- [Redefining app routes](./react-app-state/app-ui/README.md)
+- [Redefining app routes](./react-app-state/redifining-app-routes/README.md)
 
 ### Using Context
 

class-components/creating-task-component/README.md

@@ -1,6 +1,4 @@
-# Script
-
-In this video, you will learn about class based components. Though this is not a recommended approach for writing React components anymore, but still it is good to know about them.
+In this lesson, you will learn about class-based components. Though this is not a recommended approach for writing React components any more, but still, it is good to know about them.
 
 First, let's scaffold a React application using Vite with TypeScript support. We can do that by providing the following command once we are inside the `wd301` folder.
 
@@ -18,15 +16,17 @@ It will create a folder named `smarter-tasks` and install necessary packages and
 cd smarter-tasks
 ```
 
+> Note: Install Tailwind to `smarter-tasks` application similar to how you added it to `hello-react` application in [this lesson](https://www.pupilfirst.school/targets/19309).
+
 If you look in the `src` folder, you can see two TypeScript files have been created - `main.tsx` and `App.tsx`
 
 `.tsx` is the TypeScript equivalent of JSX. It is JSX but with types.
 
-In earlier versions of React, only class based components could have a state associated with it. So if we need to keep track of changes or provide some useful functionality, class based component was the only way to go.
+In earlier versions of React, only class-based components could have a state associated with it. So if we need to keep track of changes or provide some useful functionality, a class-based component was the only way to go.
 
 We use ES6 class to define a component.
 
-A component have to inherit from `React.Component` class. We will next create a `Task` component.
+A component has to inherit from the `React.Component` class. We will next create a `Task` component.
 
 Let's create a new file `Task.tsx`. When creating a component, you have to capitalize the first character.
 
@@ -46,7 +46,7 @@ class Task extends React.Component {
 }
 ```
 
-Once you define a component, you will have to export it, so that, it can be used in other files. After all we create components to reuse it in other parts of our project.
+Once you define a component, you will have to export it, so that, it can be used in other files. After all, we create components to reuse it in other parts of our project.
 
 ```tsx
 export default Task;
@@ -82,32 +82,8 @@ Let's save the file. And run our app. Open the terminal, change to `smarter-task
 npm run dev
 ```
 
-This command will compile the TypeScript and will be served on port 3000. Let's visit the address `localhost:5173`.
+This command will compile the TypeScript and will be served on port 5173. Let's visit the address `localhost:5173`.
 
 We can see, `Buy groceries` text is rendered correctly.
 
 See you in the next lesson.
-
-# Text
-
-To create a new React project using TypeScript template, use the command
-
-```sh
-npx create-vite my-awesome-app --template react-ts
-```
-
-A React component should have it's first character capitalised. In earlier versions of React, only class based components could have a state associated with it. You can create a class based component by extending `React.Component` class. This is not the recommended approach anymore.
-
-You can create a `Task` component like below:
-
-```tsx
-import React from "react";
-
-class Task extends React.Component {
-  render() {
-    return <div>Buy groceries </div>;
-  }
-}
-
-export default Task;
-```

class-components/event-handler/README.md

@@ -1,4 +1,4 @@
-# Script - part 1
+## Handling form submissions
 
 In this lesson, you will learn how to handle form submissions.
 
@@ -13,11 +13,11 @@ We can handle a form submission by passing a submission handler as prop to the `
 </form>
 ```
 
-If we hover over `onSubmit` prop, TypeScript compiler shows us the type of function it expects. Let's copy the type. And use it to annotate the submission handler.
+If we hover over the `onSubmit` prop, the TypeScript compiler shows us the type of function it expects. Let's copy the type. And use it to annotate the submission handler.
 
 > Action: copy `React.FormEventHandler<HTMLFormElement>` from VSCode intellisense.
 
-Now, let's create our handler. Also let's override the default behaviour of browser submitting the form by invoking `preventDefault()` on the evet.
+Now, let's create our handler. Also let's override the default behaviour of browser submitting the form by invoking `preventDefault()` on the event.
 
 ```tsx
 addTask: React.FormEventHandler<HTMLFormElement> = (event) => {
@@ -49,7 +49,7 @@ See you in the next video.
 
 # Script - part 2
 
-Now, how do we get the data that user has typed in the input field? For that we will have to learn about controlled and uncontrolled components.
+Now, how do we get the data that the user has typed in the input field? For that, we will have to learn about controlled and uncontrolled components.
 
 > Action: open https://reactjs.org/docs/uncontrolled-components.html
 
@@ -84,19 +84,19 @@ addTask: React.FormEventHandler<HTMLFormElement> = (event) => {
 };
 ```
 
-If you hover the mouse over `this.inputRef.current?.`, you can see that the value of `current` can be null or an element. So TypeScript nudges us to access the value using `?.` operator.
+If you hover the mouse over `this.inputRef.current?.`, you can see that the value of `current` can be null or an element. So TypeScript nudges us to access the value using the `?.` operator.
 
 Save the file. And reload the page. Now type in some text in the input field and click the button.
 
 > Action: type `hello` in the input field and submit the form
 
 You can see `Submitted the form with hello` getting printed on to the console.
 
-This was uncontrolled component. In general, a controlled component is preferred. By controlled component, it means, the state of the component is managed by react.
+This was an uncontrolled component. In general, a controlled component is preferred. By controlled component, it means, the state of the component is managed by react.
 
 > Action: open https://reactjs.org/docs/forms.html#controlled-components
 
-We will use `setState` and `eventHandlers` to manage the input field. Let's edit the `TaskForm` component to use a state for input field. Let's remove the `refs`.
+We will use `setState` and `eventHandlers` to manage the input field. Let's edit the `TaskForm` component to use a state for the input field. Let's remove the `refs`.
 
 > Action: delete the refs.
 
@@ -180,21 +180,21 @@ Then use this handler on the input field.
 And finally, we've to update our `addTask` method as well to print the `title` value from component-level state.
 
 ```tsx
-  addTask: React.FormEventHandler<HTMLFormElement> = (event) => {
-    event.preventDefault();
-    console.log(`Submitted the form with ${this.state.title}`);
-  };
+addTask: React.FormEventHandler<HTMLFormElement> = (event) => {
+  event.preventDefault();
+  console.log(`Submitted the form with ${this.state.title}`);
+};
 ```
 
-Save the file. Now, we are able to type in the input field and value gets updated accordingly.
+Save the file. Now, we can type in the input field and the value gets updated accordingly.
 
 See you in the next video
 
 # Script - part 3
 
-In this video, we will connect together different components we created and finally be able to add tasks to our task list.
+In this video, we will connect different components we created and finally be able to add tasks to our task list.
 
-We must first create a `TaskApp` component. Create a file named `TaskApp.tsx` with following content. It will have a state to hold the list of tasks added.
+We must first create a `TaskApp` component. Create a file named `TaskApp.tsx` with the following content. It will have a state to hold the list of tasks added.
 
 ```tsx
 import React from "react";
@@ -213,16 +213,14 @@ class TaskApp extends React.Component<TaskAppProp, TaskAppState> {
   }
 
   render() {
-    return (
-      <div></div>
-    );
+    return <div></div>;
   }
 }
 
 export default TaskApp;
 ```
 
-Next, we will add a method `addTask`, which will take a type `TaskItem` as first argument and adds it to the current state.
+Next, we will add a method `addTask`, which will take a type `TaskItem` as the first argument and add it to the current state.
 
 ```tsx
 addTask = (task: TaskItem) => {
@@ -247,7 +245,7 @@ import TaskList from "./TaskList";
     return (
       <div>
         <TaskForm />
-        <TaskList tasks={this.state.tasks} />        
+        <TaskList tasks={this.state.tasks} />
       </div>
     );
   }
@@ -281,7 +279,7 @@ render() {
   }
 ```
 
-Next, let's edit the `TaskForm` component to accept `addTask` as a prop from `TaskApp` component.
+Next, let's edit the `TaskForm` component to accept `addTask` as a prop from the `TaskApp` component.
 
 > Action: Open `TaskForm.tsx` and update with following code.
 
@@ -304,13 +302,13 @@ addTask: React.FormEventHandler<HTMLFormElement> = (event) => {
 };
 ```
 
-What we do here is, we invoke the `addTask` method which is passed via prop from parent component ie, `TaskApp` with the data user entered. Then we clears the state with empty task title.
+What we do here is, we invoke the `addTask` method which is passed via prop from the parent component, i.e., `TaskApp` with the data user entered. Then we clear the state with empty task title.
 
-Save the file. We can see TypeScript compiler is complaining about missing props. Let's fix that.
+Save the file. We can see the TypeScript compiler is complaining about missing props. Let's fix that.
 
 > Action: switch to `TaskApp.tsx`
 
-Pass the `addTask` method as prop to `TaskForm` component.
+Pass the `addTask` method as prop to the `TaskForm` component.
 
 ```tsx
   render() {
@@ -337,7 +335,7 @@ Pass the `addTask` method as prop to `TaskForm` component.
   }
 ```
 
-Now, only piece remaining is using `TaskApp` component in our `App` component.
+Now, the only piece remaining is using the `TaskApp` component in our `App` component.
 
 > Action: switch to `App.tsx` and updte with following code.
 
@@ -353,11 +351,11 @@ function App() {
 }
 ```
 
-Save the file. Let's check the app in browser.
+Save the file. Let's check the app in the browser.
 
 > Action: visit http://localhost:5173 and add few entries
 
-We can see the items are getting added to our list. Let's also add the custom `TaskCard` css class from level 1 to our items.
+We can see the items are getting added to our list. Let's also add the custom `TaskCard` CSS class from level 1 to our items.
 
 > Action: Switch to `Task.tsx` and add styling from level 1.
 
@@ -375,7 +373,7 @@ render() {
           Due Date:
         </p>
         <p className="text-sm text-slate-500">
-          Description: 
+          Description:
         </p>
       </div>
     );

class-components/rules-of-state/README.md

@@ -1,6 +1,4 @@
-# Script
-
-In this video, you will learn how to manage and update state in a class based component.
+In this lesson, you will learn how to manage and update state in a class-based component.
 
 We initialize state in the constructor. This is the only place where we can directly mutate or change the `this.state` variable.
 
@@ -10,15 +8,15 @@ Rather than adding the list of tasks in constructor, let's use `componentDidMoun
 
 > Action: Open `TaskList.tsx`
 
-Let's add the `componentDidMount` method.
+Let's add the `componentDidMount` method in `TaskList.tsx` file.
 
 ```tsx
 componentDidMount() {
 
 }
 ```
 
-Then let's use `setState` method to update the state of the component.
+Then let's use the `setState` method to update the state of the component.
 
 > Action: cut the initialization value from constructor and paste it in `componentDidMount`
 
@@ -30,9 +28,7 @@ componentDidMount() {
 }
 ```
 
-Save the file and the page gets refreshed.
-
-> Action: switch to browser.
+Save the file, and you will notice that the `localhost:5173` page gets refreshed.
 
 It works as before. Now, let's see if directly mutating the state works or not.
 
@@ -48,7 +44,7 @@ componentDidMount() {
 
 Save the file, and we can see, already a warning saying not to mutate the state directly.
 
-If we look at `localhost:3000`, we only see a blank page. The tasks didn't get rendered. So, lets revert to use `setState`.
+If we look at `localhost:5173`, we only see a blank page. The tasks didn't get rendered. So, lets revert to use `setState`.
 
 ```tsx
 componentDidMount() {
@@ -58,7 +54,7 @@ componentDidMount() {
 }
 ```
 
-Now, if we open the browser console, we can see an error. React is complaining that "item in list should have a unique key". Let's fix that. We will use the index as the key for an item. This is okay in this simple example, we should ideally use a unique id, like the primary key from database while rendering a list of components.
+Now, if we open the browser console, we can see an error. React is complaining that "item in a list should have a unique key". Let's fix that. We will use the index as the key for an item. This is okay in this simple example, we should ideally use a unique id, like the primary key from the database while rendering a list of components.
 
 ```tsx
 render() {
@@ -68,7 +64,7 @@ render() {
 
 The state updates are asynchronous in nature. React might optimize and batch different `setState` calls.
 
-So if we have to update the state based on it's previous state, we should second syntax of `setState`:
+So if we have to update the state based on its previous state, we should second syntax of `setState`:
 
 ```tsx
   componentDidMount() {
@@ -82,24 +78,3 @@ So if we have to update the state based on it's previous state, we should second
 In this syntax, we get the current state and props as first and second argument.
 
 Let's save the file, and visit `localhost:5173`. The same list is rendered.
-
-See you in the next lesson.
-
-## Text
-
-We can use `setState` to update the state of the component.
-
-```tsx
-this.setState({
-  tasks: [{ title: "Pay rent" }, { title: "Submit assignment" }],
-});
-```
-
-React will batch and optimize `setState` calls. So, if next state is dependent on existing state, you should use the second syntax of `setState` which accepts a function.
-
-```tsx
-const tasks = [{ title: "Pay rent" }, { title: "Submit assignment" }];
-this.setState((state, props) => ({
-  tasks,
-}));
-```