Check out my courses and become more creative!
https://developedbyed.com/

Microphones I Use
Audio-Technica AT2020 - https://geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro - https://geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface - https://geni.us/AcbCpd9 (Amazon)

Camera Gear
Fujifilm X-T3 - https://geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8-4 - https://geni.us/sztaN (Amazon)

PC Specs
Kingston SQ500S37/480G 480GB - https://geni.us/s7HWm (Amazon)
Gigabyte GeForce RTX 2070 - https://geni.us/uRw71gN (Amazon)
AMD Ryzen 7 2700X - https://geni.us/NaBSC (Amazon)
Corsair Vengeance LPX 16GB - https://geni.us/JDqK1KK (Amazon)
ASRock B450M PRO4 - https://geni.us/YAtI (Amazon) 
DeepCool ATX Mid Tower - https://geni.us/U8xJY (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K - https://geni.us/kXHE (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k - https://geni.us/bilekX (Amazon)
Logitech G305 - https://geni.us/PIjyn (Amazon)
Logitech MX Keys Advanced - https://geni.us/YBsCVX0 (Amazon)

DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.


In this episode we are going to cover a popular react library called React Router. React Router allows us to create client side routing in our react project.

Probably one of the best thing it allows us to do is create dynamic routes and fetch api calls based on route parameters.

📕 Things covered in this video:
 - React Router
 - How to use the BrowserRouter, Route and Switch.
 - How to fetch apis with react router

❤Become a patreon for exclusive videos and more!
https://www.patreon.com/dev_ed


🛴 Follow me on:

Twitter: https://twitter.com/deved94
Instagram: https://www.instagram.com/developedbyed/
Github: https://github.com/DevEdwin

🎵 Music:

Outro: 
LAKEY INSPIRED - Me 2 (Feat. Julian Avila)
Music By: https://soundcloud.com/lakeyinspired

Intro:
Dj Quads
Track Name: "Every Morning"
Music By: Dj Quads @ https://soundcloud.com/aka-dj-quads

Creative Commons — Attribution-ShareAlike 3.0 Unported— CC BY-SA 3.0 
http://creativecommons.org/licenses/b...

#javascript #react

React Router Tutorial | React For Beginners

It's time for a narrative change. NextJS is a backend framework, even if it includes React.

Long overdue rant. Sorry for all the individuals I call out during this one, no hard feelings to y'all.

s/o Idez for keeping the damn channel alive while I was traveling. Back Wednesday!!!

Timestamps:
00:00 the tweet
00:30 explanation time
09:50 next endpoint example
16:29 trpc example
18:46 “next api’s are too much work”
21:35 auth
28:25 summary
33:19 outro

Do you REALLY need a backend?

Hey gang, welcome to your very first React tutorial for beginners (including Redux)! In this course we'll be learning what React is and how to use it to make awesome, reactive SPA's. We'll also look at how we can use Redux to help with our app's state management.

----------------------------------------

🐱‍💻 Course Links:

+ VS Code editor - https://code.visualstudio.com/

+ GitHub repository (course files) -  https://github.com/iamshaunjp/react-redux-complete-playlist

+ React CDN - https://reactjs.org/docs/cdn-links.html

----------------------------------------

🤑 Donate @ https://www.paypal.me/thenetninja

🎓Find me on Udemy @ https://www.udemy.com/user/47fd83f6-5e4a-4e87-a0f0-519ac51f91b6/

Complete React Tutorial (& Redux ) #1- Introduction

Hey gang, in this complete modern React tutorial we'll learn about React from the ground up - setup, JSX templates, components & events. We'll cover state & the use of hooks, the React Router & also how to handle asynchronous code in components.

🐱‍💻 🐱‍💻 Course Files:
+ https://github.com/iamshaunjp/Complete-React-Tutorial

🐱‍👤🐱‍👤 JOIN THE GANG - 
https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg/join

🐱‍💻 🐱‍💻 My Udemy Courses:
+ Modern JavaScript - https://www.thenetninja.co.uk/udemy/modern-javascript
+ Vue JS  & Firebase - https://www.thenetninja.co.uk/udemy/vue-and-firebase
+ D3.js & Firebase - https://www.thenetninja.co.uk/udemy/d3-and-firebase

🐱‍💻 🐱‍💻 Helpful Links:
+ HTML & CSS Course - https://www.youtube.com/watch?v=hu-q2zYwEYs&list=PL4cUxeGkcC9ivBf_eKCPIAYXWzLlPAm6G
+ Modern JavaScript course - https://www.youtube.com/watch?v=iWOYAxlnaww&list=PL4cUxeGkcC9haFPT7J25Q9GRB_ZkFrQAc
+ Get VS Code - https://code.visualstudio.com/

🐱‍💻 🐱‍💻 Social Links:
Facebook - https://www.facebook.com/thenetninjauk
Twitter - https://twitter.com/thenetninjauk
Instagram - https://www.instagram.com/thenetninja/

Full React Tutorial #1 - Introduction

COUPON FOR MY GIT & GITHUB COURSE: https://www.udemy.com/course/git-and-github-bootcamp/?couponCode=21391F935F15DBA563DF

COUPON FOR MY NEW COMMAND-LINE COURSE: https://www.udemy.com/course/the-linux-command-line-bootcamp/?couponCode=BFFE1ED31FBED68BD88C

Learn the essentials of React using Hooks.  

Find my code here: https://codesandbox.io/s/react-intro-q3cm2?file=/src/App.js

Learn more about my online job-guaranteed bootcamp here: https://rebrand.ly/coltsbootcamp Use the code "COLT" for a $500 scholarship.

Beginner's Guide to React w/ Hooks (2020) Free Course

Oh MAN I've been waiting to talk about this for so long. The React team released a very exciting new RFC today. https://twitter.com/t3dotgg

LINK TO RFC: https://github.com/reactjs/rfcs/pull/229

FULL STREAM: https://youtu.be/CpBXikakzks?t=5605

MIR YOU ARE A LEGEND FOR THIS EDIT OMFG

ALL MY CONTENT IS FILMED LIVE ON TWITCH AT https://twitch.tv/theo
ALL THE COOLEST PEOPLE ARE IN MY DISCORD https://t3.gg/discord
ALL MY VIDEOS ARE POSTED EARLY ON PATREON https://www.patreon.com/t3dotgg
MIR'S TWITTER: https://twitter.com/mirashif1

Everything else (instagram, tiktok, blog): https://t3.gg/links

They Fixed React??!?

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

Get Started with React.js and learn how to build amazing websites with ReactJS! Full Project included, 100% free!

Join our bestselling ReactJS course: https://acad.link/reactjs
Join our Academind Community on Discord: https://academind.com/community
Check out all our other courses: https://academind.com/courses

----------

Timestamps:
Introduction 00:00
What is React 00:27
First React Code 04:15
Building SPAs 11:40
React Alternatives 13:41
Creating a React Project 16:48
Setting Up a Code Editor 25:03
Diving Into the Created Project 28:07
How React Works & Understanding Components 34:38
More About Components & Styling with CSS Classes 42:15
Building & Reusing Another Component 47:50
Pros & Dynamic Content 55:09
Handling Events 1:00:27
Adding More Components 1:07:07
Introducing State 1:12:48
Event Props 1:21:07
Adding Routing 1:28:15
Adding Links & Navigation 1:45:07
CSS Modules 1:50:28
Outputting Lists 1:56:14
Adding More Components´2:02:04
Props Children 2:11:52
Adding a Form 2:20:31
Getting User Input & Handling Form Submission 2:29:30
Preparing the App for HTTP 2:39:15
Sending a Post Request 2:46:07
Navigating Programmatically 2:51:25
Getting Started with Fetching Data 2:55:07
useEffect 3:04:32
Introducing React Context´3:14:40
Context Logic & Different Ways of Updating State 3:25:43
Using Context in Components 3:31:37
More Context Usage 3:43:48
Summary 3:50:42

----------

Code Files & Snapshots:
Vanilla JS vs React Project Code: https://github.com/academind/react-complete-guide-code/tree/01-getting-started/code/react-vs-vanilla-js-example
Style Files & Dummy Data: https://github.com/academind/react-complete-guide-code/tree/zz-reactjs-summary/extra-files
Code Snapshots: https://github.com/academind/react-complete-guide-code/tree/zz-reactjs-summary/code

Further Resources:
React vs Angular vs Vue Comparison: https://academind.com/tutorials/angular-vs-react-vs-vue-my-thoughts/
Building a REST API with NodeJS: https://academind.com/tutorials/building-a-restful-api-with-nodejs/
Connecting SPAs to Databases: https://academind.com/tutorials/connect-to-database/
What is State?: https://academind.com/tutorials/what-is-state/

----------
• 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!
----------
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!