Highlight: https://app.highlight.run/?promo=WEBDEVSIMPLIFIED
Coupon Code: WEBDEVSIMPLIFIED (This should be automatically filled in as you go through the signup process)

Todo lists are boring and pretty limited so in this video I am going to show you how to build a more advanced project that covers all the features of a todo list while also adding tons of additional features like categories, markdown support, filter, etc. This is a great intermediate to advanced project.


📚 Materials/References:

GitHub Code: https://github.com/WebDevSimplified/react-note-taking-app
React Router Video: https://youtu.be/Ul3y1LXxzdU
React Router Article: https://blog.webdevsimplified.com/2022-07/react-router
React Multiselect Video: https://youtu.be/bAJlYgeovlg


🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00:00 - Introduction
00:00:30 - Demo
00:01:10 - Setup
00:02:20 - Routing
00:05:38 - New Note Form JSX
00:13:18 - New Note Form Functionality
00:19:19 - useLocalStorageHook
00:24:40 - Note Creation Logic
00:28:53 - Tag Creation Logic
00:33:37 - Note List Page
00:50:20 - Note Layout Wrapper
00:53:45 - Note Show Page
00:58:10 - Note Edit Page
01:02:42 - Delete Note Logic
01:04:35 - Edit/Delete Tags Modal


#React #WDS #TypeScript

The Perfect Advanced React/TypeScript Project - Markdown Supported Note Taking With Categories

Create React App is an incredible tool that made it easy to setup and work with React, but as the years have gone by CRA has become less and less useful to the point that you should pretty much never use it. In this video I talk about all the alternatives to CRA that you should consider using instead.


📚 Materials/References:

Astro vs Gatsby Video: https://youtu.be/YtaR_I65wmI
My Blog: https://blog.webdevsimplified.com


🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00 - Introduction
00:27 - CRA Cons
01:14 - Vite
02:27 - Astro/Gatsby
04:43 - Next.js
06:54 - Full Stack Frameworks


#CRA #WDS #React

Stop Using Create React App

BLACK FRIDAY SALE  40% OFF ALL COURSES 🔥🔥🔥
https://developedbyed.com/
USE COUPON: BF40

Which one is your favourite React UI Framework? I'll be ranking the top most popular React UI Libraries out there and give you my thoughts on them.
Remember, it always comes down to preference...none of these frameworks are objectively better than the other one.

Libraries covered in this episode:
React Inline Styling
React CSS Modules
Material UI
Tailwind CSS
Grommet 
Chakra UI
React Bootstrap
Styled Components

Chapters:
Intro 0:00
Inline Styling 0:50
CSS Modules 2:35
Styled Components 5:35
Grommet 8:23
React Bootstrap 9:40
Material UI 11:32
Tailwind 13:28
Chakra UI 17:55

🛴 Follow me on:
Twitter: https://twitter.com/developedbyed
Instagram: https://www.instagram.com/developedbyed/
Github: https://github.com/developedbyed/

#coding #react

Rating The Most Popular React UI Frameworks

In this Next.js course for beginners, you will learn how to build a full-stack App from scratch. We'll also learn how to deploy the App using Vercel and to sync up GitHub with Vercel so we deploy the app automatically. 

Next is the React Framework for production. It makes building Apps, small or large, a lot easier. It has many features out of the box that you can use that will save loads of time. 

📝 Database: https://github.com/timeToCode-ali/nextjs-tutorial/blob/main/data/data.json 

💻 Source Code: https://github.com/timeToCode-ali/nextjs-tutorial 

Course from Alicia Rodriguez . Check out her channel: @timetocode_with_ali 

⭐️ Contents ⭐️
⌨️ (0:00:00) Intro: Showcase App 
⌨️ (0:02:07) Summary of the content of the video 
⌨️ (0:02:40) Prerequisites for this video. 
⌨️ (0:03:18) What is Next.js 
⌨️ (0:04:38) Main Feature: Server-Side Rendering 
⌨️ (0:09:03) Create a new Next.js Project 
⌨️ (0:17:56) Analyse the Final App we are going to build 
⌨️ (0:20:30) Next.js Files Structure 
⌨️ (0:23:53) Next.js Pages & Build the pages 
⌨️ (0:41:50) Data Fetching 
⌨️ (2:02:15) Build the Components - UI (user Interface) 
⌨️ (2:24:03) Add CSS - Styles   
⌨️ (3:21:27) API Routing in Next.js 
⌨️ (4:29:00) Deploy the APP in Vercel 
⌨️ (4:43:06) Suggestions to improve the App 


Attributions/credits 
Server icons created by srip - Flaticon - https://www.flaticon.com/free-icons/server 
Js icons created by Freepik - Flaticon - https://www.flaticon.com/free-icons/js   
Html icons created by catkuro - Flaticon - https://www.flaticon.com/free-icons/html 
Load icons created by Freepik - Flaticon - https://www.flaticon.com/free-icons/load 
Sound effects:  https://mixkit.co/free-sound-effects/ 
Sound music:  https://mixkit.co/free-stock-music/ambient/ 

  
🎉 Thanks to our Champion and Sponsor supporters:
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Erdeniz Unvan
👾 Justin Hual
👾 Agustín Kussrow
👾 Otis Morgan

--

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

Next.js React Framework Course – Build and Deploy a Full Stack App From scratch

tRPC v10 is so hype! Seriously check it out of you haven't yet. Create-t3-app is the best way to ;) #t3stack #fullstack #webdevelopment 

Create-t3-app: https://create.t3.gg
Link to stream this was from: https://www.youtube.com/watch?v=Y84-ZQTdm_E

ALL MY VIDEOS ARE POSTED EARLY ON PATREON https://www.patreon.com/t3dotgg
Everything else (Twitch, Twitter, Discord & my blog): https://t3.gg/links

Love you Mir ty for another killer edit ❤️

Full Stack Dev Just Got WAY Better 👀

FREE React Hooks Simplified Course: https://courses.webdevsimplified.com/react-hooks-simplified

Performance is something people always worry about, especially in React, but oftentimes the bundle size of an application is ignored when doing performance optimization. In this video I want to talk about how you can minimize the bundle size of your application by using code splitting to only download the code you need when you need it.


📚 Materials/References:

FREE React Hooks Simplified Course: https://courses.webdevsimplified.com/react-hooks-simplified


🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00 - Introduction
00:25 - Setup
01:11 - What Is Code Splitting
02:39 - Code Splitting A Function
04:30 - Code Splitting Components
10:40 - Conditional Code Splitting
12:52 - Advanced Code Splitting Concepts


#React #WDS #CodeSplitting