Learning React - Part 1

Overview

This ReactJS course by Colt Steele is good, but because it is outdated, I encountered a lot of problems along the way. There are exercises in the course that I didn't include here. The topics will progress from basic state management to more complex state management.Part 2 of this learning-react series contains all the course projects with advance implementation of react concepts, which you can browse here.

All exercises and course projects are written as class-based components. Since I want and need to familiarize myself with the current practice of using hooks, I converted all of these codes to function-based components. If you see some incorrect implementation of concepts, feel free to comment below or send me a message. 😄

Contents

• Simple state handling
• Changing Color boxes
• Lotto Draw
• Color Box marker
• Card Dealer API
• Dice Roller

1. Simple state handling

This app lets you generate a random number and count the number of your guesses until you get the lucky number 7. If you can't see the code, slide the window from left to right by clicking and dragging the white bar on the left portion of the window. I added a reset button, which you can see in the resetNumber function. The reset button will only appear once you win.

Learnings:

• Use of React Hook useState
• Use of components
• Reset state

View on Code Sandbox

2. Changing Color boxes

Each box in this app changes color with every click. You can play and make it better by adding more colors. That will improve the color generation, I think. 😅 This simple exercise allowed me to understand clearly how amazing it is to have reusable components, one of the amazing features of React. Other lessons here include the assignment of unique keys to each reusable component. In order for react to not be confused in each component, keys are required and must be distinct. As an additional discovery from the original course lecture, I used UUID dependency to generate a unique key. Last but not least, this exercise allows us to see the use of the map() method, which is a built-in function in Javascript.

Learnings:

• Use of useState
• Use of reusable component
• Array iteration using map()
• Helper components (separation of pure Javascript code)
• uuid() package for unique react component key

View on Code Sandbox

3. Lotto Draw

This one is similar to the color boxes exercise. It shows how convenient a reusable component is. It also uses the Javascript map() method to generate lotto balls. Another great lesson here is the use of props. It allows us to control how many lottery balls to generate for each type of lottery. The lottery component requires the maxNum and numBalls parameters, as shown in the code below. This can change the maximum number to draw in each lottery and how many balls it needs to draw. We achieve the concept of a lotto draw by using reusable components and props. Of course, you can improve this by having better names instead of maxNum and numBalls. 😄

Learnings:

• Use of useState
• Use of reusable component
• Array iteration using map()
• Props for handling and passing state
• uuid() package for unique react component key

View on Code Sandbox

4. Color Box marker

This exercise levels up the state handling technique in ReactJS. The scenario is to create a color box based on the user's input, hence the available form in the UI. This exercise shows how to handle the user's input and save it in the state hook, then apply the inputted value to render the color boxes. This exercise also shows how to keep all the inputted color box properties and continuously save them in an array. In connection with that, another highlight of this exercise is the ability to delete the color boxes, removing individual boxes in the box array. Concepts from this exercise can later be seen in more advanced projects like a to-do list app, which you can see in Learning React - Part 2

Learnings:

• Object as an initial value to the state
• Improve and practice creating reusable component in React
• Form submission handling
• Saving all state changes in an array
• Changing of state on user input

View on Code Sandbox

5. Card Dealer API

This card dealer api exercise is still in class-based component. Unlike other exercises, I haven't completely converted this to function-based component that uses React Hooks. I still haven't figure it out how to make the cards stack up in piles. Class-based components have different state management method compare to function-based and we can't use React Hooks in class-based components. So, I think it's nice if you can do this also for yourself. You can open this in codesandbox and fork your own copy. But the main learning here is the use of API to fetch data and use it in your application. This activity introduce the use of ComponentDidMount which is also equivalent to useEffect in React Hooks. With the help of axios, it allow use to fetch and get data from the api which is in this exercise, we use the deckofcardsapi.

Learnings:

• Use of ComponentDidMount to fetch data from an api
• Use of useEffect hooks to fetch data from an api (for newer approach in React)
• Convert class-based component to function-based using Hooks
• Use of axios
• Use of transform - translate to animate the UI

View on Code Sandbox

6. Dice Roller

This exercise is a bit similar to Color Box Maker except for the input state handling part. This also uses the object as the state's initial value. One big lesson we can get out of this is that, when we use an object as an initial state, we always need to include other states in the object whenever there are changes to the state as a whole. We can achieve this by manually retyping all the declared initial state values or by using the spread operator to tell Javascript to make a copy of all initial states and change only the one that needs to be changed. Thanks to those developers who created the spread operator. 😎 But in a class-based component, setState accepts the only key-value pair in the initial state that needs to be changed and automatically brings all other elements into the state. If we do this in React Hooks, the undeclared initial state will be gone.

Learnings:

• How to handle an object as initial state value
• Dynamic classes use template literals for interactive UI
• Conditional rendering using ternary operator

View on Code Sandbox

That's it!

I hope you enjoy browsing these simple exercise in ReactJS. The course has a lot of exercises and projects and I wasn't able to include some of them here. If you want to continue exploring this learning react series, visit the part 2 here for more complex projects. I appreciate if you will leave comments below. 😊