Workshop Description

Take your web development skills to the next level with React.js! React is one of the most popular front-end JavaScript libraries in the industry. During the workshop, you will learn how to build your very first interactive user interface. If you are looking to put your JavaScript, HTML and CSS knowledge into action and dive into the world of dynamic web applications, this workshop is for you. No prior experience with React.js is required! We'll guide you through the fundamentals, so you can hit the ground running.

Prerequisites

This workshop is geared towards people with working knowledge on html, css, js. If you need to brush up on these skills, I highly recommend checking out our Intro to Web Development workshop!

1. Ensure you have Node >= 14.0.0 and npm >= 5.6 installed (Instructions here). You can check if you have them installed and their versions by running the below comment in your terminal/command prompt.

   node --version
   npm --version
   

2. To start a react-app, first make the project folder. I will call it React Workshop.

   mkdir ReactWorkshop
   cd ReactWorkshop
   

3. Run the following command to start a react app called ‘frontend’. Look at the screenshot below if you need help setting the details.

   npm create vite@latest
   

   

4. Once you run the following commands, you will get a url to view the demo app (usually the format of localhost:[number]). If you can copy the url to your browser and view the demo app, you're all set!

   cd frontend
   npm install
   npm run dev
   

   

5. Make sure you have an IDE that you like to use, and allows you to easily browse the file structure! Consider using VSCode since I’ll be using that during the workshop.