Code Monkey home page Code Monkey logo

ts-react-snippets's Introduction

React/React Native/Redux TypeScript Snippets

Version Rating Installs

Snippets for React/React Native/Redux with JavaScript and TypeScript lovers

Link for marketplace extension

https://marketplace.visualstudio.com/items?itemName=vadymbiliuk.ts-react-snippets

Supported languages and file extensions

JavaScript

.js/.jsx

TypeScript

.ts/.tsx

Usage

Please hit combination for snippet search:

MacOS

cmd + shift + p

Windows/Linux

ctrl + shift + p

Snippets overview

React snippets

Please remember that examples below created for TypeScript. They are same for JavaScript in .js/.jsx files but without TypeScript features like interface etc.

imr

import React from "react";

impt

import PropTypes from "prop-types";

cc

import React, { Component } from "react";

export interface IFileName {}
export interface IFileName {}

class FileName extends Component<IFileName, IFileName> {
  state = {};

  render() {
    return <div />;
  }
}

export { FileName };

cpc

import React, { Component } from "react";

export interface IFileName {}

class FileName extends Component<IFileName> {
  render() {
    return <div />;
  }
}

export { FileName };

fc

import React from "react";

export interface IFileName {}

const FileName: React.FC<IFileName> = ({}) => {
  return <div />;
};

export { FileName };

React Native snippets

imrn

import { ModuleName } from "react-native";

ncc

import React, { Component } from "react";
import { View } from "react-native";

export interface IFileName {}
export interface IFileName {}

class FileName extends Component<IFileName, IFileName> {
  state = {};

  render() {
    return <View />;
  }
}

export { FileName };

ncpc

import React, { Component } from "react";
import { View } from "react-native";

export interface IFileName {}

class FileName extends Component<IFileName> {
  render() {
    return <View />;
  }
}

export { FileName };

nfc

import React from "react";
import { View } from "react-native";

export interface IFileName {}

export const FileName: React.FC<IFileName> = ({}) => {
  return <View />;
};

export { FileName };

React Hooks

useState

const [state, setstate] = useState(defaultState);

useEffect

useEffect(() => {}, []);

useContext

const value = useContext(MyContext);

useReducer

const [state, dispatch] = useReducer(reducer, initialState);

useCallback

const memoizedCallback = useCallback(() => {}, []);

useMemo

const memoizedValue = useMemo(() => {}, []);

useRef

const refContainer = useRef(initialValue);

useImperativeHandle

useImperativeHandle(initialValue, () => {}, []);

useLayoutEffect

useLayoutEffect(() => {}, []);

useDebugValue

useDebugValue(value);

Redux

condux

import { connect } from "react-redux";
import { ViewName } from "ViewPath";

const mapStateToProps = state => ({});

const mapDispatchToProps = {};

export default connect(mapStateToProps, mapDispatchToProps)(ViewName);

createStore

import { configureStore, getDefaultMiddleware } from "@reduxjs/toolkit";

const preloadedState = {};

const middleware = [...getDefaultMiddleware()];

export const store = configureStore({
  preloadedState,
  reducer,
  middleware,
  devTools: process.env.NODE_ENV !== "production"
});

createReducer

import { createReducer } from "@reduxjs/toolkit";

const INITIAL_STATE = {};

const middleware = [...getDefaultMiddleware()];

export const FileName = createReducer(INITIAL_STATE, {
  [ActionType]: (state, action) => {}
});

createAction

import { createAction } from "@reduxjs/toolkit";

export const ActionName = createAction(ActionType);

createSlice

import { createSlice } from "@reduxjs/toolkit";

const INITIAL_STATE = {};

export const FileName = createSlice({
  name: "FileName",
  initialState: INITIAL_STATE,
  reducers: {
    [ActionType]: (state, action) => {}
  }
});

Redux Hooks

useSelector

const selectedData = useSelector(state => state.YourObject);

useDispatch

const dispatch = useDispatch();

useStore

const store = useStore();

Native TypeScript

Please remember that all native TypeScript snippets are included in .tsx files too

int

export interface IInterfaceName {}

tp

export type TypeName = type;

func

export function funcName(): funcReturnType {}

afunc

export const funcName = (): funcReturnType => {};

cls

export class className {
  // Fields:
  private readonly _fieldName: fieldType;

  // Properties:
  public fieldName: fieldType = propertyValue;

  constructor() {
    this._fieldName = this.fieldName;
  }
}

acls

export abstract class className {
  // Properties:
  public propertyName: propertyType = propertyValue;
}

cpf

private readonly _fieldName: fieldType;

cpp

public propertyName: propertyType = propertyValue;

Contributing

Pull requests are always welcome in develop branch. For major changes, please open an issue first to discuss what you would like to change.

License

MIT

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.