Cardano Developer Workshop in Maranatha Christian University - Workshop for Students 14 November 2024
Date : Thursday, 14 November 2024
Purpose of this event :
- Learning and practicing the React concepts such as useState, Event Handler. Conditional Rendering, useEffect, List Rendering.
Host :
- @valdryanivandito (Speaker)
Total Participants (Online via Zoom) : 3 Participants
Total Participants (Onsite) : 29 Participants
Video Recording can be watched in Komunitas Cardano Indonesia YouTube Channel
Github Repository :
- Lab-Exercise-1
- Lab-Exercise-2
- Lab-Exercise-3
- Coding Challenge-1
- Coding Challenge-2
- Coding Challenge-3
Documentations :
Summary :
We covered these topics during workshop :
- Topic-1 : Introduction to React Hook
- Topic-2 : Practical session on how to implement useState and Event Handler (using button element)
- Topic-3 : Practical session on how to implement useState and Event Handler (using input element)
- Topic-4 : Coding Challenge-1 evaluation & Explanation how to implement Conditional Rendering
- Topic-5 : Practical session on how to implement useEffect
In this fourth workshop, we continue exploring React concepts, focusing on useState, Event Handlers, Conditional Rendering, useEffect, and List Rendering. This session promises to be more exciting as it is fully hands-on and includes three coding challenges where participants compete and are motivated to sharpen their skills.
The first topic introduces the concept of React Hooks, specifically useState and useEffect, two of the most fundamental and commonly used hooks. To understand the concept of useState, participants worked on Lab-Exercise-1, creating a counter application. The code has been documented in the GitHub repository linked above.
To trigger actions from a button element, participants had to use an Event Handler. This concept should already be familiar to them from their earlier JavaScript studies. Participants then moved on to Lab-Exercise-2, which also implements useState, but this time involves using an Event Handler with an input element to capture and display characters typed into the input field.
After practicing in Lab-Exercises-1 and 2, the session moved to the much-anticipated Coding-Challenge-1. In this challenge, participants had to create a login form with two input fields for username and password, along with a button. They needed to implement useState and Event Handlers as learned in the previous exercises.
After a coffee break, the session resumed with an evaluation and explanation of Conditional Rendering, which was to be implemented in Coding-Challenge-1. The task was to display a green notification text for valid login credentials and a red notification text for invalid credentials. This required participants to apply conditional rendering techniques to dynamically update the display based on the input.
The workshop then continued with Lab-Exercise-3, which focused on useEffect. During this hands-on session, participants learned how to use dummyJSON for dummy data. The application created was simple: it fetched product data from a server endpoint.
Following Lab-Exercise-3, the session moved to Coding-Challenge-2, where participants were tasked with adding an input field for entering a product ID. If the ID was found, the product description had to be displayed on the screen.
Unfortunately, due to time constraints, we could not proceed to Coding-Challenge-3. The task for Coding-Challenge-3 was to fetch and display all product data from the dummyJSON server. You can see the preview video for the coding challenge below:
Because of the limited time, this challenge was assigned as homework. Participants who complete the challenge at home and are among the first five to submit their solutions in the fifth workshop tomorrow will receive rewards.
We extend our heartfelt gratitude to everyone who contributed to making this workshop a success. Congratulations to all the winners, and we look forward to seeing the innovative solutions and progress in the next session. Let’s continue this journey of learning and building together!
Regards,
@valdryanivandito