5 Steps to THINK in React and Easily Create a ReactJS App From Scratch! (Bonus: Tailwind CSS)

Channel:

codeSTACKr

Subscribers:

296,000

Published on June 26, 2020 1:30:12 PM ● Video Link: https://www.youtube.com/watch?v=YJPSR9dEQV8

Category:

Tutorial

Duration: 14:22

23,324 views

1,103

👉 Become A VS Code SuperHero Today: https://vsCodeHero.com

🆓 Download the PDF, front-end roadmap for FREE to keep you on track!
https://courses.codestackr.com/front-end-web-developer-roadmap-2020

Do you THINK in React? 🤔

One of the great things about React is how it makes you think about apps as you build them. In this video, we'll walk through the 5 step process of building a searchable product data table using React. As a bonus, we'll style this ReactJS app using Tailwind CSS.

All of the code for each step are linked below. Help me out by liking the video and subscribing if you haven't already. 🙏

📚 Resources
Step 2 Code: https://codepen.io/codeSTACKr/pen/QWyvjMW
Step 4 Code: https://codepen.io/codeSTACKr/pen/PoZmPRg
Step 5 Code: https://codepen.io/codeSTACKr/pen/mdVmezo
Tailwind CSS Styled Code: https://codepen.io/codeSTACKr/pen/oNbWbNQ

🔖 Chapters
00:00 - Intro
01:09 - Start with the basics
01:23 - Step 1: Break UI Into Components
02:48 - Step 2: Build A Static Version
05:21 - Step 3: Minimal Representation of State
07:10 - Step 4: Where Should State Live?
08:58 - Step 5: Add Inverse Data Flow
10:40 - Bonus: Tailwind CSS Styling
_____________________________________

📚 Learn to CODE in just a FEW months here:
Treehouse Discount Code: https://treehouse.7eer.net/codeSTACKr
_____________________________________

🛠️ Tools I use:
🟠 Theme: https://marketplace.visualstudio.com/items?itemName=codestackr.codestackr-theme
🟠 Font: STACKr Code (Exclusive to my VS Code Course - https://vsCodeHero.com)
🟠 SuperHero Extension Pack: https://marketplace.visualstudio.com/items?itemName=codeSTACKr.superhero-extensions

🚢 Deploy for FREE on Vercel: https://vercel.com/ambassadors/codestackr
_____________________________________

🚀 Get 1 Year of FREE Hosting (Sponsor Link)
https://www.atlantic.net/Codestackr/
🚨 Use code: Stackr to get $25 in FREE Credit!!
_____________________________________

💖 Show support!
PayPal: https://paypal.me/codeSTACKr
_____________________________________

Watch Next:
Web Development - Beginners Roadmap (2020) - https://youtu.be/iogabydg2y0
Playlist: Web Development For Beginners - https://www.youtube.com/watch?v=Ez4yHS2dsN8&list=PLkwxH9e_vrAJ0WbEsFA9W3I1W-g_BTsbt
_____________________________________

Connect With Me:
Website: http://www.codestackr.com
Twitter: https://twitter.com/codeSTACKr
Instagram: https://instagram.com/codeSTACKr/
Facebook: https://facebook.com/codeSTACKr
_____________________________________

** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.

#codeSTACKr #reactjs #react