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
- Preparation
- Instruction style
- Summary
- Itinerary (loose)
- Additional free materials
- Other good learning components
- Keep in touch!
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
- Install a modern. Chrome is what I’ll be using.
- Install the React Developer Tools
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:
npx create-next-app@latestIf 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:00 | Introduction |
| React Basics | |
| 10:30 | Break |
| 11:00 | React Children and JSX, (with GPT) |
| 12:00 | Lunch |
| 1:30 | Show more component build — complete intro to React |
| 3:00 | Break |
| 3:30 | Open |
| - Q&A | |
| - Mob programming | |
| - Programming with AI/LLM | |
| - Project/Code review | |
| 5:00 | Done |
Additional free materials
- React Patterns
- React Context
- React 13 App Directory playlist on YouTube
- Epic React, by Kent C. Dodds
- Total TypeScript: React with TypeScript
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:
- Discord: @chantastic and organizer of lunchdev
- Twitter: @chantastic
- Email: mijoch@gmail.com
Chan [he/any]