Note: This repository has been updated with a new task project named "modal-component". Please scroll to Project 4 to learn more.
This is a Repository of the Dev-Design React Student coding session. A collective effort of students from both teams.
The Repository contains all tasks from the session, categorized into independent Projects.
This project (task 1, section 1 of the task file), displays a basic Header component that accepts a title props.
https://github.com/Dev-Liz/devdesign-react-coding-session/tree/main/user-Card
This project contains task 2 and 3 of task section 1.
Is a profile card component that takes name, age, location and image as props and displays them to the UI
This task extends Task 2. It recieves bio, occupation and hobby as addition props and renders conditionally, if Bio is available
https://github.com/Dev-Liz/devdesign-react-coding-session/tree/main/profile-card-component
This project contains task 1 and 2 of task section 2.
Is a basic Header component that accepts and displays a Title prop
Is a Product-Card Component that accepts an array of props and displays them to the UI
https://github.com/Dev-Liz/devdesign-react-coding-session/tree/main/Basic-header
This project contains an interactive default button component that displays a warning modal when clicked.
To implement this project, we utilized all that we learnt in Week 5 classes of the BootCamp.
- We styled components using the modular and in-line styling methods
- We utilized the useState hook to manage the display of the modal (set to boolean by default)
- We conditionally rendered the modal using ternary operators.
- We passed important functionalities to child components (cancel and continue buttons) using props.
https://github.com/Dev-Liz/devdesign-react-coding-session/tree/main/modal-component
