Intro to React and React Hooks ✨
The full recording of the workshop can be found here!
In this introductory React workshop, you will extend your frontend development knowledge beyond basic HTML, CSS, and JavaScript. React is one of the most popular and widely used frontend libraries and can be used to scale and elevate web applications. We will cover React fundamentals and set you up with everything you need to know to start your first React project. As a bonus, we’ll be covering React Hooks, which transform and simplify the way we write React applications!
For this workshop, we'll be building a fun little restaurant app!
Workshop Structure
Basic React 1: Importing React
Here we'll set-up a basic HTMl scaffold and import the React and ReactDOM libraries.
Basic React 2: Creating a component
Next we'll write our first React functional component, App. We'll also learn about the React.createElement() and React.render() functions.
Basic React 3: Creating child components
Afterwards, we'll create child components and render them in the parent component we created earlier. 👨👦
Basic React 4: Passing Props
Finally, we'll learn how to pass unique data from a parent component to a child component through React props.
Create React App 1: Default installation
What's Create React App? Oh nothing much, only the fastest and easiest way to start a new React project for a beginner! 🚀
Create React App 2: Custom CSS and removing default code
This isn't a workshop about CSS...but let's add some to make our app a little bit easier to look at. (No commentary is meant from the CSS here). We'll also rip out some of the guts of the default Create React App so we have a clean slate to start with.
Create React App 3: Creating the Dish component
Let's recreate the restaurant app we made in part one. But let's make a class component and add state this time! We'll also learn how our lives get easier when we can write JSX.
Create React App 4: Adding interactivity
We'll add in some user input to our app here to make it more interesting!
React Hooks 1: Refactoring code to use hooks
🎣 What are React Hooks and why are they awesome? Let's try them out and see...
React Hooks 2: Adding additional price prop
We'll add some additional data to our app to make it seem closer to a real restaurant app.
Extending React: Example API call with cards API
Here's an example API call unrelated to the restaurant app, using the free deck of cards API.
How to run the application
Part 1: Basic React
Simply open the index.html file in your browser.
Part 2 and 3: Create React App and React Hooks
In the project directory, you can run:
yarn start or npm start
This runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.