react-redux-typescript-guide - The complete guide to static typing in "React & Redux" apps using TypeScript

  •        55

You should check out Playground Project located in the /playground folder. It is a source of all the code examples found in the guide. They are all tested with the most recent version of TypeScript and 3rd party type definitions (like @types/react or @types/react-redux) to ensure the examples are up-to-date and not broken with updated definitions. Playground was created in such a way that you can simply clone the repository locally and immediately play around on your own. It will help you to learn all the examples from this guide in a real project environment without the need to create some complicated environment setup by yourself.

https://piotrwitek.github.io/react-redux-typescript-guide/
https://github.com/piotrwitek/react-redux-typescript-guide

Tags
Implementation
License
Platform

   




Related Projects

react-redux-styleguide - React / Redux Style Guide

  •    

This is an opinionated style guide for developing applications in ES6+ with React and/or Redux. These styles are based on current best practices in the React and Redux communities, as well as real life experience with these tools in the field. It puts great focus on writing readable and maintainable code and using new JavaScript features in a responsible manner.

react-redux-typescript-jspm-starter - Futuristic, bundle-free, development environment for building Component-Driven SPA with React, Redux and TypeScript - powered by JSPM (SystemJS & Rollup with tree-shaking)

  •    TypeScript

No module bundling during development, instead loading source files (.ts/.tsx) directly in the browser (using plugin-typescript). Type-checking is disabled for speed and delegated to another process. Enable strictNullChecks with noImplicitAny (compiler flags), to get Non-nullable Types (v2.0) and Smarter Type Inference (v2.1) (Source) which greatly increase your TypeScript experience.

frontend-bootcamp - Frontend Workshop from HTML/CSS/JS to TypeScript/React/Redux

  •    TypeScript

In this two-day workshop you'll learn the basics of frontend development while building a working web app. The first day provides an introduction to the fundamentals of the web: HTML, CSS and JavaScript. This is targeted at new and experienced developers alike. On the second day we'll dive into more advanced topics like TypeScript, state management, and testing. While the examples should be accessible to anyone, you'll get the most out of it if you have some prior experience with programming and web technologies.

whitestorm-typescript-boilerplate - 📦 🚀 TypeScript boilerplate for WhitestormJS using react/redux ⚛

  •    Javascript

You can clone from this repository or install the latest version as a zip file. All commands defaults to development environment. You can set NODE_ENV to production or use the shortcuts below.


typesafe-actions - Typesafe Action Creators for Redux / Flux Architectures (in TypeScript)

  •    TypeScript

Flexible functional API that's specifically designed to reduce types verbosity (especially maintainability concerns) and complexity (thanks to powerful helpers). When I was first starting with Redux and TypeScript I was trying to use redux-actions to simplify maintainability of action-creators. I was struggling and results were intimidating: incorrect type signatures and broken type-inference cascading throughout the entire code-base (read more detailed comparison).

react-express - The all-in-one beginner's guide to modern React application development!

  •    Javascript

React has a problem. While the proliferation of JavaScript libraries, frameworks, and tools (JavaScript fatigue) is fantastic for the web development ecosystem, it can be extremely intimidating for beginners to get started. I've created this all-in-one guide for beginners to get an opinionated walkthrough from start to finish: create-react-app, npm, webpack, babel, ES2015, ES2016, JSX, React, Redux, CSS-in-JS, and more.

typescript-react-redux-example - Typescript, React, Redux, Webpack starter kit

  •    

Typescript, React, Redux, Webpack starter kit

redux-webpack-es6-boilerplate - A starter project for modern React apps with Redux

  •    Javascript

Note: If you still want to use a previous version, please checkout old-original-structure branch. A boilerplate using the power and simplicity of React, Redux, Webpack 2 + HMR, and ES6 + JSX via Babel. Includes Webpack's Tree Shaking configuration. It's suitable for scalable applications and organized using the custom variation of the Ducks pattern — approach when each module's entry file (feature-name.js) contains all of its related constants, actions/action creators, selectors and its reducer.

react-makes-you-sad - Here’s a flowchart to make you happy again!

  •    Makefile

If you are confused by the React ecosystem and don’t know where to start, read Pete Hunt’s react-howto guide. If you are using a Flux library (or Redux) and it adds a lot of boilerplate for no obvious gain, remove it and learn state management in vanilla React with the official Thinking in React guide.

react-native-seed - Get your favorite boilerplate of React Native

  •    

This repo is used to collect stars for ReactNativeSeed.com. ReactNativeSeed.com provides you with a number of React Native Boilerplates to choose from. You can opt for MobX or Redux for state-management, TypeScript or Flow for static type checking and CRNA or plain React Native for the stack.

react-styleguidist - Isolated React component development environment with a living style guide

  •    Javascript

React Styleguidist is a component development environment with hot reloaded dev server and a living style guide that you can share with your team. It lists component propTypes and shows live, editable usage examples based on Markdown files. Check out the demo style guide. The change log can be found on the Releases page.

todomvc-redux-react-typescript - TodoMVC example using Redux, React, and Typescript

  •    TypeScript

It is adapted from the redux TodoMVC example. Visit http://localhost:3000/.

fe-boilerplate - Lucid & Futuristic Production Boilerplate For Frontend(Web) Apps, React/RN/Vue, with TypeScript(Optional), Webpack 4/Parcel, MobX/Redux :dizzy: 多技术栈前端项目模板

  •    Javascript

Lucid & Futuristic Production Boilerplate For Frontend(Web) Apps, React/RN/Vue, with TypeScript(Optional), Webpack 4/Parcel, MobX/Redux :dizzy: 多技术栈前端项目模板

vue-styleguidist - Created from react styleguidist for Vue Components with a living style guide

  •    Javascript

Project was started when not finding a tool that generates documentation of components with hot reloading, read documentation and have a playground. Created from React Styleguidist, implement additional support to read and compile .vue files. Only supports 2.x. Vue Styleguidist is a style guide generator for Vue components. It lists component and shows live, editable usage examples based on Markdown files. You can use it to generate a static HTML page to share and publish or as a workbench for developing new components using hot reloaded dev server.

dummys-guide-to-redux-and-thunk-react - Tutorial post

  •    Javascript

The demo app for my blog post. It is not an example of writing best-practice markup or React JavaScript, it's just the bare minimum to demonstrate how to use Redux and Redux Thunk. Node.js >= v4 must be installed.

redux-beacon - Analytics integration for Redux and ngrx/store

  •    TypeScript

If you're using Redux or ngrx/store to manage your app's state, you can use Redux Beacon to tap into your dispatched actions and map them to events that are consumable by an analytics service (e.g. Google Analytics). With Redux Beacon your entire global state life-cycle becomes trackable. Redux Beacon is lightweight. The core Redux Beacon module is tiny (~ 1KB), and each target, extension, and util, is either around the same size or smaller.

redux-react-hook - React Hook for accessing state and dispatch from a Redux store

  •    TypeScript

React hook for accessing mapped state and dispatch from a Redux store. NOTE: React hooks require react and react-dom version 16.8.0 or higher.

dumb-react

  •    Javascript

Dumb React is a collection of React components used to create a static (dumb) website screen. Why do this? Many React tutorials or boilerplates I've encountered are either too basic ("here's a button component!") or more often too complex ("here's a simple babel typescript redux cssmodules isometric oh god oh god oh god..."). I wanted to be able to draw a straight line from how a simple component ("atom" in atomic design speak) makes its way into a full page. There are a ton of different ways to build reusable components and put dynamic content inside them, and many teams — even ones that aren't building highly-interactive web apps that would actually benefit from a tool like React — are reaching for React to create component-driven experiences. So in that spirit, I wanted to create a demo that shows how to construct a whole screen (even if it's a dumb, static one) out of React components.