With React Storybook, you can develop and design UI components outside your app in an isolated environment. It will change how you develop UI components. Oh, it also plays nice with create-react-app. React Storybook →Introducing React Storybook →React Storybooks meets Create React App →
Tag Archives: react
Creating a React app with create-react-app
Tyler McGinnis, after having been involved in quite a lot of tutorials/courses/workshops teaching on how to build a React app: Throughout all of these workshops, one thing was consistent: getting started with a React application was pretty overwhelming, for both beginners and senior developers alike. I can confirm this I must say. The tutorials and …
Continue reading “Creating a React app with create-react-app“
Distributing your React Component as a Standalone Version
At work we’ve been building quite some stuff on top of React the past few months. We use Grunt (and more recently Webpack) to run browserify with the babelify transform to transpile our ES6 code into ES5. Earlier this week I came to the point where I wanted to distribute a built component as a …
Continue reading “Distributing your React Component as a Standalone Version”
Getting Started with Redux
Managing state in an application is critical, and is often done haphazardly. Redux provides a state container for JavaScript applications that will help your applications behave consistently. Redux is an evolution of the ideas presented by Facebook’s Flux, avoiding the complexity found in Flux by looking to how applications are built with the Elm language. …
Pepperoni – A delicious blueprint for mobile development
Pepperoni is a blueprint for building cross-platform mobile experiences rapidly with ready-to-use integrated building blocks for common mobile app features, powered by React Native. The Pepperoni blueprint is crafted on a solid foundation using modern architecture and industry best practices. Pepperoni →
Draft.js – Rich Text Editor Framework for React
Draft.js is a framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences. Draft.js makes it easy to build any type of rich text input, whether you’re just looking to support a few inline text styles or building a complex text editor for composing long-form articles. The …
Continue reading “Draft.js – Rich Text Editor Framework for React”
Redux DevTools Chrome Extension
A Chrome DevTools Extension, wrapping around Redux DevTools: The Redux DevTools themselves are a live-editing time travel environment for Redux: Lets you inspect every state and action payload Lets you go back in time by “cancelling” actions If you change the reducer code, each “staged” action will be re-evaluated If the reducers throw, you will …
Motion Design in React.js with “React Motion”
import {Motion, spring} from 'react-motion'; // In your render: <Motion defaultStyle={{x: 0}} style={{x: spring(10)}}> {value => <div>{value.x}</div>} </Motion> This library provides an alternative, more powerful API for React’s TransitionGroup. For 95% of use-cases of animating components, we don’t have to resort to using hard-coded easing curves and duration. Set up a stiffness and damping for …
Continue reading “Motion Design in React.js with “React Motion””
Motion Design in React.js: UI Animations with CSSTransitionGroup and TransitionGroup
React Interface without (left) and with (right) animations In this article, I am going to use the official components from React.js addons. There are other components/libraries that are better for the job but at the end of the article you will get a good amount of React.js animation practice to better understand these other components. …
Setting up React for ES6 ES2015 with Webpack and Babel
This resource came in quite handy when setting up React in combination with ES6 ES2015, Webpack and Babel. Installing all the required dependencies: # Install Webpack npm install –save-dev webpack # Install the Babel Loader, for use with Webpack npm install –save-dev babel-loader # Install the es2015 and react presets, for use with Babel npm …
Continue reading “Setting up React for ES6 ES2015 with Webpack and Babel”