⇠ chan.dev / posts

React Rally 2023

https://chan.dev/reactrally-react-intro/

Current (updated 2:30pm)

WIFI

SSID: Marriott_CONFERENCE Access Code: CityCreek

Hey friends! Welcome to the React 2023 Intro to React workshop!

I’m so excited to share this day with you. I want us to have a great time. So here’s how you can prepare for success!

Contents

Goal

Together we’ll develop a strong understanding of the React library and ecosystem.

With over a decade in the market, React comes with a lot of baggage. In some ways, it’s harder than ever to learn React because the internet is flooded with competing takes, antiquated terms, and outdated patterns.

My goal is to provide you with a completely modernized path thru React fundamentals. The exercises are designed to help you learn React Fundamentals and direct you toward the best-in-class resources for your future reference.

Preparation

1. Set up a browser

2. Set up a cloud coding environment

Using a cloud coding service lets us all jump right to the same page. You can use your editor if you prefer, but I recommend using one of these services:

  • CodeSandbox
  • StackBlitz
  • Other, if you feel more comfortable. Ensure that it supports JSX/TSX and ES Module syntax.

3. Validate your Node.js setup

Time-permitting, we will start building with the Next.js React framework.

If you can run the command below (in a terminal), and boot the Next app, you’re good to go:

Terminal window
npx create-next-app@latest

If not, you’ll need to install Node.js 16.8, or later. Follow the installation instructions on their install page.

Instruction style

I believe that the best way to learn something is to get it under your fingers. So, we’ll build a lot of components together. As you have questions, we’ll use Google, ChatGPT, and the other developers in the room to find answers.

I don’t want you to leave with any unasked questions. The value of a workshop is the ability to make mistakes and get questions answered.

Avoiding rabbit holes

To keep the group moving forward, I’ll keep notes of unanswered questions and follow up during breaks.

Working ahead

A challenge of group workshops is pace. While I’d like to do all of the challenges together, I know that some will finish early. That’s great, I will provide additional resources for those who would like to jump ahead into deeper topics.

Summary

We’re going to have a great day! Just remember:

  • Just keep typing! The goal is to get this stuff into your brain thru your fingers.
  • Ask questions! If you have a question, ask them. The only stupid questions are the ones you don’t ask.
  • Have fun! Everyone in this room is at different places on their path. Don’t be threatened by it. Leverage it.

I believe in you and am excited about what we’ll learn together.

Itinerary (loose)

9:00Introduction
React Basics
10:30Break
11:00React Children and JSX, (with GPT)
12:00Lunch
1:30Show more component build — complete intro to React
3:00Break
3:30Open
- Q&A
- Mob programming
- Programming with AI/LLM
- Project/Code review
5:00Done

Additional free materials

Other good learning components

  • Greeting
  • Shareable button
  • Timer
  • QR code gernerator
  • Tic Tac Toe

Keep in touch!

I want to be helpful throughout your React Rally conference. Here’s how you can reach me:

Chan [he/any]