Migrating to React’s New Context API – kentcdodds

📝 Article => Migrating to React’s New Context API by @kentcdodds  | #ReactJS

  • Because of this significant change, I’m making an update to my advanced component patterns course on Egghead.io to use the new API rather than the old one.
  • The Old Context APIHere’s the version of the implementation with the old context API: – const TOGGLE_CONTEXT = ‘__toggle__’ – function ToggleOn({children}, context) { – const {on} = context[TOGGLE_CONTEXT] – return on ?
  • null : = { – [TOGGLE_CONTEXT]: ToggleButton(props, context) { – const {on, toggle} = context[TOGGLE_CONTEXT] – return ( – Switch on={on} onClick={toggle} {…props} / – ) – } – ToggleButton.contextTypes = { – [TOGGLE_CONTEXT]: Toggle extends React.Component { – static On = ToggleOn – static Off = ToggleOff – static…
  • on}), – () = ) – getChildContext() { – return { – [TOGGLE_CONTEXT]: { – on: this.state.on, – toggle: this.toggle, – }, – } – } – render() { – return div{this.props.children}/div – } – }With the old API, you had to specify a string for what context your component…
  • Here’s my new version of this same exercise: – const ToggleContext = React.createContext({ – on: false, – toggle: () = {}, – })class Toggle extends React.Component { – static On = ({children}) = ( – ToggleContext.Consumer – {({on}) = (on ?

With the recent release of React 16.3.0 came an official context API. You can learn more about the why and how behind this API from my previous blog post: “React’s ⚛️ new Context API”. Because of…
Continue reading “Migrating to React’s New Context API – kentcdodds”

My experience with React 16

  • If you have a React 15.5 app which doesn’t use deprecated features and doesn’t throw errors, then React 16 just works!
  • One of my favorite things about React is that it gives me access to a great library of open-source components.
  • And thanks to the stability of React’s API, I haven’t needed to upgrade many of these components… until now.
  • In previous versions of React, throwing exceptions within event handlers would have unpredictable results.
  • While React’s API hasn’t changed much, it has an entirely new engine under the hood called React Fiber.

Now I don’t want to waste your time with another “What is React 16?”; the official blog is already very informative. But what I can give you is the story of my experience this week, when I upgraded a large project to React 16.
Continue reading “My experience with React 16”

How to setup ReasonML for a React Native project – Tech Distillation

  • As there is no create-reason-react-native-app yet, we need to go through a manual process to setup Reason for app development with React Native (assuming you’re already familiar with React Native):Create React Native AppRather than trying to integrate Reason into an existing project I created a fresh React Native project using create-react-native-app and Expo:create-react-native-app AppWithReasoncd AppWithReasonObviously, as we are working with some libraries that are in an early stage of development you should put your project under version control with git, so you might want to start committing in git now and after each of the following steps.
  • We are going to use npm because it is used in the Reason docs but it should work with yarn as well.Add BuckleScript to the projectBuckleScript is a compiler with first level support for both OCaml and Reason which we need to add as a dependency to our project:npm install –save-dev bs-platform Once we are done with the setup, BuckleScript will automatically compile Reason code to JavaScript in the background for us, similar to Babel.Include ReasonReactThe React ecosystem is tightly integrated into React Native.
  • So, in order to have React features like JSX available in Reason on the same level of abstraction like we are used to in JavaScript, we are going to include Reason language bindings for React with ReasonReact:npm install –save-dev reason-reactProvide BuckleScript bindings for React NativeIn addition to React features provided by ReasonReact we want to be able to use React Native components and APIs.
  • Create the folder which will contain our Reason code:mkdir reAnd launch BuckleScript in watch mode:npm run watchThis will automatically compile our Reason code to JavaScript whenever a change occurs.
  • By the way, the BuckleScript compiler is very fast and won’t slow down the fast development experience we are used to with live reload in React Native.Now switch to your editor to add your first React Native component written in Reason:open ReactNative;let app () = View style=Style.

ReasonML has the potential to take JavaScript programming to the next level. Let’s setup a React Native project to start playing with Reason for app development.
Continue reading “How to setup ReasonML for a React Native project – Tech Distillation”

React.js best practices and conventions

An opinionated guide to #ReactJS best practices and conventions:  #JavaScript

  • The following guidelines mostly focus on component structure and JSX.
  • However, by following a few general guidelines for handling JSX in components, it’s far more readable and not such an eyesore.
  • No matter how few elements are being returned, I choose to write any JSX which contains nested elements across multiple lines with indentation to enhance readability, i.e:

    Furthermore, while the parenthesis are not technically required with a single line JSX statement, I still use them for the sake of consistency (and because unrestrained elements floating about in my JS makes my left eye twitch uncontrollably).

  • These guidelines are by no means authoritative or exhaustive, but I feel they are a good starting point for organising and standardising React components and some of the more common use cases I encounter.
  • Hopefully these guidelines provide a useful starting point for organising your React components.

An opinionated set of React.js best practices to make components more readable, more robust and easily maintainable.
Continue reading “React.js best practices and conventions”

I’m Sticking With React (For Now) – Hacker Noon

I’m Sticking With React (For Now) @SeanKilgarriff  #Reactjs #JavaScript #WebDev

  • I used a package for React to handle my CSS transitions because they are difficult to implement when working with a virtual dom.
  • In one quick google you can find any package for React written as a component.
  • Inferno had no solution for CSS transitions.
  • While I understand that both of these frameworks are still very much under construction, the stability that React provides my applications is too good to give up.
  • With both Inferno and Preact, there was no solution for my custom CSS transitions – the infrastructure just wasn’t there .

Last month, I converted my personal website to React after gaining a lot of experience with it in the workplace. I used my website as a guinea pig to stretch React to the limits and see what I could…
Continue reading “I’m Sticking With React (For Now) – Hacker Noon”

Jest 14.0: React Tree Snapshot Testing · Jest

  • For Facebook’s native apps we use a system called “snapshot testing”: a snapshot test system that renders UI components, takes a screenshot and subsequently compares a recorded screenshot with changes made by an engineer.
  • As a result many people stopped writing tests altogether which eventually led to instabilities.
  • With snapshot testing I do not need the output files, the snapshots are generated for free by Jest!
  • Engineers frequently told us that they spend more time writing a test than the component itself.
  • import renderer from ‘react/lib/ReactTestRenderer’ ; test ( ‘Link renders correctly’ , ( ) = > { const tree = renderer .

Read the full article, click here.

@cpojer: “Jest 14.0: React Snapshot Testing, experimental React-Native support and future plans for Jest. Try it out now!”

One of Jest’s philosophies is to provide an integrated “zero-configuration” experience. We want to make it as frictionless as possible to write good tests that are useful. We observed that when engineers are provided with ready-to-use tools, they end up writing more tests, which in turn results in stable and healthy code bases.

Jest 14.0: React Tree Snapshot Testing · Jest

“create-react-app” and the future of creating React applications — Free Code Camp

“create-react-app” and the future of creating React Applications  #reactjs

  • eject will take all of the default configuration and build dependencies given to you by create-react-app , then move them into the project itself.
  • Overall, I’m excited for this project.
  • But now you’ll have the ability to modify any of the default configurations you were given by create-react-app .
  • When you build a React app, you don’t need to know the secret combination of Webpack and Babel.
  • The project is opinionated, and with those opinions comes tradeoffs.

Read the full article, click here.

@ferroariel: ““create-react-app” and the future of creating React Applications #reactjs”

Over the past few years, I’ve been heavily involved with teaching people how to build applications with React.js. First there was React…

“create-react-app” and the future of creating React applications — Free Code Camp

Optimize React-Redux App

  • Are some excellent tools from the React team.
  • Both props and state are shallow-compared so state elements should follow mentioned rules as well.
  • connect function wraps the component inside another component with lots of decorated elements.
  • You need to use both React’s state and Redux’s store .
  • When you create stateful components (containers) using connect function from react-redux library, shouldComponentUpdate is declared implicitly, so you normally don’t have to implement it yourself.

Read the full article, click here.

@DangHaiAn1: “Some tips on how to optimize react/redux app’s performance #reactjs #redux #performance”

Posted in


tags :

reactjs ,

redux ,


on May 26, 2016

Optimize React-Redux App