Deep dive into observed Components with React.js and FrintJS

  • Higher-order componentThe API of the observe higher-order component (HoC) is quite simple:import React from ‘react’;import { observe } from ‘frint-react’;function MyComponent(props) { return div…/div;}const ObservedComponent = default ObservedComponent;It receives a function (that we called fn above), where you can generate your props that will be ultimately passed to your target…
  • Generating props synchronouslyThe fn function also gives you access to the FrintJS App’s instance:const ObservedComponent = observe(function (app) { // this will be the `props` in MyComponent return {}; })(MyComponent);Since you have access to your app instance, you can also get values from it, including providers:const ObservedComponent = observe(function (app)…
  • Because they have this dynamic nature, the observe HoC gives you access to parent props as an Observable:const ObservedComponent = observe(function (app, props$) { // …})(MyComponent);In addition to your FrintJS App instance (app), there is a second argument props$, which is props passed down to you from the parent Component…
  • But as your application grows, there will be times, when you need to work with multiple Observables and return a single props stream.This is where a helper function called streamProps shipped with frint-react can come handy.If you are an RxJS ninja, you may skip this part =DThe streamProps function will…
  • In that case, you may want to pass some default props to your target component before new values are generated.The streamProps helper function receives an optional first argument, where you can pass your default props:import { streamProps } from ‘frint-react’;const defaultProps = { foo: ‘n/a’, bar: ‘n/a’, baz: ‘n/a’,};const props$…

Our focus in this article will be about using the observe higher-order component, shipped from frint-react package. To make the most out of this, it is advised that you read these previous articles…
Continue reading “Deep dive into observed Components with React.js and FrintJS”

Rails, React and me – codeburst

  • It uses rails to include only JS and Webpack compiled files which was perfect match for the use case.Figuring solutions is always easy, The difficult part is to figure out the problemReact_on_rails has given the instructions to setup existing rails project so I started with them but ran into many…
  • In this particular case, figuring out the problem became worse as the errors were misleading.The Aha Moment: Devil was in the detailsFinally to figure out the problem I created a sample project from scratch using react_on_rails new project setup instructions and started comparing the generated code with my existing project.
  • This particular information turned out to be crucial to get out of the problem I was facing which I was not aware of at that time.SolutionTo solve this issue just change your API controller to base controller.
  • Though I would suggest to convert your entire rails-5 api only app to normal rails app.
  • Once you have resolved everything run$bundle installThis will convert your rails-5 API only app to rails app which can easily be integrated with react_on_rails.

Integration of react and rails using react_on_rails gem in an existing rails-5 api only project
Continue reading “Rails, React and me – codeburst”

What’s New With Server-Side Rendering in React 16 – Hacker Noon

What’s New With Server-Side Rendering in React 16:  by @xander76 #JavaScript #ReactJS #NodeJS

  • Naturally, this feature is also supported by React 16’s server-side rendering.So, you can now server-render components that look like this:class MyArrayComponent extends React.Component { render() { return [ div key=”1″first element/div, div key=”2″second element/div ]; }}class MyStringComponent extends React.Component { render() { return “hey there”; }}class MyNumberComponent extends React.Component {…
  • To learn more about this feature, read Dan Abramov’s post on the React blog about the change.React 16 SSR Doesn’t Support Error Boundaries or PortalsThere are two new features in the React 16 client-side renderer that are unfortunately not supported in the server-side renderer: Error Boundaries and Portals.
  • If for any reason there’s a mismatch, React raises a warning in development mode and replaces the entire tree of server-generated markup with HTML that has been generated on the client.In React 16, though, the client-side renderer uses a different algorithm to check that the server-generated markup is correct.
  • And when the client-side renderer in React 16 detects a markup mismatch, it only attempts to change the HTML subtree that doesn’t match, rather than the entire HTML tree.Generally, this change shouldn’t have much effect for end users, except for one fact: React 16 doesn’t fix mismatched SSR-generated HTML attributes…
  • This performance optimization means that you will need to make extra sure that you fix any markup mismatch warnings you see in your app in development mode.React 16 Doesn’t Need To Be Compiled For Best PerformanceIn React 15, if you used SSR straight out of the box, performance was less…

There are lots of exciting new bits (most notably the Fiber rewrite), but personally, I’m most excited about React 16’s many improvements that have been made to server-side rendering. Let’s take a…
Continue reading “What’s New With Server-Side Rendering in React 16 – Hacker Noon”

Black Friday sale is live! Every course on the site is $10! Lowest price ever! Limited time!

#ReactJS #ReactNative #GraphQL Newsletter Issue 65

  • This week we start learning everything about React, figure out CSS in React & JS, use React Patterns, get started with the best early Black Friday developer deals and much more!
  • Are you curious about React and haven’t had the chance to learn it?
  • An Opinionated Take on the Current State of Navigation in React Native – – The new release has a lot of new features to facilitate the designing of robust components and enhancements to speed up the rendering pipeline.
  • That’s it for the newest edition of the best ReactJS, React Native & GraphQL Newsletter!
  • Like & follow for all the news about ReactJS, React Native & GraphQL!

This week we start learning everything about React, figure out CSS in React & JS, use React Patterns, get started with the best early Black Friday developer deals and much more!
Continue reading “Black Friday sale is live! Every course on the site is $10! Lowest price ever! Limited time!”

How HBO’s Silicon Valley built “Not Hotdog” with mobile TensorFlow, Keras & React Native

How HBO’s Silicon Valley built “Not Hotdog”, a real AI App:  via @timanglade #DataScience

  • The depth openness of the deep learning community, and the presence of talented minds like R.C. is what makes deep learning viable for applications today — but they also make working in this field more thrilling than any tech trend we’ve been involved with.Our final architecture ended up making significant departures from…
  • While this is a subject of some debate these days, our experiments placing BN after activation on small networks failed to converge as well.To optimize the network we used Cyclical Learning Rates and (fellow student) Brad Kenstler’s excellent Keras implementation.
  • This was hard to defend against as a) there just aren’t that many photographs of hotdogs in soft focus (we get hungry just thinking about it) and b) it could be damaging to spend too much of our network’s capacity training for soft focus, when realistically most images taken with…
  • Of the remaining 147k images, most were of food, with just 3k photos of non-food items, to help the network generalize a bit more and not get tricked into seeing a hotdog if presented with an image of a human in a red outfit.Our data augmentation rules were as follows:We…
  • Phase 2 ran for 64 more epochs (4 CLR cycles with a step size of 8 epochs), with a learning rate between 0.0004 and 0.0045, on a triangular 2 policy.Phase 3 ran for 64 more epochs (4 CLR cycles with a step size of 8 epochs), with a learning rate…

How Silicon Valley build the real AI app that identifies hotdogs — and not hotdogs using mobile TensorFlow, Keras & React Native.
Continue reading “How HBO’s Silicon Valley built “Not Hotdog” with mobile TensorFlow, Keras & React Native”

What’s New With Server-Side Rendering in React 16 – Hacker Noon

What’s New With Server-Side Rendering in #ReactJS 16:  by @xander76 #JavaScript #NodeJS

  • Naturally, this feature is also supported by React 16’s server-side rendering.So, you can now server-render components that look like this:class MyArrayComponent extends React.Component { render() { return [ div key=”1″first element/div, div key=”2″second element/div ]; }}class MyStringComponent extends React.Component { render() { return “hey there”; }}class MyNumberComponent extends React.Component {…
  • To learn more about this feature, read Dan Abramov’s post on the React blog about the change.React 16 SSR Doesn’t Support Error Boundaries or PortalsThere are two new features in the React 16 client-side renderer that are unfortunately not supported in the server-side renderer: Error Boundaries and Portals.
  • If for any reason there’s a mismatch, React raises a warning in development mode and replaces the entire tree of server-generated markup with HTML that has been generated on the client.In React 16, though, the client-side renderer uses a different algorithm to check that the server-generated markup is correct.
  • And when the client-side renderer in React 16 detects a markup mismatch, it only attempts to change the HTML subtree that doesn’t match, rather than the entire HTML tree.Generally, this change shouldn’t have much effect for end users, except for one fact: React 16 doesn’t fix mismatched SSR-generated HTML attributes…
  • This performance optimization means that you will need to make extra sure that you fix any markup mismatch warnings you see in your app in development mode.React 16 Doesn’t Need To Be Compiled For Best PerformanceIn React 15, if you used SSR straight out of the box, performance was less…

There are lots of exciting new bits (most notably the Fiber rewrite), but personally, I’m most excited about React 16’s many improvements that have been made to server-side rendering. Let’s take a…
Continue reading “What’s New With Server-Side Rendering in React 16 – Hacker Noon”

With styled-components into the future – 💅 styled-components – Medium

With styled-components into the future  #styledcomponents #react #cssinjs #css #reactjs

  • Those remain the same and intact.While this sounds like no more can be achieved from a library that was mostly about best practices and common patterns in CSS, we are still in a position to drive change in the community.And this is because of the ecosystem that people have created…
  • Even more so with our new docs that we’ve published a few months ago.But the real question is, what makes it the library you know and love?There’s a lot of great content and talks from both Max and Glen, so if you’re new to what the ideas of the library are,…
  • [1]Then we have to transform the CSS to be able to inject it [2], and finally inject your CSS into the stylesheet, at the position that we’ve marked earlier.In v2 and onwards we’ve focused a lot on optimising all of the different steps involved here for performance, but one step…
  • The idea that becomes increasingly important here is, that we can’t build a library that works for some special use cases, but what we can build is a CSS infrastructure that allows you to change the CSS yourself.Let’s see how we could approach this.The interesting thing is that with v1…
  • We can run our transformations during Babel’s transpilation, or during build-time in general.We can build a CSS-in-JS pipeline!This would result in nothing being shipped to the runtime, and as long as we can provide an “opt-in” system, you would still be able to decide whether you’d like to ship the…

styled-components has changed a lot in its past. And we are not even done yet!
Continue reading “With styled-components into the future – 💅 styled-components – Medium”