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.
- π¦ 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
- Open your code editor (e.g., VS Code, Sublime Text, WebStorm)
- Navigate to the snippets or user preferences section
- Copy the contents of the
react-snippets.json
file - Paste into your user snippets file for JavaScript React
For Visual Studio Code users:
- Press
Ctrl+Shift+P
(Windows/Linux) orCmd+Shift+P
(Mac) - Type "Configure User Snippets" and select it
- Choose "javascriptreact.json"
- Paste the snippets into this file
To use a snippet, simply type its prefix and press Tab
or Enter
. For example:
- Type
imr
and pressTab
to import React - Type
ffc
and pressTab
to create a functional component
Here's a quick overview of some key snippets:
Prefix | Description |
---|---|
imr |
Import React |
imrs |
Import React and useState |
imrse |
Import React, useState and useEffect |
ffc |
Function Component |
afc |
Arrow Function Component |
uef |
useEffect Hook |
usf |
Declare a new state variable using State Hook |
ccc |
Class Component with Constructor |
hoc |
Higher Order Component |
...and many more! Check the full snippet file for all available shortcuts.
We welcome contributions! If you have a suggestion for a new snippet or an improvement to an existing one:
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingSnippet
) - Commit your changes (
git commit -m 'Add some AmazingSnippet'
) - Push to the branch (
git push origin feature/AmazingSnippet
) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE.md file for details.
Happy coding! π»β¨ Don't forget to star this repo if you find it useful!