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

•    TypeScript

---

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

nerv - A blazing fast React alternative, compatible with IE8 and React 16.

•    Javascript

---

Nerv is a virtual-dom based JavaScript (TypeScript) library with identical React 16 API, which offers much higher performance, tinier package size and better browser compatibility. 💫 Support React 16 features, Error Boundaries, Portals, custom DOM attributes, etc.

nerv react preact inferno jsx virutal-dom vdom reactjs framework frontend nervjs typescript react-like

Mitosis - Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and more

•    Typescript

---

Mitosis is inspired by many modern frameworks. You'll see components look like React components and use React-like hooks, but have simple mutable state like Vue, use a static form of JSX like Solid, compile away like Svelte, and uses a simple, prescriptive structure like Angular. Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and more.

react builder angular vue compiler solid jsx visual declarative liquid svelte shopify figma no-code jsx-lite ui-framework ui-ux

poi - :zap: Delightful web development.

•    Javascript

---

Start writing an app with a single .js file, Poi could handle all the development setups for you, no more configuration hell.Note: You need to install react react-dom and run Poi with --jsx react flag. For convenience, here's also poi-preset-react which adds both React JSX and React HMR support.

webpack build-tool bundle vuejs react preact vue svelte typescript babel postcss

react-native-template-typescript - 👾 Clean and minimalist React Native template for a quick start with TypeScript

•    Objective-C

---

Clean and minimalist React Native template for a quick start with TypeScript. You may need to remove the globally installed react-native-cli (npm uninstall -g react-native-cli), for the above command to work. The global react-native-cli is deprecated, and no longer supported.

react-native typescript jest template boilerplate

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

•    TypeScript

---

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.

react redux typescript patterns guidelines flow static-typing style-guide guide

cra-template-redux-typescript - The official Redux + TypeScript template for Create React App

•    TypeScript

---

The official Redux+TS template for Create React App. To use this template within your project, add --template redux-typescript when creating a new app.

react create-react-app template typescript redux reduxjs react-redux

react-firebase-hooks - React Hooks for Firebase.

•    TypeScript

---

A set of reusable React Hooks for Firebase. Official support for Hooks was added to React Native in v0.59.0. React Firebase Hooks works with both the Firebase JS SDK and React Native Firebase, although some of the Flow and Typescript typings may be incorrect - we are investigating ways to improve this for React Native Firebase users.

react firebase react-firebase-hooks firebase-auth firebase-authentication firebase-database firebase-realtime-database firebase-firestore firebase-cloud-firestore firebase-storage firebase-cloud-storage react-hooks react-native typescript hooks

formsy-material-ui - A Formsy compatibility wrapper for Material-UI form components

•    TypeScript

---

This package is currently under active restoration after a long hiatus, and all help is appreciated, especially MUI users. This library is a wrapper for Material-UI form components to allow them to be used with formsy-react, a form validation component for React forms.

form formsy formsy-react jsx material-ui mui react react-component

react-typescript-cheatsheet - a cheatsheet for react users using typescript with react for the first (or nth!) time

•    

---

jpavon offers an alternative react-scripts-ts with Webpack 4 and better linting. In particular, make sure that you have @types/react and @types/react-dom installed. Read more about the DefinitelyTyped project if you are unfamiliar. There are also many React + Typescript boilerplates, please see our Resources list below.

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.

jspm typescript react redux systemjs rollup starter hot-reload boilerplate

reactql - Universal React+GraphQL starter kit: React 16, Apollo 2, Webpack 4, Styled Components 4, React Router 4, PostCSS, SSR

•    TypeScript

---

Universal front-end React + GraphQL starter kit, written in Typescript. Hot code reloading. Make a change anywhere in your code base (outside of the Webpack config), and changes will be pushed down the browser automatically - without page reloads. This happens for React, Styled Components, SASS - pretty much anything.

react webpack starter-kit postcss ssr reactjs apollo apollo-client graphql webpack4 styled-components typescript hot-reload helmet sass less gzip brotli server-side-rendering universal

typed-react - A binding layer between React and TypeScript

•    TypeScript

---

In this case we export the Props and the Factory but we could make the props and state inline interfaces and just export the factory function. TypedReact supports using existing React Mixins as well as defining new mixins with idiomatic TypeScript. The example is based on http://www.typescriptlang.org/Handbook#mixins. You need to use createMixin on your own mixins and should export that from your mixin modules.

react typescript

react-docgen-typescript - A simple parser for react properties defined in typescript instead of propTypes

•    TypeScript

---

A simple parser for React properties defined in TypeScript instead of propTypes. It can be used with React Styleguidist.

react-typescript-web-extension-starter - :desktop_computer: A Web Extension starter kit built with React, TypeScript, SCSS, Storybook, Jest, EsLint, Prettier, Webpack and Bootstrap

•    Javascript

---

🖥️ A Web Extension starter kit built with React, TypeScript, SCSS, Storybook, EsLint, Prettier, Jest, Bootstrap,x & Webpack. Compatible with Google Chrome, Mozilla Firefox, and Brave. In Google Chrome, open up chrome://extensions in a new tab. Make sure the Developer Mode checkbox in the upper-right corner is turned on. Click Load unpacked and select the dist directory in this repository - your extension should now be loaded.

react chrome-extension bootstrap typescript webpack eslint jest scss prettier google-chrome storybook brave mozilla-firefox extension-popup chrome extension boilerplate

stencil - A Web Component compiler for building fast, reusable UI components and Progressive Web Apps 💎 Built by the Ionic Framework team

•    TypeScript

---

Stencil is a simple compiler for generating Web Components and progressive web apps (PWA). Stencil was built by the Ionic Framework team for its next generation of performant mobile and desktop Web Components. Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. It takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that runs on both modern browsers and legacy browsers back to Internet Explorer 11.

webcomponents pwa progressive-web-app custom-elements typescript stencil stenciljs ionic web-components components webapp

tsdx - Zero-config CLI for TypeScript package development

•    TypeScript

---

Despite all the recent hype, setting up a new TypeScript (x React) library can be tough. Between Rollup, Jest, tsconfig, Yarn resolutions, ESLint, and getting VSCode to play nicely....there is just a whole lot of stuff to do (and things to screw up). TSDX is a zero-config CLI that helps you develop, test, and publish modern TypeScript packages with ease--so you can focus on your awesome new library and not waste another afternoon on the configuration. Runs the project in development/watch mode. Your project will be rebuilt upon changes. TSDX has a special logger for your convenience. Error messages are pretty printed and formatted for compatibility VS Code's Problems tab.

typescript rollup npm yarn react packaging react-dom bundling jest bundle

react-spring - ✌️ A spring physics based React animation library

•    TypeScript

---

react-spring is a spring-physics based animation library that should cover most of your UI related animation needs. It gives you tools flexible enough to confidently cast your ideas into moving interfaces. This library represents a modern approach to animation. It is very much inspired by Christopher Chedeau's animated and Cheng Lou's react-motion. It inherits animated's powerful interpolations and performance, as well as react-motion's ease of use. But while animated is mostly imperative and react-motion mostly declarative, react-spring bridges both. You will be surprised how easy static data is cast into motion with small, explicit utility functions that don't necessarily affect how you form your views.

react animation-library springs react-spring spring-physics animated animation hooks motion react-native spring typescript velocity

react-native-typescript-transformer - Seamlessly use TypeScript with React Native

•    Javascript

---

See tsconfig.json Notes for more advanced configuration details. Note that the platform-specific index files (index.ios.js, index.android.js, etc) still need to be .js files, but everything else can be TypeScript.

react-native typescript

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.

react typescript html css css-in-js office-ui-fabric-react microsoft redux redux-thunk