Giter VIP home page Giter VIP logo

lab-react-image-carousel-one's Introduction

Logo-nav

Learning Goals:

  1. In this exercise, the goal is understand and practice how state's work with class components in react.
  2. We will also learn, how to use pre-build react projects.
  3. In this exercise, we will also explore material ui for decoration purpose.

Starter Code:

The structure for this exercise is already created for you.

NOTE This project was created using npx create-react-app command - which means all the necessary modules was installed when this command got executed. And then there are some external modules as well - like material ui; which was installed using npm install @mui/icons-material command. So, if you only clone this repository and start making changes in the required files, you will not able to see any changes, or you may ran into errors like - module not found. The main reason for this is that -- inside your project you are trying to use some modules, which your system may not have, so you need to install those modules first. So in order to install all the required modules -> you have to type this command on your terminal: npm install or npm i This will install all the required modules for this project to be working. You can explore more about this command ๐Ÿ™‚.

You only have to edit following files in order to get the required output:

  1. components/Carousel.css
  2. components/Carousel.js

We will be using our classes knowledge to implement this image carousel.

Problem Statement:

The task is to create an image carousel - as shown below:

image

Here is a gif, of how it should work like:

This is the link for the figma file which you can refer

Happy Coding โค๏ธ!

lab-react-image-carousel-one's People

Contributors

leovaldez08 avatar

Stargazers

Roman avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.