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

I now use AI-powered code completions thanks to Kite. You should too so grab it FREE: https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=codestackr&utm_content=description-only
_____________________________________

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

source