MERN-Snippets 🤓
MongoDB, ExpressJS, ReactJS & NodeJS Snippets to Boost the Productivity 🚀
MERN Snippets include Redux, Axios Snippets 😎
Usage
- Install the extension
- You will get suggestion when you type the commands
- 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! 🎉🎊
| |
