From bceb938e6bebf0a91a2bb99e9f1adefab3933651 Mon Sep 17 00:00:00 2001 From: Aditya Vijay Date: Sat, 24 Aug 2024 02:07:21 +0530 Subject: [PATCH] updating --- CHANGELOG.md | 2 +- FEATURES.md | 72 ++++++++++++++++++++++++++++++++++++- README.md | 49 +++++++++++-------------- vsc-extension-quickstart.md | 23 ------------ 4 files changed, 92 insertions(+), 54 deletions(-) delete mode 100644 vsc-extension-quickstart.md diff --git a/CHANGELOG.md b/CHANGELOG.md index 9c95eef..c08fa66 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,7 @@ This changelog details updates for the React Native Essentials VS Code extension. -**v0.0.1 - Initial Release (2024-07-21)** +**v0.0.4 - Current Release (2024-08-24)** * **Features:** * Introduced a collection of code snippets to streamline React Native development. diff --git a/FEATURES.md b/FEATURES.md index fec5601..c507f0e 100644 --- a/FEATURES.md +++ b/FEATURES.md @@ -1 +1,71 @@ -# Hello + +| Prefix | Description | +|---|---| +| **Basic Imports** | | +| `imr` | Import React | +| `imrc` | Import React and Component | +| `imrd` | Import ReactDOM | +| `imrs` | Import React and useState | +| `imrse` | Import React, useState, and useEffect | +| `impt` | Import PropTypes | +| `impc` | Import React and PureComponent | +| **Components** | | +| `cc` | Class Component | +| `ffc` | Function Component | +| `afc` | Arrow Function Component | +| `rmc` | React.memo Component | +| `tsrc` | TypeScript React Component | +| **Hooks** | | +| `ush` | useState Hook | +| `ueh` | useEffect Hook | +| `uch` | useContext Hook | +| `umh` | useMemo Hook | +| `uch` | useCallback Hook | +| `urh` | useReducer Hook | +| `urefh` | useRef Hook | +| `uih` | useImperativeHandle Hook | +| `uleh` | useLayoutEffect Hook | +| **Custom Hooks** | | +| `cuh` | Custom Hook | +| `cuht` | Custom Hook with TypeScript | +| `crht` | Custom React Hook with TypeScript | +| `rceh` | React Custom Event Hook | +| **Props and Types** | | +| `pt` | PropTypes declaration | +| `dp` | defaultProps declaration | +| **Styling** | | +| `sc` | Styled component | +| `thp` | Theme Provider | +| **State Management** | | +| `rac` | Redux Action Creator | +| `rr` | Redux Reducer | +| `cp` | Context Provider | +| `rctx` | React Context with TypeScript | +| `rca` | Recoil Atom | +| `rcs` | Recoil Selector | +| **Routing** | | +| `rrs` | React Router Setup | +| **Testing** | | +| `rtl` | React Testing Library Test | +| **Next.js** | | +| `nxp` | Next.js Page | +| **React Native** | | +| `rnc` | React Native Component | +| **Forms** | | +| `frm` | Formik Form | +| **Error Handling** | | +| `eb` | Error Boundary | +| `reb` | React Error Boundary with Fallback UI | +| **Performance Optimization** | | +| `hoc` | Higher-Order Component | +| `rfr` | React.forwardRef | +| **Data Fetching** | | +| `gql` | GraphQL Query | +| `rqh` | React Query Hook | +| `apif` | API Fetch | +| **Miscellaneous** | | +| `sbst` | Storybook Story | +| `rpt` | React Portal | +| `rlz` | React.lazy with Suspense | + +Use these prefixes in your code editor to quickly generate the corresponding React code snippets. diff --git a/README.md b/README.md index 8aecd28..5a2b23c 100644 --- a/README.md +++ b/README.md @@ -1,41 +1,32 @@ +## React Snippets + [![Install Now](/images/readmeheader.png)](https://marketplace.visualstudio.com/items?itemName=adityavijay21.ReactSnipp) -a comprehensive collection of React snippets designed to streamline your workflow and boost your productivity. These snippets cover everything from basic imports to complex React patterns, allowing you to write clean, efficient React code faster than ever before. +A collection of React code snippets to boost your productivity. Covers modern practices, hooks, and more! ![GIF](/images/readmeuse.gif) -### Key Features: - -- 📦 25+ carefully crafted snippets -- 🎯 Covers modern React practices and hooks -- 🧩 Easy to use and remember prefixes -- 🛠 Customizable to fit your coding style -- 📚 Includes common React patterns and best practices - -## 📋 Table of Contents +## Getting Started -- [Installation](#installation) -- [Usage](#usage) -- [Snippet List](#snippet-list) -- [Contributing](#contributing) -- [License](#license) +### Installation -## 💻 Installation - -1. Open your code editor (e.g., VS Code, Sublime Text, WebStorm) +1. Open your code editor (VS Code, Sublime Text, WebStorm) 2. Navigate to the snippets or user preferences section 3. Copy the contents of the `react-snippets.json` file 4. Paste into your user snippets file for JavaScript React -For Visual Studio Code users: +**For VS Code Users:** 1. Press `Ctrl+Shift+P` (Windows/Linux) or `Cmd+Shift+P` (Mac) 2. Type "Configure User Snippets" and select it 3. Choose "javascriptreact.json" 4. Paste the snippets into this file -## 📜 Snippet List -## React Snippet Prefixes + +## Snippets + +Explore a collection of helpful snippets categorized by functionality: + | Prefix | Description | |---|---| @@ -108,21 +99,21 @@ For Visual Studio Code users: Use these prefixes in your code editor to quickly generate the corresponding React code snippets. -## 👥 Contributing +## Contributing -We welcome contributions! If you have a suggestion for a new snippet or an improvement to an existing one: +We welcome contributions! If you have a suggestion: 1. Fork the repository -2. Create your feature branch (`git checkout -b feature/AmazingSnippet`) -3. Commit your changes (`git commit -m 'Add some AmazingSnippet'`) -4. Push to the branch (`git push origin feature/AmazingSnippet`) +2. Create a feature branch +3. Commit your changes +4. Push to the branch 5. Open a Pull Request -## 📄 License -This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details. +## License +This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details. --- -Happy coding! 💻✨ Don't forget to star this repo if you find it useful! \ No newline at end of file +Happy coding! ✨ Don't forget to star this repo if you find it useful! \ No newline at end of file diff --git a/vsc-extension-quickstart.md b/vsc-extension-quickstart.md deleted file mode 100644 index 2fadf67..0000000 --- a/vsc-extension-quickstart.md +++ /dev/null @@ -1,23 +0,0 @@ -# Welcome to your VS Code Extension - -## What's in the folder - -* This folder contains all of the files necessary for your extension. -* `package.json` - this is the manifest file that defines the location of the snippet file and specifies the language of the snippets. -* `snippets/snippets.code-snippets` - the file containing all snippets. - -## Get up and running straight away - -* Press `F5` to open a new window with your extension loaded. -* Create a new file with a file name suffix matching your language. -* Verify that your snippets are proposed on IntelliSense. - -## Make changes - -* You can relaunch the extension from the debug toolbar after making changes to the files listed above. -* You can also reload (`Ctrl+R` or `Cmd+R` on Mac) the VS Code window with your extension to load your changes. - -## Install your extension - -* To start using your extension with Visual Studio Code copy it into the `/.vscode/extensions` folder and restart Code. -* To share your extension with the world, read on https://code.visualstudio.com/docs about publishing an extension.