Create Components in REACT - Lab Task 12


In this task, our objective is not to create a complete web application but to practice how components in REACT are created, how composite components are developed, how the state or data is managed and where we place data that is required in multiple components, etc. You can hard code data in your code or fetch it from any REST API, do as you feel convenient. 

Task 12.1

With reference to the lecture on developing custom REACT component. Create REACT components for Student, Course, Address and PhoneNumber, in continuation of your previous example of user, course and address entities. The components shall meet following requirements:
  • The UI shall be Bootstrap based. You may use Cards for it.
  • The component data shall be stored in itself i.e. the REACT way.
  • Develop components for Student, Address and Course. Remember, the Student component must be composed of Address component and array of Course and PhoneNumber components. As explained in earlier tasks, one student may register multiple courses and may have multiple phone numbers. You must manage the stage and display accordingly.


Task 12.2

You know, an ecommerce store lists products where each product is composed of different attributes, belong to some category, user posts review on it or add it to her wishlist. Some products are listed in recently sold list, some inside most popular/sold products. Each product also has gallery. Where gallery display multiple pictures, the main picture with large size (by default) and other in small size. So, build following components in REACT and also design and implement the data required by each compnent. Please note, some components would be composed using othe components (as single instance or an array).  
  1. Product
  2. Category
  3. PictureGallery
  4. RecentlySoldProducts
  5. PopularProducts
  6. AddToWishList
You can declare some static data in your code to demo your work. No need to make use of REST API in this task. As our objective to understand the components and state management.

Comments

Post a Comment