https://github.com/kaplanh/modulecss
https://github.com/kaplanh/modulecss
functional-components inline-css jsx-syntax module-css props react
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/kaplanh/modulecss
- Owner: kaplanh
- Created: 2024-02-06T01:29:19.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-02-07T02:35:40.000Z (almost 2 years ago)
- Last Synced: 2025-09-02T17:04:13.983Z (4 months ago)
- Topics: functional-components, inline-css, jsx-syntax, module-css, props, react
- Language: JavaScript
- Homepage: https://modulecss.vercel.app
- Size: 376 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Module Css in React
[:point_right: Click here to see on browser](https://modulecss.vercel.app/ )
**What's used in this app ?** | **Author** |
|----------|------------|
|React - component |[Take a look at my portfolio](https://kaplanh.github.io/Portfolio_with_CssFlex/)|
|React - props|[Visit me on Linkedin](https://www.linkedin.com/in/kaplan-h/)|
|React - module.css||
|Deploy with Vercel | |
## How To Run This Project 🚀
### 💻 Install React 👇
```bash
yarn create react-app . or npx create-react-app .
```
## 🔴 Delete these files and delete the imports👇
- App.test.js
- reportWebVitals.js
- setupTests.js
- favicon.ico
- logo192.png
- logo512.png
- manifest.json
- robots.txt
### 💻 Start the project 👇
```bash
yarn start or npm start
```
OR
- Clone the Repo
```sh
git clone
```
- Install NPM packages
```sh
npm install or yarn
```
- Run the project
```sh
npm start or yarn start
```
- Open the project on your browser
```sh
http://localhost:3000/
```
- ### Enjoy! 🎉
## Project Skeleton
```
Module Css in React(folder)
|
|----public (folder)
│ └── index.html
|----src (folder)
| |--components (folder)
│ │ ├── buton (folder)
│ │ │ ├── Button.js
│ │ │ ├── Buton.module.css
│ │ │
│ │ ├── card (folder)
│ │ ├── Card.jsx
│ │ └── Card.module.css
│ │
│ ├
│ ├── App.js
│ │── data.js
│ └── index.js
│
│
|── .gitignore
|── package-lock.json
├── package.json
|── README.md
|── yarn.lock
```
### At the end of the project, the following topics are to be covered;
- Component
- JSX & JS
- Inline Styling
- Props drilling
- Module.css
## Feedback and Collaboration
I value your feedback and suggestions. If you have any comments, questions, or ideas for improvement regarding this project or any of my other projects, please don't hesitate to reach out.
I'm always open to collaboration and welcome the opportunity to work on exciting projects together.
Thank you for visiting my project. I hope you have a wonderful experience exploring it, and I look forward to connecting with you soon!
⌛ Happy Coding ✍