Learn how to start using Typescript in your React code. I go over props, hooks, and render props. 

#react #typescript

Snippets: https://gist.github.com/benawad/1e9dd01994f78489306fbfd6f7b01cd3#file-snippets-typescriptreact-json

Code: https://github.com/benawad/react-typescript-example

For more information on this checkout: https://github.com/typescript-cheatsheets/react-typescript-cheatsheet


​
----
Follow me online: https://voidpet.com/benawad
#benawad

React Typescript Tutorial

Vuetify 3 and Nuxt.js 3 are out! But how do you combine it? Is it worth it? In this video I explore adding these two technologies together, and the pros and cons of it!

👉Check out my last videoon getting started with Vuetify 3
https://youtu.be/qPf7ZUymlN8

👉 Sign up and get free Vue cheat sheets and updates!
https://www.vuecourse.tech

👉 Need some help with a project,  level up your skills, Vuetify or Nuxt bug? Check out my 1-on-1 mentoring!
https://mentorcruise.com/mentor/erikhanchett/?preselect=lite

Links
https://github.com/CodyBontecou/nuxt3-and-vuetify
https://github.com/BayBreezy/nuxt3-vuetify3-starter
https://github.com/nuxt/framework/issues/8825

Vuetify 3 + Nuxt 3 : Vue.js Will Never Be The Same

A fullstack project course that teaches you how to build a backend and frontend from scratch then deploy it. 

Includes the follow technologies:

- React
- TypeScript
- GraphQL
- URQL/Apollo
- Node.js
- PostgreSQL
- MikroORM/TypeORM
- Redis
- Next.js
- TypeGraphQL
- Chakra

Code: https://github.com/benawad/lireddit

Links from video:
Learn vim: https://benawad.com/vim
How to install PostgreSQL: https://www.google.com/search?q=how+to+install+postgresql
How to install Redis: https://www.google.com/search?q=how+to+install+redis
Argon2 vs bcrypt: https://security.stackexchange.com/questions/193351/in-2018-what-is-the-recommended-hash-to-store-passwords-bcrypt-scrypt-argon2
React snippets: https://gist.github.com/benawad/1e9dd01994f78489306fbfd6f7b01cd3#file-snippets-typescriptreact-json
Simple pagination: https://github.com/FormidableLabs/urql/blob/main/exchanges/graphcache/src/extras/simplePagination.ts
Node.js Docker: https://nodejs.org/en/docs/guides/nodejs-docker-webapp/
Next Apollo: https://github.com/adamsoffer/next-apollo/blob/master/src/withApollo.js

0:00:00 Intro
0:02:02 Node/TypeScript Setup
0:11:29 MikroORM Setup
0:39:50 Apollo Server Express Setup
0:47:32 MikroORM TypeGraphQL Crud
1:09:23 Register Resolver
1:23:27 Login Resolver
1:41:11 Session Authentication
2:03:06 Sessions Explained
2:08:24 Next.js + Chakra
2:32:36 URQL Basics
2:46:07 GraphQL Code Generator
2:53:16 Register Error Handling
3:10:57 NavBar
3:26:21 URQL Cache Updates
3:39:33 Logout
3:50:11 Next.js URQL SSR
4:12:34 Forgot Password
4:35:31 Change Password
5:22:14 Why Switching to TypeORM
5:25:27 Switching to TypeORM
5:50:44 Many to One
6:02:26 Global Error Handling
6:24:15 Next.js Query Params
6:31:26 URQL Pagination Start
6:50:02  Adding Mock Data
7:01:19 Chakra Styling
7:12:37 More URQL Pagination
7:32:07 Fix Mock Data
7:40:41 URQL Pagination Has More
8:00:53 GraphQL Fetching Relationships
8:18:43 GraphQL Field Permissions
8:23:16 Many to Many
8:46:46 Invalidate Queries
9:00:49 Upvote UI
9:23:11 Change Vote
9:31:57 Write Fragments
9:39:00 Vote Status
9:51:57 SSR Cookie Forwarding
10:04:08 Single Post
10:21:55 Delete Post
10:38:19 Edit Post
11:09:23 DataLoader
11:40:06 Cache Reset
11:43:55 Deploy Backend
11:52:56 Docker
12:03:29 Environment Variables
12:14:55 DB Migrations
12:21:40 Docker Hub
12:28:23 DNS
12:36:39 Deploy Frontend
12:57:28 Fix Cookie
13:03:07 Switch to Apollo

#benawad #fullstack #tutorial

----
Checkout my side projects:

If you're into cooking: https://www.mysaffronapp.com/

----
Join the Discord:  https://discord.gg/Vehs99V

----
Patreon: https://www.patreon.com/benawad

----
Follow Me Online Here:

Twitter: https://twitter.com/benawad
Medium: https://medium.com/@benawad
GitHub: https://github.com/benawad
Twitch: https://www.twitch.tv/benawad
Facebook: https://www.facebook.com/benawad97/
LinkedIn: https://www.linkedin.com/in/benawad/
Instagram: http://instagram.com/benawad97
TikTok: https://www.tiktok.com/@benawad ​
​
----
Follow me online: https://voidpet.com/benawad
#benawad

Fullstack React GraphQL TypeScript Tutorial

Seriously, objects are not for everything.

Huge s/o Idez as always!!!

Follow me on...
Twitch: https://twitch.tv/theo
Twitter: https://twitter.com/t3dotgg
Instagram: https://instagram.com/fakiebigfoot
Everywhere else: https://t3.gg/links

Stop Using Javascript Objects

🚨 IMPORTANT:
I have the ultimate Vue course! If you're interested in it click here and get a free Vue cheat sheet! https://www.vuecourse.tech/

TypeScript and Vue are a great combination, but how do you use it? In this video I'll discuss how to use TypeScript and Vue with Vue.extend and look at the class component architecture.

👉Check out my last video on Top 150 YouTube Channels
https://youtu.be/XCurQDpFXtA

Please check out my Github list and send a PR and star it!
https://github.com/ErikCH/DevYouTubeList

📚 Sign up and get notified about my new Vue 3 course! —  https://www.vuecourse.tech/

👉 Algo expert is the best way to learn algorithms! Check out my code and get 15% off at checkout with code "erik" http://algoexpert.io/erik

♡ ♡ ♡ 

MY COURSES - 
→ VUE.JS + NUXT.JS (Two Courses In One) -  http://bit.ly/2LalQka

♡ ♡ ♡  

Make Sure To Check These Courses Out On Udemy! 💻 

→ JAVASCRIPT ALGORITHMS COLT STEELE'S COURSE - http://bit.ly/2L8HSPV

→ THE WEB DEVELOPER BOOTCAMP (GREAT FOR BEGINNERS) — http://bit.ly/2zP4alw

→ THE ADVANCED WEB DEVELOPER BOOTCAMP  — http://bit.ly/2h53MYg

→ THE ULTIMATE VUE JS 2 COURSE - http://bit.ly/2CTvsvx

→ CHECK OUT THIS COURSE - Angular 8 - The Complete Guide - http://bit.ly/2sCMxWm

→  Check out the 100 Front End Interview Question Challenge here - http://bit.ly/2NM9GAm

→ The Complete 2019 Web Development Bootcamp - Angela Yu - http://bit.ly/2ADKEKD



___

Links
https://vuejs.org/v2/guide/typescript.html#Augmenting-Types-for-Use-with-Plugins
https://github.com/vuejs/vue-class-component
https://github.com/kaorun343/vue-property-decorator


MY WEBSITE — http://www.programwitherik.com
MY TWITTER — http://www.twitter.com/erikch
MY FACEBOOK — http://www.facebook.com/programwitherik

Vue.js With TypeScript A Beginners Guide

Learn how let, const and 'as const'  changes the way that TS infers your code.

Become a TypeScript Wizard with Matt's upcoming TypeScript Course:

https://www.totaltypescript.com/

Follow Matt on Twitter

https://twitter.com/mattpocockuk

Literal types are SO USEFUL in TS - Advanced TypeScript

Learning about the difference between optional properties (name?: string) and undefined unions (name: string | undefined) can give you an amazing productivity boost for certain refactors.

Become a TypeScript Wizard with Matt's upcoming TypeScript Course:

https://www.totaltypescript.com/

Follow Matt on Twitter

https://twitter.com/mattpocockuk

The tip that saved me HOURS of refactoring time - Advanced TypeScript

Free TypeScript Introduction for Beginners: Get Started with TypeScript, learn the Basics, its Features, Workflows and how to use it!

Join the full TypeScript Course: https://acad.link/typescript 
Join our Academind Community on Discord: https://discord.gg/gxvEWGU

Check out all our other courses: https://academind.com/learn/our-courses

----------

• Go to https://www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts
• Follow @maxedapps and @academind_real on Twitter
• Follow @academind_real on Instagram: https://www.instagram.com/academind_real
• Join our Facebook community on https://www.facebook.com/academindchannel/

See you in the videos!

----------

Timestamps
Getting Started 00:00
What is TypeScript: 01:57
Installing & Using TypeScript 06:31
The Advantages of TypeScript 19:53
Course Outline 22:59
How to Get the Most out of This Course 27:16
Setting Up our Development Environment 30:29
The Course Project Setup 33:36
Module Introduction 40:56
Using Types 41:23
TypeScript Types vs JavaScript Types 51:43
Numbers, Strings and Booleans 56:37
Type Assignment and Type Inference 01:02:20
Object Types 01:07:59 
Array Types 01:15:31
Tuples 01:21:01
Enums 01:27:21
The Any Type 01:34:26
Union Types 01:36:30
Literal Types 01:43:01
Type Aliases 01:50:55
Function Return Types and Void 01:53:55
Function Types 02:01:21
Function Types and Callbacks 02:06:55
The Unknown Type 02:11:18
The Never Type 02:15:02
Wrap Up 02:19:12
Module Introduction 02:21:04
Watch Node 02:21:50
Compiling the Entire Project 02:23:55
Include and Exclude Files 02:27:42
Setting a Compilation Target 02:33:55
Understanding TypeScript Libs 02:37:59
More Options 02:43:31
Source Maps 02:45:12
Rootdir and Outdir 02:47:12
noemit on Error 02:52:43
Strict Compilation Options 02:55:35
Code Quality Options 03:06:39
Debugging with Visual Studio Code 03:11:02
Wrap Up 03:15:22

----------

Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!