MERN-Snippets 🤓

MongoDB, ExpressJS, ReactJS & NodeJS Snippets to Boost the Productivity 🚀 MERN Snippets include Redux, Axios Snippets 😎

Usage

1. Install the extension
2. You will get suggestion when you type the commands
3. Hit Tab or Enter

Command

MongoDB

Shortcut	Description	Output
req_mongoose	Require Mongoose	const mongoose = require("mongoose");
keys_conf	Mongo key Config	module.exports = { mongoURI: "" };
db.keys	Require Mongo Keys	const db = require("./config/keys").mongoURI;
db_connect	Mongoose Connect	mongoose .connect(db) .then(() => console.log("💻 Mondodb Connected")) .catch(err => console.error(err));
db.find	Mongoose find	Model.find() .then(item => res.json(item));
db.save	Mongoose Save	const newItem = new Model({ item: req.body.data }); newItem.save().then(item => { res.json(item); });
db.delete	Mongoose delete item	Model.findById(req.params.id) .then(item => item.remove().then(() => res.json({ success: true }))) .catch(err => { res.status(400).json({ success: false }); });
db.findone	Mongoose findOne	User.findOne({ email }) .then(user =>{ })
mongoose_schema	Define schema	const Schema = mongoose.Schema;
scheme_export	Export mongo model	module.exports = Item = mongoose.model("item", itemSchema);
scheme	Mongo Schema Model Boilerplate	const mongoose = require("mongoose"); const Schema = mongoose.Schema; const itemSchema = new Schema({ name: { type: String, required: true } }); module.exports = Item = mongoose.model("item", itemSchema);
schema_date	Date Type Schema	date: { type: Date, default: Date.now }
schema_string	String Type Schema	email: { type: String, required: true },

ExpressJS

Shortcut	Description	Output
req_express	Require Express	const express = require("express");
req_bodyparser	Require BodyParser	const bodyParser = require("body-parser");
use_bodyparser	Use BodyParser	app.use(bodyParser.json());
use_cors	Use CORS	app.use(cors());
app.listen	Express app.listen server and PORT	const port = process.env.PORT || 5000; app.listen(port, () => Server running on port ${port} 🔥);
app.get	Express app.get	app.get("/", (req, res) => { });
app.post	Express app.post	app.post("/", (req, res) => { });
exp_router	Express Router Include	const express = require("express"); const router = express.Router();
route_details	Public Route Comment	/* @route GET api/items @desc Get all items @access public */
route_details_private	Private Route Comment	/* @route Private api/account @desc Get account info @access private */
mod_exp	Module Export	module.exports = Router;
router.get	Get Route	router.get("/", (req, res) => { });
router.post	POST Route	router.post("/", (req, res) => { });
router.delete	Delete Route	router.delete("/", (req, res) => { });
res.err	400 Response	return res.status(400).json({ message: 'Error' });
res.success	200 Response	return res.json({ message: 'Success' });
req.des	Destructure Request	const {name} = req.body

Nodejs

Shortcut	Description	Output
server	Server.js Boilerplate	const express = require("express"); const mongoose = require("mongoose"); const bodyParser = require("body-parser"); const app = express(); app.use(bodyParser.json()); const db = require("./config/keys").mongoURI; mongoose .connect(db) .then(() => console.log("💻 Mondodb Connected")) .catch(err => console.error(err)); app.get("/", (req, res) => { res.send("Server working 🔥"); }); const port = process.env.PORT || 5000; app.listen(port, () => Server running on port port 🔥);
req_path	Require Path	const path = require("path");
req_http	Require Http	const http = require("http");
req_fs	Require File Server	const fs = require("fs");
req_url	Require URL	const url = require("url");

ReactJS

Shortcut	Description	Output
imp_react	Import React	import React, { Component } from "react";
imp_store	Import Store	import store from "./store";
imp_prop	Import Prop Types	import PropTypes from "prop-types";
imp_csstrans	Import CSSTransition & Transition Group	import { CSSTransition, TransitionGroup } from "react-transition-group";
imp_provider	Import Provider from React Redux	import { Provider } from "react-redux";
rcc	React Class Component	import React, { Component } from "react"; class ExampleClass extends Component { render() { return ( Example ); } } export default ExampleClass;

Redux

Shortcut	Description	Output
imp_connect	Import Connect	import { connect } from "react-redux";
reducer	Sample reducer	export default function(state = initialState, action) { switch (action.type) { case EXAMPLE: return { ...state, action.payload }; default: return state; } }
store	Store Boilerplate	import { createStore, applyMiddleware, compose } from "redux"; import thunk from "redux-thunk"; import rootReducer from "./reducers"; const initialState = {}; const middleware = [thunk]; const store = createStore( rootReducer, initialState, compose( applyMiddleware(...middleware), window.REDUX_DEVTOOLS_EXTENSION && window.REDUX_DEVTOOLS_EXTENSION() ) ); export default store;
actions	New redux action	export const getItems = () => { return { type: GET_ITEMS }; };
actions_get	Create action with axios get	export const getItems = () => dispatch => { dispatch(setItemsLoading()); axios.get("/api/items").then(res => dispatch({ type: GET_ITEMS, payload: res.data }) ); };
actions_post	Create action with axios post	export const getItems = () => dispatch => { dispatch(setItemsLoading()); axios.post("/api/add/items").then(res => dispatch({ type: ADD_ITEM, payload: res.data }) ); };
actions_delete	Create action with axios delete	export const getItems = () => dispatch => { dispatch(setItemsLoading()); axios.delete("/api/items/delete").then(res => dispatch({ type: DELETE_ITEM, payload: res.data }) ); };
itemloading	Loading action	export const setItemsLoading = () => { return { type: ITEMS_LOADING }; };
payload	Short for action.payload	action.payload
exp_conn	Export and wrap connect + mapStateToProps	const mapStateToProps = state => ({ items: state.item }); export default connect( mapStateToProps, { getItems } )(ItemComponent);

Axios

Shortcut	Description	Output
imp_axios	Import Axios	import axios from "axios";
axios.get	Axios Get Request	axios .get("/api") .then(res => res.data) .catch(err => console.error(err));
axios.post	Axios Post Request	axios .post("/api") .then(res => res.data) .catch(err => console.error(err));
axios.delete	Axios Delete Request	axios .delete("/api") .then(res => res.data) .catch(err => console.error(err));

GraphQL

Shortcut	Description	Output
req_graphqlhttp	Require graphqlHTTP Http	const graphqlHTTP = require('express-graphql');
imp_apolloclient	Import ApolloClient	import ApolloClient from 'apollo-boost';
imp_apolloprovider	Import ApolloProvider	import { ApolloProvider } from 'react-apollo';

MISC

Shortcut	Description	Output
imp	import {val} from 'val'	import 'Item' from './Item'
req_cors	Require CORS	const cors = require('cors');
req_bcryptjs	Require bcryptjs	const bcrypt = require('bcryptjs')
req_jwt	Require Json Web Tokens	const jwt = require('jsonwebtoken')
req_config	Require config	const config = require("config");
fun	ES6 Arrow function	clickHandler = (e) => { };
cl	Console.log	console.log(`data`);
cer	Console.error	console.error(`data`);
exd	export default	export default Item;
bcrypt.salt	Generate salt	bcrypt.genSalt(10, (err, salt) => { bcrypt.hash(newUser.password, salt, (err, hash) => { if (err) throw err; newUser.password = hash; newUser.save().then(user => res.json(user)); }); });

Changelog

1.2.0

• Added more snippets ⚡️
• Updated Docs 📖

1.0.0

Initial release of MERN snippets

Enjoy! 🎉🎊