Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React

If you are a beginner to React and know basic stuff like creating components and managing local state with Hooks or using class components with simple setState well you're in the right place! In this video we will learn how to create and setup a Full React project with advanced technologies with Redux Toolkit, Typescript and GraphQL we will create a simple project with all technologies like an advanced developer and setup an advanced project. We'll also create a basic Hot Anime app with a GraphQL API and utilizing the Redux store to manage the state and the data with ease.

⭐ Timestamps ⭐
00:00 Intro and How to be a Pro in React
03:20 Setting Up using Create react app with typescript and redux toolkit
06:09 Installing dependencies
09:08 Configuring Apollo Graphql
18:11 Creating basic HomePage App Layout
26:26 Adding Redux slice to HomePage container
41:54 Create Basic GQL Query to fetch Anime list
47:24 Automagically Generate Typescript interfaces for GraphQL Queries
51:22 Using Typescript Query Interfaces with redux slice
56:23 Fetching Anime list with apollo Client
01:08:50 Using Selectors to easily select from the state
01:14:58 Displaying fetched Anime list
01:24:49 Using redux logger for better debugging
01:31:34 Wrapping Up and displaying Hot Anime

🧭 Watch Tutorial on Designing the website on Figma

🧭 Watch Create a Modern React Login/Register Form with smooth Animations

⭐ You can get the Full Pro Tips Code from Github:

Made with 💗 by Coderone

[mahmoudtokura]

This is a good and well-explained video. Thanks

[slowedReverbJunction]

At 11:36, the dev dependency is " yarn add -D @types/styled-components "
Thank me later

[mrFighter]

You deserve more subscribers... Thank you for you time....

[marianosantoro]

If someone gets the " erorr while running the schema:download try to use node 14. I was using 16 and did not work but with 14.15.5 it works

[ibrahimdaniel]

Thanks For this tutorial, well detailed and expalined.

[giuliomariomartena]

Thanks for this tutorial! Is there a way to use RTK Query instead, in order to take advantage of features like caching?

[bashful]

Thank you. A quick question. Is it a good practice to use middleware with redux and call the api an then update the store? and use hooks to display in the components?

[ph]

Thanks for the tutorial. Your styled components are like objects in vscode how to achieve that ?

[randomcell]

PLease can you tell us why we are getting the following error when using: yarn schema:download to pull latest from the anilist API: can't not find module 'graphql/validation/rules/KnownArgumentNamesRule',

[supporterfreedom]

Thanks, I've submit two bug issue in your repo. can't not find module 'graphql/validation/rules/KnownArgumentNamesRule', stuck in here.

[ulhaqanwaar]

I know RTK is opinionated but the whole theme of Flux architecture/Redux is to have unidirectional data flow but here you have done 1 minor mistake which contradicts the whole idea of Flux/Redux. Component should only dispatch actions and in response async thunk should handle it in the reducers/actions. I could be wrong be it's the general flow.

Yet there is way too much boilerplate

[muhammadidrees]

@CoderOne - Nice Tutorial though , Thanks :)

[mixai]

I know javascript, ES6, React.js but not know typescript.Can be easy for this video?

[muhammadidrees]

I'm stuck with below and getting undefined data, can anyone help pls?

Error: Unexpected end of JSON input

Thanks

[centdxv]

you make it so complicated.this called over engineering . any way
thanks for ur time

[ozhclje]

for those people who're getting error downloading schema, just skip that part it's not that important,

[АлМ-ыъ]

generate typescript from json not worked (((

[saschamajewsky]

How do you achieve the automatic imports for example when you use styled-components?