Let’s take stock of React
This is a group workshop. This means you have to make a group to work through it.
Use this opportunity to ask as many questions as possible to your group partners and also to reassure the knowledge you have by explaining it to the rest.
Be sure to be ready with your group before you start! Remember the main goal of a group workshop is that everybody in the group assimilates the same concepts while working as one to find the needed documentation and examples.
Let’s work as a team to get a better understanding on what React is and why is important for us to learn it. The main goal of this workshop is to discover, look for information online and discuss everything you find with the group. We will have enough time to master things. So don’t worry on if you don’t understand everything you see. Try to get the main core points.
So, let’s try to answer the following questions. Keep them noted as a reference for yourself in the future and also to even showcase it to the class and have a general discussion.
Use the React documentation or any other source you know to guide you through this workshop.
💪 Let’s start!
What do you know about React? Share between the group any ideas you have about it so everybody starts at the same point.
Contrast all those comments with React documentation and online resources.
- What were the things you were right about?
- What were the things you were wrong about? Why?
10min
🤓 Adding more concepts
Try to find definitions for those react concepts. Discuss them with the group so you get a good understanding of:
- What is JSX?
- What are components?
- What are props?
- What is the state?
30min
🔧 Let’s go practical
What do you know about Vite? Find information about it and what it does.
10min
Start a group project using Vite. Go over the folders and files generated by it and investigate what they do. Write your own conclusions.
20min
Focus on main.jsx and App.jsx. It is completely fine to not know what all the files are doing. But it will be a good practice for the future to know they exist and try to guess what’s their purpose. You can completely disregard what’s inside of the folder node_modules
😎 Final Challenge
Let’s code something! Try to build something in React.
Use the generated code from Vite and build a small page around it. Optional: You can also look for some code online and use it. Add comments to that code to understand and guess what it is doing.
☝️ Team recap
Recap with the group on everything you did. Use this workshop as a sharing opportunity. Share what you’ve learned with your classmates, ask what’s not clear yet and get even more insight on React.
