Beginner’s guide to react/redux —painting a mental model

  • I highly recommend anyone starting out with Redux to read the core concepts outlined in the official documentation.Long story short, Redux application has a plain object, known as store, which serves as data model for your app.
  • For example, for a list of articles, I can have an article state that looks like this:state = { articles: [{ “id”: 314, “title”: “6 innovative apps utilizing the ethereum network”, “source”: “Investopedia‎”, “link”: “date”: “1500523200”, “type”: “msm” }, { “id”: 893, “title”: “what is plasma and how will it strengthen…”, “source”: “Investopedia‎”, “link”: “date”: “1502856000”, “type”: “msm” },.
  • In our article example, fetching articles is an action that looks that this:{ type: ‘ARTICLES_FETCHED’, payload: [{ “id”: 314, “title”: “6 innovative apps utilizing the ethereum network”, “source”: “Investopedia‎”, “link”: “date”: “1500523200”, “type”: “msm” }, { “id”: 893, “title”: “what is plasma and how will it strengthen…”, “source”: “Investopedia‎”, “link”: “date”: “1502856000”, “type”: “msm” },.
  • In our article example, the reducer looks like this:const initialState = { articlesById: null,}export default function(state = initialState, action) { switch (action.type) { case types.ARTICLES_FETCHED: return { …state, articlesById: action.articlesById } default: return initialState }}To summarize the basic ideas of Redux:it describes state as plain objects, and store (global state) by merging all the states in your app.it describes changes to the app as plain objects.it uses pure functions to handle changes.The redux API then bridges your redux logics with react views while providing some utilities to compose states.Say we send a request to a remote server and fetch some articles.
  • The reducer evaluates the action and store the payload articles in the state.

Disclaimer: This article is written by a beginner trying to comb through new concepts she just learned. React/Redux is the hottest frontend frameworks these day. If you google the term Redux diagram…
Continue reading “Beginner’s guide to react/redux —painting a mental model”

React Native’s experimental new FlatList component – Kevin Cooper – Medium

Learn about React Native’s experimental new FlatList component:  #ReactJS #JavaScript

  • React Native’s experimental new FlatList componentIncluding: How to migrate from ListView, and how to try it in your own app without building React Native from source.The demo video posted on Facebook by Ahrens.
  • Image link goes to YouTube.Earlier this month, Spencer Ahrens published an experimental new React Native component called FlatList.
  • You’ll need to use the underlying VirtualizedList component for this.Disclaimer: I’m the creator of which makes it easier to use Immutable data with the old ListView as well as the new VirtualizedList.Here’s a migration guide from the old component if you want to try it yourself.
  • As you can see, your code should get a lot simpler (red means delete, green means add):Or if you were previously using ImmutableListView, it’s even more straightforward:The only caveat here is that you need to actually get the source code for the new React Native components in order to use them.
  • Copy this command into your terminal:This will download the latest version of FlatList and its related dependencies into your app’s node_modules so you can refer to it as in the examples above, without needing to checkout React Native’s master and build it from source.Keep in mind, the new components are not yet ready for production use, and the API could change at any time — again, it’s experimental — but give it a try!There’s a more extensive FlatListExample in React Native’s repo if you want to get a feel for the full set of props and how powerful the new component can be.

Including: How to migrate from ListView, and how to try it in your own app without building React Native from source.
Continue reading “React Native’s experimental new FlatList component – Kevin Cooper – Medium”

Five Reasons We Chose ReactJS

5 Reasons We Chose ReactJS #MVB Arnab Sarkar @arnabsarker  #webdev #javascript

  • The approach gives a developer high flexibility and amazing performance gains because React calculates what change is needed to be made in the DOM in advance and updates the DOM-trees .
  • The major advantage of React is that it makes proper use of native APIs and, as a result, the stack work across platforms.
  • The framework is used extensively in developing user interfaces for web applications.
  • This increases the application’s load time and helps to keep it running very smoothly without any interruptions.
  • javascript application, react framework, react.js, react js, react native, javascript best practice, js, javascript examples

Read the full article, click here.


@DZone: “5 Reasons We Chose ReactJS #MVB Arnab Sarkar @arnabsarker #webdev #javascript”


In this post, Arnab Sarkar lists five reasons why his team chose ReactJS. Check out his favorite aspects of the JavaScript library below.


Five Reasons We Chose ReactJS

More Ways to Extend React Storybook — KADIRA VOICE

We've introduce a new extension API for #reactjs storybook:

  • Today, we are introducing an extension API with which you can write extensions to React Storybook.
  • With addons you can add new functionalities to React Storybook.
  • We started to look for new ways to extend React Storybook while maintaining its stability.
  • You can also share extensions you’ve built and use extensions created by others .
  • You can use the Storybook UI to display anything you want.

Read the full article, click here.


@kadirahq: “We’ve introduce a new extension API for #reactjs storybook:”


We wanted React Storybook to be stable and customizable from day one. This came with a price: contributing to React Storybook was harder…


More Ways to Extend React Storybook — KADIRA VOICE