Preparing a React course in public - Ideas

Next January I'll be teaching in a full-stack master's program.

I'm super excited.

My focus will be on web development class. While it must cover a wide overview of the front-end development it's also intended to be focused on React.

Today I checked the calendar and... I had a mini freak-out moment. I need to prepare all the course materials, structure of the subject, the code examples and the final exam.

---

My intention is to focus on practice. To code in public, then, prepare some exercises so they can continue coding. My plan is to work on a single project throughout the entire 4-week course; so they may watch it growing from the ground-up.

Week 1 the wide overview of the front-end development and start the project as a static page. HTML and CSS. Then we'll introduce js. No framework, just plain old javascript:

const button = document.getElementById('blabla'); 
button.addEventListener('click', () => {
  /* listener */
});

Week 2: Introduce why we use frameworks. The "framework wars". And finally focus on React as i was asked by the organization. JSX, components, project organization, loops etc.

function MyComponent({ foo }) {
  return <>...</>;
}

...

<MyComponent foo='goo'/> 

Week 3: Hooks. State management. Third party API. Custom hooks. Reducers and Context.

function MyComponent({}) {
  const [foo, setFoo] = useState();
  const { navigate } = useRouter();
  const { foos } = useCustomHook();

Week 4: Ecosystem. Typescript. useSwr(). Next.js. Who is relevant out there. Vercel. Highlight relevant tech influencers.

---

Now, I need project ideas they can work on over those 4 weeks. I'm aware that the typical boot-camp project is a Pokédex: free API for fetching data, it demands a model, and building features like listing cards and detail view for each Pokémon... it's near-perfect project tbh.

I asked ChatGPT for additional projects. It replies:

• Recipe finder
• Weather forecast dashboard
• News aggregator
• Movie listing
• GitHub repository explorer

I don't know, what do you think.

Which project would you like to build if you would attend my class?

---

Cover image created by leonardo.ai; prompt: «Renaissance-era professor in a steampunk-style classroom, meticulously preparing a class lecture on a massive whiteboard adorned with intricate, mechanical details.»; 3D Animation-Syle

Thanks for reading 💛.

Comments

[nausaf]

I would suggest first tell them alittle bit about how React allows us to create reusable components (this makes writing code easier). Ideally, this would be done with display only pages/components with no interactivity. Some examples that come to mind are projects from the first two sections of Scrimba React introductory course by Bob Ziroll (it's a free course). This could actually be done in your Week 1

Next, there is a City quiz in Learn React documentation. It is introduced in Adding Interactivity section. It is deceptively simple but to do it well even in plain JS/HTML, students owuld need to build a state machine/deterministic finite automaton. This would be your Week 2.

I think you can show the "How" and the "What" of nearly all of React (partial screen updates/reactivity, component lifecycle, useState, other hooks like useRef and useReducer) by getting stuents to implement this quiz in a number of different ways.

• without React, in plain JS/HTML. They will end up building a state machine
• with React, but before they have been taught about useState and reactivity/partial updates. In order to manipulate controls and read from them, they will need to use useRef. This will show them that React is different from HTML and that it can be more complicated than plain JS/HTML (at least if you don't have or don't use useState)
• with React, but using useState. This will be the first intro to proper React
• In all of the above variations they would have used a manually coded state machine. Now useReducer can be introduced which makes state machine implementations nicer and more standardised.

By now students would understand useState and that state items must be kept at the right level to get partial page updates to every part of a component that needs to be updated in response to change in a piece of state. You can now take them to the Thinking in React tutorial in Quickstart section. I think this tutorial is in the wrong place. It shows the idiomatic way of building React components and it is only now, after having learnt about useState, that the students will understand why this idiomatic way makes sense.

The Thinking React tutorial also shows the "Why" of React: to get partial page updates with minimal effort and maximal correctness (of course there are other great benefits: componentisation has reuse and maintainability benefits, and JSX makes it possible to build mobile and desktop native interfaces also).

Next, I think without having ever built full applications, it is time to introduce test-driven-development using Storybook. This could be taught entirely on the City quiz mentioned above (both static tests and interaction tests). Thinking in React tutorial and Storybook could be Week 3.

Finally, I think an excellent first interactive application is the Meme Generator in Section 3 of the Scrimba React course I mentioned above. This literally pulls together everything taught so far (all of React basics, including hooks, the idiomatic way of decomposing a screen into a tree of components taught in Thinking in React tutorial), test-driven development. But this is a fully-fledged (albeit really small) application that students can deploy (to Vercel, Amazon Amplify Azure Static Web Apps etc.) manually (CI/CD would take too long to teach in a beginners course).

The project pulls data from an API and students could get to play with useContext, useSwr.

Also, they would now have to deal with CSS and responsiveness and intricacies of layout across a number of different components that together make up the page. This would reaffirm the value of Storybook and would also logically lead you to Tailwind. You could show them just a glimpse of the app implemented with Tailwind and point them to Tailwind resources to learn it in their own time/after the course.

This app would be Week 4. If there is time left over, you could show an already implemented multi-page to them. implemented in TypeScript, and highlight the relevant features as well as what TypeScript brings to the table, giving them resources to learn TypeScript in their own time.

Deploy to Vercel is ridiculously easy and in the process you would have introduced them to Next.js (only as much as is necessary, would would be very little but at least they would get started). I think this should be done as early as possible, perhaps even with the second React app in Week 1/2. This way they will have many opportunities to initialise a new Next.js app, slot their code into the correct places in the folder structure and deploy it to Vercel (they'll get to practice the workflow). They will also be aware of a bundler (Next.js wtill using Webpack in v13) and transpiler (I think Next has switched to using SWC in v13; both Babel and SWC and others could be mentioned over the course) operating in the background.

[nausaf]

I just wanted to add one more thing: I think the problem with using the same example throughout and growing it is that students would not exercise the basic (creating an app, initialising storybooks, adding stylesheets, creating component and page files, deploying to Vercel) again and again. As a result, the danger is they would have lost the thread by week 3/4.

[Manuel Artero Anguita 🟨]

these are really really good points. thank u so much 🎩

( I suspect some chatGPTing here? ) but anyway including your comment in my mind.

[nausaf]

Haha..ChatGPT? you wish! Bard is better :P

Anyway, this is the route I took coming from a .NET/C# background but having already done plain HTML/JS/CSS and responsive layouts. That City quiz in particular is a gift that kept o giving.

Good luck with your course!

[nausaf]

Sorry, made a mistake earlier. The City quiz is here in the Managing State section of LEARN REACT tutorial.

It takes a while to load I don't know why