Skip to content

Almir-git-unifc/Carrocel-Page_react

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Simple Carrocel-Page in react_js

Single page application, which uses cards with border-color and the inheritance


caroucel page


Table of Contents

Intro

Simple carousel page using react_js, hooks and JSON to rotate images, text and values.

This project was developed previously for Emerson Broga, found on youtube with the title """Carrossel com React""" Future improvements: The carousel still needs to return to the beginning or provide feedback to the user when it reaches the extremes.

Feature

  • Horizontal product carousel.
  • Display of detailed product information.
  • Navigation of the carousel of images with control buttons.
  • Fetching of product data from a local JSON file.
  • Dynamic rendering of products.
  • Direct DOM manipulation for carousel scrolling.

 

Technologies

This project was developed using technologys:

  • React.js: For building the user interface.
  • JavaScript (ES6+): For application logic.
  • Fetch API: For fetching data from a local JSON file.
  • React Hooks (useRef, useEffect): For DOM manipulation.

However, in my devepoment used too: Msg-linter and comitzen for semantic version and Convencional Commits; beyond the VS_Code with snippets.

Built With

React json react-hook CSS3 JavaScript HTML5

 

How-To-Use

To clone and run this application, you'll need Git, Node.js v10.16 or higher + npm (used version [email protected]) installed on your computer. From your command line:

 
## Clone this repository
### $ `git clone https://github.com/Almir-git-unifc/Carrocel-Page_simple_react-js.git`


 
## Go to repository
### $ `cd Carrocel-Page_simple_react-js-main`


 
## Install dependencies
### $ `npm install`


 
## Run locally the app
### $ `npm start`

Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.

The page will reload when you make changes.\
You may also see any lint errors in the console.

 

Author

👤 Almir

 

License

MIT

About

Component carousel page made with react_js, hooks and JSON.

Topics

Resources

Stars

Watchers

Forks