Master TypeScript with React (Hooks, Testing, Redux, SSR, GraphQL, Next.js) with Spotify Dev, Maksim

TypeScript allows you to specify types for values in your code, so you can develop applications with more confidence. It's ideal for preventing errors and provides a better overall developer experience - it gives better code suggestions in the editor, which makes it easier to work with large and unfamiliar codebases. However, using React with TypeScript (& GraphQL) has some weird edges. This Masterclass was created to help students gain full understanding and get productive with the pair by working through a variety of React apps. After working through the same idea in multiple contexts, students will be able to take the concepts learned and apply them to their own apps. Plus we’ll create some great projects for your portfolio along the way. Purchase of the Masterclass, includes access to the best-selling e-book, Fullstack React with TypeScript, written by Maksim and co-author, Alex Bespoyasov.

Connect with \newline Online!

#newline #React #TypeScript

Chapters

00:00 Course Preview
03:49 TypeScript 101
06:57 Why use TypeScript with React?
10:18 Build Our First App
11:12 Trello App Overview
13:26 Bootstrap React TypeScript App Automatically
28:36 Clean Up the Code & Define the Global Styles
30:05 Style React Elements
32:15 Prepare the Styled Components
36:39 Create Column Components
41:21 Create Card Components
42:15 Component for Adding New Items
47:31 NewItemForm Component
50:53 Auto Focus on Inputs
54:33 Submit on Enter
56:23 Add Global State and Business Logic
1:01:08 Implement Global State

[KatlehoMabala]

Hi! I got this error 'TypeError: manager.getContext is not a function'

[absurdist]

Really cool tutorial for someone getting into React. Especially the beginning is very good if you really want to know how everything works. If you are going insane from the errors which pop up in AddNewItem.ts be advised that at 45:43 it changes to AddNewItem.tsx: ).

[brittanymorris]

Hello! Checking out your styled components file... wanted to see why you use both px and rem and when you pick which to use? Is it a personal pref? should you stick with one throughout a project? any thoughts would be appreciated :)

[yusufansari]

@newline please put code as well so we can test Because lot of stuff is new for me!!
Otherwise it's your choice happy coding!!!!

[darenetufo]

pls how can i use datepicker with react typescript

[leemack]

hi maksim, thanks for the video. may i ask which vscode theme are you using? :) thanks

[rossiegaming]

hey i get this error
"Property 'children' does not exist on type '{}'"

i dont even understand the error, if i take away the { } around children i get another error in the {children} section in the return statement

AppStateContext.tsx
code
"
import { createContext, useContext, FC } from "react";

type Task = {
id: string
text: string
}

type List = {
id: string
text: string
task: Task[]
}

export type AppState = {
lists: List[]
}

const appData: AppState = {
lists: [
{
id: "0",
text: "To Do",
task: [{ id: "c1", text: "Generate app scaffold"}]
},
{
id: "1",
text: "In Progress",
task: [{ id: "c2", text: "Learn Typescript"}]
},
{
id: "2",
text: "Done",
task: [{ id: "c3", text: "Begin to use static typing"}]
}
]
}

type AppStateContextProps = {
lists: List[]
getTasksByListId(id: string): Task[]
}

const AppStateContext = as AppStateContextProps)

export const AppStateProvider: FC = ({ children }) => {
const {lists} = appData

const getTasksByListId = (id: string) => {
return lists.find((list) => list.id === id)?.task || []
}

return (
<AppStateContext.Provider value={{lists, getTasksByListId}}>
{children}
</AppStateContext.Provider>
)
}

export const useAppState = () => {
return useContext(AppStateContext)
}
"

[florianbeij]

Ok, cool, but where's the code?

[dopetag]

You're just typing the code and giving so little explanation.
I see that you are really good at coding but it's quite hard to learn and to understand all the concept.
It's just a showcase. Maybe it's just me but it was quite difficult to keep up with you. Probably my level of React and TS is still too low...