Day #8 – Exploring Uzum Market with React js, Styled Components, and Splide js

Welcome to Day #8 of our 30-day coding challenge! Today, we will be creating a UI for Uzum Market using React.js, Styled Components, and Splide.js.

First things first, make sure you have Node.js installed on your computer. You can check if you have it installed by opening your terminal and running node -v. If you don’t have Node.js installed, you can download it from the official website: https://nodejs.org/en/

Next, let’s create a new React app using Create React App. Open your terminal and run the following commands:

npx create-react-app uzum-market
cd uzum-market

Now, let’s install Styled Components and Splide.js. Run the following commands in your terminal:

npm install styled-components
npm install @splidejs/splide

Now that we have everything set up, let’s start coding! Open your project in your code editor and navigate to the src folder. Create a new file called Market.js and add the following code:

import React from 'react';
import styled from 'styled-components';
import Splide from '@splidejs/splide';

const MarketWrapper = styled.div`
  display: flex;
  justify-content: center;
`;

const Market = () => {
  React.useEffect(() => {
    new Splide('.splide').mount();
  }, []);

  return (
    <MarketWrapper>
      <div className="splide">
        <div className="splide__track">
          <ul className="splide__list">
            <li className="splide__slide">
              <img src="https://placeimg.com/200/150/animals" alt="Animal" />
            </li>
            <li className="splide__slide">
              <img src="https://placeimg.com/200/150/arch" alt="Architecture" />
            </li>
            <li className="splide__slide">
              <img src="https://placeimg.com/200/150/nature" alt="Nature" />
            </li>
          </ul>
        </div>
      </div>
    </MarketWrapper>
  );
};

export default Market;

In this code snippet, we are creating a Market component that uses Styled Components to style the market and Splide.js to create a carousel for displaying images.

Next, let’s update our App.js file to render the Market component. Open App.js and update it with the following code:

import React from 'react';
import Market from './Market';

function App() {
  return (
    <div>
      <h1>Welcome to Uzum Market</h1>
      <Market />
    </div>
  );
}

export default App;

Now, if you run your React app by running npm start in your terminal, you should see a carousel of images displaying in the Uzum Market UI.

Congratulations! You have successfully created a UI for Uzum Market using React.js, Styled Components, and Splide.js. Feel free to customize the styles and content to fit your needs. Stay tuned for Day #9 of our coding challenge! See you tomorrow!