Why’s React Native so promising?

Why is #ReactNative so promising? Read Valentin's blog post to find out!

  • React Native looks a lot like React: roughly the same syntax, classes, JSX, state, props… but React Native is a framework, which means you have more features than just rendering in React Native.
  • To do that, the Facebook team created a bunch of APIs to interact with the camera, the keyboard, the vibrations… – – One of the big advantages of using React Native is that, while the core app runs in a JavaScript Engine, it uses JSX to render native code.
  • You use classes, ES6, states and the like, with a few notable differences: – – Not much to say here except that Redux, the React developers’ favourite state management library, also works with React Native with absolutely no difference in the way you’ll dev.
  • Here’s an example of a small Menu component: – – This article is not about HOCs; just know they allow a greater flexibility around the way you compose your components and you can use them in React Native.
  • With React Native you can compose your styles and properties, combine them and then have them applied onto your component.

Continue reading “Why’s React Native so promising?”

Higher Order Components in React – CloudBoost

Higher Order Components in React  #higherordercomponents #react #reactjs #javascript #reactjs

  • We must find a way to abstract that repetitive logic in order to avoid going through our codebase every time we want to make a change.What are Higher Order Components?As the name suggests — a Higher Order Component is some special and more important component.
  • If you’ve ever used map, reduce or filter you have already used HOF without even knowing.Similarly to that – Higher Order Components take a component as input and return another component.
  • Some of the more Object Oriented programmers will immediately scream “inheritance”, but have in mind that React favors composition.How do we make a HOC?Let’s start simple and make a HOC that we will use to log the clicks of our users.Here our function takes the component we will be wrapping as an argument and returns a brand new component with all the attached functionality to it.
  • To create our new component we will simply call the function and pass the wrapped one as a parameter.const LogsClicks = else can we do with HOCs?Higher Order Components can be used every time you’ve got repetitive logic in your components.
  • Now when the component mounts and every time it updates, our component will now look at the authenticated property and will redirect to the home page if it’s false.Something to note is that when we’re using the connect helper in order to attach our component to Redux’s store, we are creating another Higher Order Component.

Components are the building blocks of React. We separate our UI into small pieces that are responsible for rendering and managing the state of a particular part of the application. But even though…
Continue reading “Higher Order Components in React – CloudBoost”

developit/_delegated-component.md Last active Sep 15, 2016

What would Backbone-style event delegation look like in preact/#reactjs?

/cc @matthewcp

  • export default class DelegatedComponent extends Component {
  • component[h] : h)(e) === false ) return false ;
  • /** Create delegate event handlers for a component that can then be passed as props to its base.
  • export const delegate = events => Child => props => < Delegate { ...
  • import { h , cloneElement , Component } from ‘ preact ‘ ;

What if we wanted to use backbone-style event delegation within the component paradigm afforded by react/preact/etc?
Would that be useful?
Continue reading “developit/_delegated-component.md Last active Sep 15, 2016”

Higher Order Components: A React Application Design Pattern

Higher order components: A #ReactJS app design pattern

  • Because higher order components often wrap an existing component you’ll often find you can define them as a functional component.
  • You need some of your React components to be able to access this information, but rather than blindly making it accessible for every component you want to be more strict about which components receive the information.
  • We’ll discuss how pure functions keep code clean and how these same principles can be applied to React components.
  • In the React ecosystem these components are known as higher order components because they take an existing component and manipulate it slightly without changing the existing component .
  • A higher order function is a function that when called, returns another function.

Read the full article, click here.

@ReactiveConf: “Higher order components: A #ReactJS app design pattern”

Jack Franklin takes a look at Higher Order Components, a design pattern that helps keep your React applications tidy, well structured and easy to maintain.

Higher Order Components: A React Application Design Pattern

Redux, Immutability, and Higher Order Components

Redux, immutability, and higher order components:  #ReactJS

  • A higher order component is exactly what it sounds like — it is the React component equivalent of a higher order function.
  • In React, a higher order component is a function that accepts a component and returns an enhanced component with superhero abilities.
  • A simple example of a higher order function in Haskell that takes a function and applies it twice to something.
  • , connect() is, through mapDispatchToProps() , subscribing the TodoList component to a change handler that will toggle a todo when the todo is clicked.
  • Well, arguably, one of the key concepts when using Redux with React lies in a higher order component: connect() .

Read the full article, click here.

@ReactiveConf: “Redux, immutability, and higher order components: #ReactJS”

As I wrote in a previous blog post, immutability is an important concept that can bring many benefits to development. In fact, it’s been embraced by javascript land, most notably by the ultra-popular framework, Redux.

Redux, Immutability, and Higher Order Components