The overview for the Typescript Course is collaborated at:
https://docs.google.com/document/d/1a9J3HE0J19ScxQIoI7VH0ffl7YsQ6meDoljBemongwo/edit?usp=sharing
In this lesson, the student will be walked through the installation of NodeJS, VS Code, VS Code Extension and the React Dev Tools. Students are also recommended to use a Unix environment - Mac, Linux or WSL
In this lesson, the student would learn about the basic types available in Typescript and how to use them. They would also be introduced to Interfaces and how they are needed to define objects in typescript. We recommend installing the typescript compiler to test out code snippets in typescript.
In this lesson, students are walked through bootstrapping a new React project using the Create React App. They are also introduced to setting up TailwindCSS in the CRA project. At the end of this lesson they have a setup with React and Tailwind that would be used in the rest of the course.
Here, students are asked to ignore the App.tsx file that was generated by CRA and shown how the ReactDOM.render() function works. We explain how the ReactDOM.render updates a virtual DOM and how the virtual DOM is compared to the real DOM. We also explain how ReactDOM.render is the equivalent of document.getElementById('root').appendChild(element) on the real DOM.
This is more of a conceptual lesson. Through this lesson the student is taught the differences between the DOM and the virtual DOM and how react reconciles between the two.
In this lesson students are introduced to JSX and how props are used to pass data to components and how JSX is just a syntax similar to HTML that in-effect calls the React Raw APIs
In this lesson students are introduced to the concept of nesting components and how they are used to create a tree of components. Students are also taught to use Arrays and Objects to separate the rendering of a component from the data that is passed to it. Here we would also teach them to use the key prop to help React identify what components to re-render.
In this lesson students we explain how React expects each component to have a single root element. We also explain how React Fragments are used to group multiple elements into a single component. The students would be recommended to use Fragments only if they really need to group multiple elements into a single component.
Throughout this level, students will be walked through the process of bootstrapping a React app and building static UI components.
Milestone: Setup a new templated CRA TS App which would serve as the starting point for their next level and Push to Github.
In this lesson students are walked through building a simple class based Counter component. Students are also shown how the React state is asynchronous and shown an example of how simultaneous updates to the state can throw it out of sync and how this can be solved by passing a function into the setState instead of the value.
In this lesson students are taught about how the class based react components portray the complete lifecycle of a React component and when each of the methods of a class based component are called. The constructor, render, getDerivedStateFromProps, componentDidMount, componentDidUpdate, and componentWillUnmount methods are explained with simple console.log statements. The methods for error handling are also explained and emphasized given there is no equivalent hook in React.
From this lesson on, the course would focus on the usage of Functional React Components. Students are shown how to create a functional component and use the React State using the useState hook. The counter component is also refactored to use the useState hook.
In this lesson the students are walked through building a component that renders an Array into a form of with arr.length <input> tags. An add button would be used to add an additional field to the form with a generated name such as Input ${arr.len + 2}.
In this lesson the students are taught to use the onChange prop to receive the events from an uncontrolled form component. An <input> tag is used to collect the title for the new Form Field to be added to the array instead of using a generated name like in the previous lesson.
In this lesson students learn how to use the value prop in order to make a controlled component, thereby being able to change the text value of an <input> text using code. In order to allow clearing the text on adding a new field.
Through this level, students learn regarding React States and React Component Lifecycles and Create simple forms that store data to state
Milestone: Make each <input> rendered from the array a controlled element and store the value of the input also in the array state.
Through this lesson students are taught to pass custom functions down the component tree as props. The need for making callback functions to modify the state of Parent Components is emphasized and the notation of using CB to denote callback functions are specified.
This lesson is to emphasize the importance of understanding that React state is Asynchronous. Different examples are shown to demonstrate how State should be modified based on the nature of the state variable.
Through this lesson, the student learns about the use of the localStorage API to store data in the browser. The different methods used to set and get data from localStorage are explained and demonstrated.
Through this lesson the student is taught to use the useEffect hook to set a timeout. The timeout is set to run after the component is mounted and then cleared after the component is unmounted using a cleanup function.
Through this lesson the student is taught to use the useRef hook to create a reference to a DOM element. The reference is used to access the DOM element in the component. The use of the useRef hook to store mutable values is also demonstrated.
This lesson gives students an introduction to create their own custom hooks. The use of custom hooks is demonstrated using some commonly used hooks such like useClickOutside
Through this level, students learn to manage react state better and to fire side-effects based on state changes. Students would also learn to use localStorage to preserve the state across browser sessions.
Milestone: Make the Application capable of saving all changes to localStorage using a custom hook implementation wrapping over useState and localStorage.
In this lesson we introduce the concept of React Router and how it is used to create a simple app with multiple routes. We setup hookrouter and add a landing page to the Form Builder App.
In this lesson we demonstrate the use of dynamic URLs using path params. The app is modified to support multiple forms/quizzes. Each Quiz would have an ID that is used to create a unique URL.
Through this lesson we explain how query params can be received in React Components using the useQueryParams hook. A simple search is built to search across the different forms that are saved in localstorage.
Through this lesson we explain how to programmatically navigate to a different route using the navigate function. Some navigation <Button>s are created to demonstrate this.
Through this lesson the students are taught to use <A href> that's provided by hookrouter to create a link to another route and how this works like the navigate function over a standard a tag which performs a normal HTTP GET request.
Through this level, students learn to use static and dynamic routes to improve the access to the different quizzes in the application.
Milestone: Configure the router such that each quiz would have a public link that can be shared and receive form submissions. The Components for Creating and Managing Forms should be protected using a static username and password.
This is another conceptual lesson in which we'd explain the importance of a Type system and it's advantages. We'd change the type of the form state and explain how the compiler helps in refactoring the code
Through this lesson students are taught to understand types for functions and demonstrate how we use default and optional parameters. We also go through the types involved in event handlers in better depth, and how we pass functions into functions.
In this lesson the students are taught to use Union Types combining multiple types. We upgrade our form to support more than just text inputs as we demonstrate this.
Through this lessons we show examples of where the compiler can infer the type of a variable. And where it messes up. We also show examples of how Tyepscript sometimes infer unions and how speciying types are better and safer in most cases.
Through this level, students are introduced to the different types that are available in typescript and build custom interfaces for their requirements.
Milestone: Make the form capable of handling inputs beyond text fields. Make the form builder capable of fields of all HTML form inputs.
In this lesson we go into better depth about the use of interfaces and how interfaces can be inherited to make more specific interfaces for our components modelled around a base interface.
In this lesson we explain how generics are used in typescript and how they can be used to make code more reusable. We also explain how our useState hook is used to create React State around different types.
In this lesson we explain how actions and reducers are used and refactor our onChange functions to use a new Reducer thus demonstrating Actions and Reducers
In this lesson we explain how the useReducer Hook is a good way to enforce the action reducer pattern. We refactor our code to use the useReducer Hook.
Through this level, students learn to use more complex data structures and manage them using the action reducer pattern.
Milestone: Refactor the form builder into a functional component to handle states using the action reducer pattern.
Through this lesson students are taught about the options for global storage in the browser beyond localStorage. utilities like sessionStorage and the browser's indexedDB are demonstrated.
Through this level, students are introduced to using APIs to work with the backend refactor data storage in localStorage to the backend using APIs. Students also learn to maintain a session with the backend.
Milestone: Integrate all APIs to build a form builder and generate links to submit entries, thereby ridding the use of localStorage for all data needs other than storing the authentication token. Using the authentication status with the server, refactor the private routes.
Through this lesson, students learn the importance of accessibility and try out WAI ARIA to improve accessibility. Students are introduced to npm packages.
Milestone: Add Accessibility to all form components. Use npm packages to improve the project
Throughout this lesson, students learn to optimize the project for production use and deploy the same into Netlify
Final Milestone: Use the additional APIs and build the following features
Create a preview for each user submission. Create a page that renders a table view for all responses which can be exported as CSV. Create a Question level response statistics that displays the different entries for text questions and statistics for other question types.