Skip to content

Commit

Permalink
Merge pull request #6 from DSDmark/DSDmark-patch-1
Browse files Browse the repository at this point in the history
Update README.md
  • Loading branch information
DSDmark authored Jan 1, 2023
2 parents 0e4ac2e + f9d32a7 commit 0178d53
Showing 1 changed file with 54 additions and 24 deletions.
78 changes: 54 additions & 24 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,42 +1,72 @@
# Create React App example with TypeScript
<div align="center">

## How to use
# SimpleWeb 💤

Download the example [or clone the repo](https://github.com/mui/material-ui):
![GitHub tag (latest by date)](https://img.shields.io/github/v/tag/DSDmark/TodoList)
![GitHub](https://img.shields.io/github/license/DSDmark/TodoList)
![GitHub language count](https://img.shields.io/github/languages/count/DSDmark/TodoList)
![GitHub last commit](https://img.shields.io/github/last-commit/DSDmark/TodoList)
[![pages-build-deployment](https://github.com/DSDmark/TodoList/actions/workflows/pages/pages-build-deployment/badge.svg?branch=gh-pages)](https://github.com/DSDmark/TodoList/actions/workflows/pages/pages-build-deployment)

<!-- #default-branch-switch -->
## React App example with TypeScript and Material-ui 🚀

```sh
curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/create-react-app-with-typescript
cd create-react-app-with-typescript
```
<div align="left">

Install it and run:
## Purpose 😑

```sh
npm install
npm start
```
> This example demonstrates how you can use [**Create React App**](https://github.com/facebookincubator/create-react-app) with [**TypeScript**](https://github.com/Microsoft/TypeScript).
It includes `@mui/material` and its peer dependencies, including `emotion`, the default style engine in MUI v5.
If you prefer, you can [**use styled-components instead**](https://mui.com/material-ui/guides/interoperability/#styled-components).

or:
</div>

<!-- #default-branch-switch -->
<div align="left">

[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/create-react-app-with-typescript)
### How to install 😒

1. Click on green **Clone or download** button and choose Download ZIP.
2. Find the downloaded zipped file on your pc and extract it.
3. Then install `nodejs` and `NPM` in your local system
4. Open Root Directory and install all dependences by that commend `npm install`,
5. Run commend.
> ```npm run start```
Once you are done you can close 🔒 the application in your terminal to quit the application.

</div>

---

<div align="left">

### Here you can quick start with that repo 👼

<!-- #default-branch-switch -->

[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/create-react-app-with-typescript)

## The idea behind the example
<!-- #default-branch-switch -->

[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/create-react-app-with-typescript)

This example demonstrates how you can use [Create React App](https://github.com/facebookincubator/create-react-app) with [TypeScript](https://github.com/Microsoft/TypeScript).
It includes `@mui/material` and its peer dependencies, including `emotion`, the default style engine in MUI v5.
If you prefer, you can [use styled-components instead](https://mui.com/material-ui/guides/interoperability/#styled-components).
</div>

## What's next?
<div align="left">

<!-- #default-branch-switch -->
## Try Out TodoList Demo 🚀

<a href="https://dsdmark.github.io/TodoList/" alt="TodoList Demo">TodoList Demo</a>

</div>

### SimpleWeb

![SimpleWeb perview](public/images/perview.gif "SimpleWeb")

> If you have any issues with that Application feel free to let me know 🙃!
> If you are more interested, check out 🥺 the collection of [ **CLIsapplications**](https://github.com/DSDmark"DSDmark").
---

You now have a working example project.
You can head back to the documentation, continuing browsing it from the [templates](https://mui.com/material-ui/getting-started/templates/) section.
</div>

0 comments on commit 0178d53

Please sign in to comment.