Hi 👋 I'm Eliyan Dochev!

Get started with React, Typescript and Material UI

Get in touch with me 🤝

Introduction

This repo is related to an Epitech workshop
This workshop will allow you to build your first (or not) React app using Typescript and Material UI

Let's start !

Step 0 - Requirement & Configuration

Fork the repository

For the needs of the workshop, you'll need to fork the GitHub repository on your profile.
This will help us to mark you as present. Please, fork it as a public repository, or we could not access to it, and you'll be marked as absent.

Documentaion https://docs.github.com/en/get-started/quickstart/fork-a-repo

Then, clone the repository on your local machine.

git clone [email protected]:ElianDochev/WorkshopReact_TS_MUI.git

Install NodeJS

You will need to install NodeJS on your machine.

## On Fedora
sudo dnf install nodejs

## On Debian
sudo apt install nodejs

after that go to the root of the project and run the following command

npm install

to start the project run

npm start

Step 1 - Theme setup

Using the theme provided in src/theme.tsx, create a theme provider for your app in src/index.tsx

Hint: Wrap the App component

Documentation MUI theaming

Step 2 - Create states

using the useState hook, create a state for the following variables in src/App.tsx

• prevValue
• currentValue (default value 0)
• operator
• overwrite

Documentation useState , State lifecycle

Step 3 - Create your first interface

In src/DigitButton.tsx create an interface for the props of the component and use it

Documentation Interfaces , Props and Interfaces

Step 4 - Configure your first MUI component

In src/OperationButton.tsx configure the Button component from MUI to fullwidth, variant outlined and set the onClick to selectOperation fuction

Documentation Button

Step 5 - Finish the calculator

In src/App.tsx finish the calculator by implementing UI and logic Remeber use grid MUI component for the layout example:

<Container maxWidth="sm">
  <CalculatorBase elevation={3}>
    <Grid container spacing={1}>
      <Grid item xs={12}>
        <OutputContainer data-testid="output">{currentValue}</OutputContainer>
        {/* ... */}
  </CalculatorBase>
</Container>

Documentation Grid