# ReactJS News ReactJS News! This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Using Proxies with Redux Types DevFeed: [Using Proxies with Redux Types]() Original publisher: [Read original article]() Author: Zach Silveira Published: 2017-03-28T16:00:00Z Content type: tutorial Language: en Sources: [ReactJS News]() Topics: [Redux](), [debugging](), [Code]() Tags: [code](), [debugging](), [errors](), [es2015](), [es6](), [import](), [js](), [react](), [redux]() ### AI overview This tutorial explains how misspelled Redux action types can be imported as undefined without raising browser errors, causing reducers to fall through to their default case. It proposes using ES2015 Proxies to validate action-type properties and make such mistakes easier to detect. ### Source excerpt One of the most common problems that I run into when using Redux is trying to figure out why an action is not being captured by a reducer. For someone just getting starting with Redux, debugging this issue can be especially overwhelming because of how Redux manages data flow. So before you start pouring over configuration code, or the logic contained in your action creators and reducers, please, make sure your action types are defined and spelled correctly. One of the most common problems that I run into when using Redux is trying to figure out why an action is not being captured by a reducer. For someone just getting starting with Redux, debugging this issue can be especially overwhelming because of how Redux manages data flow. So before you start pouring over configuration code, or the logic contained in your action creators and reducers, please, make sure your action types are defined and spelled correctly. In any application that I have built, most bugs that I have run into are simply due to typos. However, the solution to this particular problem is harder to spot because no errors are raised when the application is run. Take a look at the snippet below. // actionTypes.js export const FETCH_FILE_REQUEST = 'fetch_file_request'; export const FETCH_FILE_SUCCESS = 'fetch_file_success'; export const FETCH_FILE_FAIL = 'fetch_file_fail'; // filesReducer.js import { FETCH_FILE_REQUEST, FETCH_FILE_SUCESS, FETCH_FILE_FAIL } from '../actions/actionTypes'; const filesReducer = (state = {}, action) => { switch (action.type) { case FETCH_FILE_SUCESS: return { ...state, file: action.payload }; default: return state; } } export default filesReducer; Assuming we dispatched an action with type FETCH_FILE_SUCCESS, the filesReducer should catch the action before the default case is returned. But what if that is not happening? Where do we start the debugging process. There does not appear to be anything wrong with the code in the reducer; the action type was imported and matches the ## Component Kits for React Native DevFeed: [Component Kits for React Native]() Original publisher: [Read original article]() Author: Zach Silveira Published: 2017-03-07T17:00:00Z Content type: comparison Language: en Sources: [ReactJS News]() Topics: [React Native](), [ui](), [cross-platform](), [Library](), [Android](), [iOS]() Tags: [android](), [bug](), [components](), [cross-platform](), [ios](), [native](), [react](), [react-native](), [ui](), [ui-components]() ### AI overview The article compares several component kits for React Native. It explains that React Native has fewer styling solutions than web React and that component customization can be difficult, then discusses NativeBase, React Native Elements, React Native Material Design, and React Native Material Kit, including their strengths, limitations, documentation, maintenance, and reported bugs. ### Source excerpt You won't find as many styling solutions for React Native as you will for React JS. This stems from two simple realities: React Native is a much smaller target for component libraries than traditional CSS frameworks. In other words, Bootstrap CSS can be used with any web framework, whereas component libraries for React Native only work with...you guessed it...React Native. Customizing React Native styling isn't the easiest thing in the world. Many apps demand custom styling, which makes component kits not too useful. In addition, it is challenging to customize each and every component, as the flexibility that you gain with traditional CSS on the web doesn't carry over easily to component libraries. With that said, here are a few options. You won't find as many styling solutions for React Native as you will for React JS. This stems from two simple realities: React Native is a much smaller target for component libraries than traditional CSS frameworks. In other words, Bootstrap CSS can be used with any web framework, whereas component libraries for React Native only work with...you guessed it...React Native. Customizing React Native styling isn't the easiest thing in the world. Many apps demand custom styling, which makes component kits not too useful. In addition, it is challenging to customize each and every component, as the flexibility that you gain with traditional CSS on the web doesn't carry over easily to component libraries. With that said, here are a few options. NativeBase - Essential cross-platform UI components for React Native A huge collection of components, most of which look quite nice. That's the plus side. The down side is that some of the components are somewhat buggy. No offense to the library authors, its just the state of the library - it needs a bit of work. For example, here's an issue I opened a few days ago when I discovered the swipe deck component crashed when only a single data element was provided: DeskSwiper throws on single element lists - Iss ## The Diverse React Navigation Ecosystem DevFeed: [The Diverse React Navigation Ecosystem]() Original publisher: [Read original article]() Author: Zach Silveira Published: 2017-03-06T17:00:00Z Content type: article Language: en Sources: [ReactJS News]() Topics: [React](), [React Native](), [Routing (disambiguation)](), [React Router](), [Redux]() Tags: [code](), [community](), [deprecated](), [native](), [react](), [react-native](), [react-router](), [redux](), [router](), [routing]() ### AI overview The article compares navigation in React and React Native. It presents React Router as a well-supported incumbent, while describing React Native navigation as rapidly changing, with several official navigators and community projects addressing common patterns such as sidebars, tab bars, and headers. ### Source excerpt The routing ecosystem around React and React Native is quite different. One is characterized by a strong incumbent, and the other is plagued by rapid change. React JS No question about it, React Router (ReactTraining/react-router) is king here. They have the benefit of several years of active development, along with an active community submitting PR's, fixes, etc. Supplement that with myriad tutorials and how-to's and you end up with a well-supported, stable product. To be fair, React Router has suffered some major API upsets, and is nearly the poster-child for javascript fatigue but the maintainers have declared their lasting support for a few specific versions, which means you can plop down with V3 and be good to go for the next 12 to 24 months. React Native Ok, this is where things start to get really, really crazy. The most important thing to keep in mind is that the React Native team has produced three navigation helpers: NavigatorIOS, Navigator, and NavigatorExperimental. NavigatorIOS was quickly deprecated, as it was supported only by (you guessed it) IOS. Navigator is the currently endorsed solution for navigation, at least if you are following the official docs. However, its about to be upset by- NavigationExperimental. This is an updated navigator that has learned some lessons from Navigator, and has some solid integration with Redux. 'Navigator' is (or was!) sleighted to be deprecated in favor of NavigationExperimental at some point. Already you have three 'official' navigators supported by the React Native team. The big issue with all three of these is that they are somewhat lightweight and don't include a lot of common navigation situations out of the box, like sidebars, tab bars, headers, etc. To solve that, the community has introduced... React Native Router Flux (aksonov/react-native-router-flux). My personal favorite, this is router is based upon NavigationExperimental. You can imagine that the authors looked at NavigationExperimental, realized that e ## Exponent simplifies React Native development, testing, and deployment DevFeed: [Exponent simplifies React Native development, testing, and deployment]() Original publisher: [Read original article]() Author: Zach Silveira Published: 2016-11-22T17:00:00Z Content type: article Language: en Sources: [ReactJS News]() Topics: [React Native](), [Development](), [ide](), [Deployment](), [Mobile](), [Testing](), [Android](), [iOS]() Tags: [android](), [deployment](), [development](), [ide](), [ios](), [javascript](), [mobile](), [react](), [react-native](), [testing]() ### AI overview An interview with Exponent cofounder Charlie Cheever explains how Exponent augments React Native by simplifying setup, development, testing, and deployment. The tool handles native-code setup so developers can write React Native apps using JavaScript without directly configuring Swift, Objective-C, Java, Xcode, or Android Studio. ### Source excerpt React Native continues on a development spree in late 2016. With an ambitious two-week release cycle, the framework makes rapid progress towards feature and performance parity with its native Android and iOS equivalents. At the same time, these quick release periods frequently introduce breaking changes, difficulty with setup, and challenges with basic configuration. Enter Exponent, a tool that promises easier setup, development, and deployment of React Native applications. Rather than being a replacement for React Native, as it is sometimes confused, Exponent augments React Native by dramatically simplifying the development and deployment processes. Whereas basic setup with an Android environment to develop with React Native can take over an hour by hand, even for experienced engineers, Exponent shortens the time to start to "Hello World" to a handful of minutes. React Native continues on a development spree in late 2016. With an ambitious two-week release cycle, the framework makes rapid progress towards feature and performance parity with its native Android and iOS equivalents. At the same time, these quick release periods frequently introduce breaking changes, difficulty with setup, and challenges with basic configuration. Enter Exponent, a tool that promises easier setup, development, and deployment of React Native applications. Rather than being a replacement for React Native, as it is sometimes confused, Exponent augments React Native by dramatically simplifying the development and deployment processes. Whereas basic setup with an Android environment to develop with React Native can take over an hour by hand, even for experienced engineers, Exponent shortens the time to start to "Hello World" to a handful of minutes. Exponent's prime feature is revealed as it's namesake IDE. The Exponent IDE is development platform for not only developing apps to test in their respective environment simulators, but also simplifies testing them on real devices. One of the cofo ## Routing in React Native with Jake Murzy DevFeed: [Routing in React Native with Jake Murzy]() Original publisher: [Read original article]() Author: Zach Silveira Published: 2016-09-28T17:00:00Z Content type: opinion Language: en Sources: [ReactJS News]() Topics: [React Native](), [Routing (disambiguation)](), [React Router](), [React](), [Library](), [Open Source]() Tags: [js](), [library](), [open-source](), [react](), [react-native](), [react-router](), [routing]() ### AI overview An interview with Jake Murzy about a new React Native navigation library created to provide a routing approach similar to React Router. The article describes React Native's unsettled routing ecosystem and the author's frustration with existing solutions, including deprecated, unstable, incomplete, or low-level options. ### Source excerpt Jake Murzy has been hard at work creating a new navigational library for React Native over the last couple of months. While React JS has the benefit of the highly-regarded React Router, such a comprehensive routing solution doesn't exist yet in the React Native community. In fact, React Native's routing landscape has been in constant upheaval for the last year. The library itself has official three 'navigators' for handling decision making on which components to show the user, including 'NavigatorIOS', 'Navigator', and - more recently - 'NavigatorExperimental'. The open source community likewise has the packages 'React Native Router Flux', 'React Native Router Native', and 'React Native Redux Router', which of which are in various states of completion, or, more commonly, disrepair. Jake Murzy has been hard at work creating a new navigational library for React Native over the last couple of months. While React JS has the benefit of the highly-regarded React Router, such a comprehensive routing solution doesn't exist yet in the React Native community. In fact, React Native's routing landscape has been in constant upheaval for the last year. The library itself has official three 'navigators' for handling decision making on which components to show the user, including 'NavigatorIOS', 'Navigator', and - more recently - 'NavigatorExperimental'. The open source community likewise has the packages 'React Native Router Flux', 'React Native Router Native', and 'React Native Redux Router', which of which are in various states of completion, or, more commonly, disrepair. React Router Native appears to focus on matching the API of the immensely popular React Router package, even going as far as introducing the concept of a URL into React Native, which bucks the notion that only web applications need or deserve a URL. Today Jake is going to share some of his thoughts about his new library. Q: Hi Jake! The React Native library contains several navigation solutions and the surround ## Integrating React and D3.js for Data Visualization DevFeed: [Integrating React and D3.js for Data Visualization]() Original publisher: [Read original article]() Author: Zach Silveira Published: 2016-04-21T17:00:00Z Content type: tutorial Language: en Sources: [ReactJS News]() Topics: [React](), [Data visualization](), [JavaScript](), [User Interfaces](), [Document Object Model (DOM)](), [Library]() Tags: [d3](), [d3-js](), [data-visualization](), [declarative](), [interfaces](), [javascript](), [libraries](), [react](), [user-interfaces](), [web-applications]() ### AI overview This tutorial explains how React and D3.js can be used together for data visualization. It contrasts React's virtual DOM and reusable UI components with D3's direct DOM manipulation and data-focused utilities, and discusses React's role in building client-side interfaces. ### Source excerpt D3 is great at data visualizations, but it manipulates the DOM directly to display that data. Rendering DOM elements is where React shines. It uses a virtual representation of the DOM (virtual DOM) and a super performant diffing algorithm in order to determine the fastest way to update the DOM. We want to leverage React's highly efficient, declarative, and reusable components with D3's data utility functions. At this point, we can safely say that React is the preferred JavaScript library for building user interfaces. It is used practically everywhere and is almost as pervasive as jQuery. It has an API that is simple, powerful, and easy to learn. Its performance metrics are really impressive thanks to the Virtual DOM and its clever diff algorithm between state changes. Nothing, however, is perfect, and React too has its limitations. One of React's greatest strengths is the ease with which it integrate third-party libraries, but some libraries, especially opinionated ones, are more difficult to integrate than others. An extremely popular library that can be tricky to integrate with React is D3.js. D3 is an excellent data visualization library with a rich and powerful API. It is the gold standard of data visualizations. However, Because this library is opinionated about data, it is no trivial endeavour to get it to work with React. A few simple strategies permit these two libraries to work together in very powerful ways. Editor's Note: Check out our upcoming workshop, React and D3, a crash course in learning how to create data visualizations with these two in demand libraries. Reserve your spot now on Eventbrite and get 20% off admission. Learn more at the Eventbrite page What is React? React is an open-source JavaScript library for creating user interfaces that addresses the challenges of building large applications with data that changes over time. Originally developed at Facebook, it is now seen in many of the most commonly used web applications including Instagram, ## How to Make Your React Apps 15x Faster DevFeed: [How to Make Your React Apps 15x Faster]() Original publisher: [Read original article]() Author: Zach Silveira Published: 2016-04-07T17:00:00Z Content type: tutorial Language: en Sources: [ReactJS News]() Topics: [React](), [JavaScript](), [Single-page application (SPA)](), [Chrome](), [modern web development]() Tags: [babel](), [chrome](), [how-to](), [javascript](), [optimization](), [performance](), [react](), [webpack]() ### AI overview A tutorial on measuring and improving the runtime performance of React applications. It describes establishing a baseline with Chrome DevTools and reports reducing HelloSign's render time from more than 3,000 milliseconds to less than 200 milliseconds through several fixes. ### Source excerpt Without any modifications, React is really fast as-is. There are, however, a few things that you can do to improve performance. While working at HelloSign, I discovered some quick fixes that made our apps incredibly snappy. With these simple changes, I was able to reduce render time from over 3000 milliseconds to less than 200 milliseconds. Without any modifications, React is really fast as-is. There are, however, a few things that you can do to improve performance. While working at HelloSign, I discovered some quick fixes that made our apps incredibly snappy. With these simple changes, I was able to reduce render time from over 3000 milliseconds to less than 200 milliseconds. Editor's Note: Check out our upcoming React University Workshops. Our next workshop, React 2016, will be held on April 23 at Microsoft Reactor in San Francisco and will offer a deep dive into creating modern Single-Page Applications (SPA) using React, Redux, React Router, Immutable.js, and Webpack. Also, if you're interested in learning the basics about what it takes to be a Data Visualization Engineer, check out React and D3. Introduction HelloSign is a cloud-based electronic signature tool founded in 2010. As you can imagine, HelloSign is a very JavaScript-heavy codebase. A lot of client-side behavior is necessary to create a rich signing experience. Lately, we've moved much of our codebase toward React. In fact, in many places we've broken up our codebase into several single-page applications written in React. Although the HelloSign team was happy with React's performance before I initially joined the project, I quickly found some low-hanging fruit that could improve runtime speed. Here are the steps you should take to see similar improvements in your own applications. Create a Baseline Performance Measurement Before you begin, you should take a baseline measurement. Optimizations are meaningless if you can't verify the results of your modifications. Thankfully, Chrome has excellent develop ## Building Redux Middleware DevFeed: [Building Redux Middleware]() Original publisher: [Read original article]() Author: Zach Silveira Published: 2016-03-13T23:00:09Z Content type: tutorial Language: en Sources: [ReactJS News]() Topics: [Redux](), [API]() Tags: [article](), [building](), [callback](), [function](), [guide](), [middleware](), [react](), [redux](), [request](), [state](), [webpack]() ### AI overview A tutorial on building Redux middleware. It explains middleware as a chain of functions, shows how to apply custom middleware, filters actions by type, and demonstrates handling a POST request before invoking a callback. ### Source excerpt After writing my post a few months ago on building your own redux app, I have been asked a couple times to write a guide on creating redux middleware and how it works. This will be a quick post on how you can acheive anything with your own middleware! ##Basic middleware const customMiddleware = store => next => action => { if(action.type !== 'custom') return next(action) //do stuff! } Applying it: import { createStore, applyMiddleware, } from 'redux' import reducer from './reducer' import customMiddleware from './customMiddleware' const store = createStore( reducer, applyMiddleware(customMiddleware) ) Whaaa? store => next => action => I know that looks confusing. Essentially you are building a chain of functions, it will look like this when it gets called: //next looks something like this: let dispatched = null let next = actionAttempt => dispatched = actionAttempt const dispatch = customMiddleware(store)(next) dispatch({ type: 'custom', value: 'test' }) All you are doing is chaining function calls and passing in the neccesary data. When I first saw this I was confused a little due to the long chain, but it made perfect sense after reading the article on writing redux tests. So now that we understand how those chained functions work, let's explain the first line of our middleware. if(action.type !== 'custom') return next(action) There should be some way to tell what actions should go through your middleware. In this example, we are saying if the action's type is not custom call next, which will pass it to any other middleware and then to the reducer. ##Doing Cool stuff The official guide on redux middleware covers a few examples on this, I'm going to try to explain it in a more simple way. Say we want an action like this: dispatch({ type: 'ajax', url: 'http://api.com', method: 'POST', body: state => ({ title: state.title description: state.description }), cb: response => console.log('finished!', response) }) We want this to do a post request, and then call the cb fu ## React Router & Webpack in Production DevFeed: [React Router & Webpack in Production]() Original publisher: [Read original article]() Author: Zach Silveira Published: 2016-03-13T04:00:09Z Content type: article Language: en Sources: [ReactJS News]() Topics: [React Router](), [Webpack](), [Development](), [Code](), [API]() Tags: [api](), [code-splitting](), [polyfill](), [react](), [react-router](), [webpack]() ### AI overview A practical account of using React Router and Webpack in production for a large application with many routes and code splits. It explains the client-side setup, route organization, asynchronous data loading, server rendering, and differences between server and client builds. ### Source excerpt I've been working on a pretty large react-router codebase at work. Currently it has around 50~ code splits, which as you can imagine, is a lot of routes. This is going to be a post on the things I've learned throughout building out my development / production config and how we are using webpack in production. ###Initial Setup Before I really dive into how my webpack config is setup and the problems I've found, I'll quickly go over how this app is setup. Currently, there's one entry point and it looks like this: import React from 'react' import { render } from 'react-dom' import { match, Router, browserHistory } from 'react-router' import AsyncProps from 'async-props' import routes from '../routes/index' /* globals document, window */ const { pathname, search, hash } = window.location const location = `${pathname}${search}${hash}` match({ routes, location }, () => { render( } routes={routes} history={browserHistory} />, document.getElementById('app') ) }) It looks like a standard react-router setup, except a couple things are different. For one, there's way too many routes to have them all in this file, so we are importing the main route object into this file. Second, we are using match on the client side. Without matching first, the client side would try to render before the splits were downloaded causing an error. You can read a little more about match on the client here. Next, we are using Ryan Florence's awesome async-props library for loading data into components. It allows me to load data from an api before the server renders components. It will pass the data down to the client for the client-side render, and then data will load as you navigate to new pages automatically. ###Routes Our main routes file looks like this: export default { component: 'div', path: '/', indexRoute: require('./index'), childRoutes: [ require('./login'), require('./account'), ... ] } There's a lot more require's in our app of course. And