🦊 Get to Know React 🦊

🗓️ Today’s topics

• Exercism review
• Intro to React
  • How does React work?
  • What does React code look like?

✅ To Do Before Class

• Continue working on Exercism. I’ll take requests for one to work through together in class.
• Need some JS review? Create a list of topics that you would like us to dig into some more and share in class.

• Read

  Watch

  Listen for today or anything from yesterday that you didn’t get to.

• Work on the React tutorial project(s) below.

🛠️ Setup

Make sure you have the following set up in your local environment (docs listed below in Resources):

• Node & npm
• ESLint for VS Code
• React developer tools for Chrome

📖 Read | 📺 Watch | 🎧 Listen

• ⭐ 📖 React Quick Start (beta docs) These docs are still being written, so they are incomplete, but what is written is much more helpful than the older offical docs.
• 📖 React docs
• 📺 Kent C. Dodds, The Introduction to React You’ve Been Missing
• 🎧 Syntax.fm podcast: The React Episode
• An Absolute Beginner’s Guide to npm You can skim this – there is more here than you need.

🎯 Project: React Tutorial

Beginner’s Guide to React Tutorial. This is a really friendly total beginner tutorial that will show you the most modern way to build React apps.

This link will create an empty repo on GitHub that you can use to push your tutorial code to..

If you finish this and want to keep going, try one of these other tutorials:

• The Beginner’s Guide to React - video-driven, intense and very complete
• The official React tutorial - classic, official. Uses class-based components, which are a bit older, but still widely used
• Dave Ceddia’s React tutorial - very long, very comprehensive, but still pretty accessible

🔖 Resources

• Create React App Docs
• ESLint Plug-in for VS Code
• ESLint Docs: Getting Started You probably don’t need to get too deep into this right now, but if you want to know more about configuring ESLint, this is the place to go.
• How to Lint and Format Code with ESLint in VS Code This tutorial walks you through using ESLint in a more comprehensive way.
• React Dev Tools Extension Chrome Essential. Please install it.
• Airbnb JavaScript Style Guide Remember we talked about following code standards? Here is one popular style guide.

👾 Code & Notes

• Replit transforming arrays with loops and map
• Phase 1 notes on Arrays - if you’re feeling rusty it would be great to type these examples out in a console or repl.it and run them yourself
• Most minimal React app ever