React JS 16.0 released

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

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. 

Visual Studio Code 1.30 Released

The solution has received new features, as well as improved support for JavaScript and TypeScript
14 December 2018   8

Microsoft has released the development environment Visual Studio Code 1.30. The tool has received new features, as well as improved support for JavaScript and TypeScript.

The search tool in the new version of the editor allows you to make multi-line queries. You can add a new line to the query by pressing Shift + Enter or simply by pasting text from the clipboard.

Custom headers and menu items in Linux are now activated by default. Since some menus may go beyond the boundaries of the screen, the developers added the ability to scroll.

Menu items designed to work with the settings have been moved to the title bar of the editor.

In the snippet, new comment variables are implemented, allowing to leave lines or blocks of notes based on the language of the code.

Also, the developers added the Go to Declaration and Peek Declaration commands to Visual Studio Code 1.30 in addition to the existing Go to Definition and Peek Definition. This is due to the fact that in some languages ​​the concepts of definition and declaration are fundamentally different.

In Visual Studio Code 1.30, you can work with TypeScript 3.2.2. Display of callbacks in JavaScript and TypeScript is improved. The new version of the editor displays which function they belong to.

The developers have improved the integration with the repository. In the new version of the program, you can change the tool that opens the file by clicking on the version control panel.

The Visual Studio Code 1.30 error detection and removal tool allows you to delete debug consoles for inactive sessions. Improved concept of variable substitution in launch.json configuration. The initial debug configuration itself has been simplified by hiding minor elements and adding a Quick Pick interface.

You can set the task to run automatically when you open the project folder. In addition, several new tasks have been added to the task management command section, for example, Tasks: Rerun Last Task, which allows you to restart the previous process.