Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/pasan-pahasara/react-learning

This Project is introduced to learning React, TypeScript and Tailwind CSS.
https://github.com/pasan-pahasara/react-learning

react tailwind-css typrescript

Last synced: about 1 month ago
JSON representation

This Project is introduced to learning React, TypeScript and Tailwind CSS.

Host: GitHub
URL: https://github.com/pasan-pahasara/react-learning
Owner: Pasan-Pahasara
License: gpl-3.0
Created: 2023-03-05T10:15:28.000Z (almost 2 years ago)
Default Branch: master
Last Pushed: 2023-09-21T09:07:00.000Z (over 1 year ago)
Last Synced: 2023-10-09T18:43:32.968Z (about 1 year ago)
Topics: react, tailwind-css, typrescript
Language: TypeScript
Homepage:
Size: 946 KB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: License

Awesome Lists containing this project

README

# Getting Started with Create React App

This Project is introduced to FrontEnd Using React, TypeScript and Tailwind CSS

### `FrontEnd`
* React
* TypeScript
* Tailwind CSS

## **Create new index.ts**

- **`Intall type script`**

```
npm install -g typescript
```

- **`Fix the error`**

```
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
```

- **`Run typeScript file`**

```
tsc index.ts
```

- **`Run javaScript file`**

```
node index.js
```

- **`Init project file`**

```
tsc --init
```

- **`Refactor project and run`**

```
tsc
```

## React Application

- **`Install React`**

```
npx create-react-app test-app --template typescript
```

- **`Install Tailwind css and other libarary`**

```
npm install -D tailwindcss postcss autoprefixer
```

- **`Create Config File tailwindcss`**

```
npx tailwindcss init -p
```

- **`Config Tailwind CSS In VScode`**

```
Go to setting and search **Files assocition** set it `Item`:`*.css` `Value`:`tailwindcss`
```

- **`Install React Router DOM`**

```
npm i react-router-dom
```

- **`Install Material Icons`**

```
npm install @mui/icons-material @mui/material @emotion/styled @emotion/react
```

- **`Install Material UI`**

```
npm install @mui/material @emotion/react @emotion/styled
```
##

#
- **`Not Detected Node Modules`**
```
npm install
```

- **`Run Project`**
```
npm start
```

#
#### Clone this repository ✅
```md
https://github.com/Pasan-Pahasara/React-Learning.git
```
###
###### If you think my code is good pleace drop a Star

![GitHub issues](https://img.shields.io/github/issues/Pasan-Pahasara/React-Learning?&labelColor=black&color=eb3b5a&label=Issues&logo=issues&logoColor=black&style=for-the-badge)
![GitHub Contributions](https://img.shields.io/github/contributors/Pasan-Pahasara/React-Learning?&labelColor=black&color=8854d0&style=for-the-badge)

### License 📝
[![GitHub license](https://img.shields.io/github/license/Pasan-Pahasara/React-Learning?&labelColor=black&color=3867d6&style=for-the-badge)](https://github.com/Pasan-Pahasara/REST-API/blob/main/License)

![repo size](https://img.shields.io/github/repo-size/Pasan-Pahasara/React-Learning?label=Repo%20Size&style=for-the-badge&labelColor=black&color=20bf6b)

![GitHub forks](https://img.shields.io/github/forks/Pasan-Pahasara/React-Learning?&labelColor=black&color=0fb9b1&style=for-the-badge)
![GitHub stars](https://img.shields.io/github/stars/Pasan-Pahasara/React-Learning?&labelColor=black&color=f7b731&style=for-the-badge)
![GitHub LastCommit](https://img.shields.io/github/last-commit/Pasan-Pahasara/React-Learning?logo=github&labelColor=black&color=d1d8e0&style=for-the-badge)

If you have any questions or just wanna say hi,
MAIL ME

#### Developed by [Pasan Pahasara](https://github.com/Pasan-Pahasara/)