React JS 16.0 released

New version of React JavaScript library available now with many new features
27 September 2017   2346

Popular JavaScript library, created to design user interfaces, received new update.

What's new?

Let's check what's inside. According to the official blog, among the changes are some long-standing feature requests, including fragments, error boundaries, portals, support for custom DOM attributes, improved server-side rendering, and reduced file size.

New render return types: fragments and strings

You can now return an array of elements from a component's render method. Like with other arrays, you'll need to add a key to each element to avoid the key warning:

render() {
  // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

Support for returning strings was added too:

render() {
  return 'Look ma, no spans!';
}

Portals

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

render() {
  // React does *not* create a new div. It renders the children into `domNode`.
  // `domNode` is any valid DOM node, regardless of its location in the DOM.
  return ReactDOM.createPortal(
    this.props.children,
    domNode,
  );
}

Support for custom DOM attributes

Instead of ignoring unrecognized HTML and SVG attributes, React will now pass them through to the DOM. This has the added benefit of allowing us to get rid of most of React's attribute whitelist, resulting in reduced file sizes.

Reduced file size

Despite all these additions, React 16 is actually smaller compared to 15.6.1!

  • react is 5.3 kb (2.2 kb gzipped), down from 20.7 kb (6.9 kb gzipped).
  • react-dom is 103.7 kb (32.6 kb gzipped), down from 141 kb (42.9 kb gzipped).
  • react + react-dom is 109 kb (34.8 kb gzipped), down from 161.7 kb (49.8 kb gzipped).

That amounts to a combined 32% size decrease compared to the previous version (30% post-gzip).

Better server-side rendering

React 16 includes a completely rewritten server renderer. It supports streaming, so you can start sending bytes to the client faster. And thanks to a new packaging strategy that compiles away process.env checks (Believe it or not, reading process.env in Node is really slow!), you no longer need to bundle React to get good server-rendering performance.

See official website for more information. 

Frontend News Digest 3 -9.08

Learn this week's latest news and updates of JavaScript, CSS, PHP and related technologies
08 August 2019   495

Greetings! I hope your week went great! Here's new Frontend news digest.

In this digest, you will learn how to improve your procedural code, how to deploy apps to to IBM cloud with Tekton, how to use Immer to manage your React state and much more!

Guides

  • Trigger Firebase Storage Image Resize with Cloud Functions

Tutorial on creating an imager resizer triggered by Firebase Storage

  • Using pipe and compose to improve procedural code

According to the creator, this guide will sohw you how to use pipe and compose to improve the way we write procedural code.

  • Deploying Applications to IBM Cloud Kubernetes via Tekton

This article talks about Tekton, an open-source framework for creating CI/CD systems, and explains how to deploy and use it on the IBM Cloud Kubernetes service

  • Quick Gulp Cache Busting

This tips will allow you to improve your work with Gulp

  • Using Immer for React State Management

Learn how Immer can help you to operate React states

Article

  • Laravel Cloud Source Code on GitHub

Author believes that is a chance to get a glimpse of an application written by the creator of Laravel

Updates

  • Calendario

Library allowing to create flexible calendars

  • Symphony

According to the creators, 113 pull requests were merged (79 in code and 34 in docs) and 55 issues were closed (43 in code and 12 in docs)

Video

  • The Date Object - Getting, Setting & Formatting Dates in JavaScript - Tutorial

  • Simple Slide Show in JavaScript | JavaScript exercises