What’s new in React 17: new features and improvements

React.js version 17 was released in October 2020 and introduced several new features and improvements. In this blog post, we’ll explore the major updates in React.js version 17.

No More Event Pooling

One of the most significant changes in React.js version 17 is the removal of the event pooling optimization. Previously, React.js used a technique called “event pooling” to reduce the number of event objects created by the browser. However, this technique had some drawbacks, such as preventing the use of asynchronous event handlers and making the code more difficult to reason about.

With React.js version 17, the event pooling optimization has been removed, and every event object is now a unique instance. This change allows developers to use asynchronous event handlers and makes it easier to reason about the behavior of event handling in React.js.

Preact

Preact is a lightweight (just 3kb) alternative to React which has same interface (ES6), but better performance. Preact also has a few new features, i.e.,

Arguments props, state and context are passed to render()
Standard HTML attributes class and for
React DevTools right out of the box

There is a migration guide at the https://preactjs.com/guide/switching-to-preact which is basically replacing react and react-dom with preact npm packages.

I imported my AnalogDisplay component (original in React) into preact JSFiddle code, and they worked well. I can either use this.state or just state in render(). Here’s the JSFiddle code: http://jsfiddle.net/gz7L59mn/1/ and the source code:

Continue reading “Preact”

Autocomplete Widget with React

This project will guide you through building an autocomplete function similar to the one that you might see in Slack (a popular messaging app), as shown in figure 1, when you type something in the search box. For simplicity, our widget will work with room names (the rooms in a chat application).

The autocomplete widget will have (figure 2):

An input field
A list of options filtered according to the entered characters
An Add button (figure 3)

The filtering of the matches will be done using the entered characters as the first characters of the option. In other words, there is a simple comparison that allows us to autocomplete the name of the room (figure X). For example, if you type “mac” and you have “Mac OS X” and “Apple Mac,” then only “Mac OS X” will be shown as a match, not both options.

Continue reading “Autocomplete Widget with React”

React Native Quickly: Start Learning Native iOS Development with JavaScript NOW!

This book is a guide on getting started with React Native for mobile iOS development. You can find source code and the manuscript in https://github.com/azat-co/react-native-quickly. You can read this book online here, or at reactnativequickly.com, or if you prefer videos, you can watch project videos at Node.University: http://node.university/courses/react-native-quickly.

In this book, I’ll introduce you to React Native for native mobile iOS and Android development… and do it quickly. We’ll cover topics such as

Why React Native is Awesome
Setting up React Native Development for iOS
Hello World and the React Native CLI
Styles and Flexbox
Main React Native UI components
Importing Modules into an Xcode Project
Project: Timer
Project: Weather App

This book is about getting started with React quickly and not about React Native, which is technically a separate library (or some might even call it a framework). But I figured after eight chapters of working with React for web development, it would be fun to apply our knowledge to mobile development by leveraging this awesome library. You’ll be amazed how many React Native skills you already know from React.

Continue reading “React Native Quickly: Start Learning Native iOS Development with JavaScript NOW!”

Reactive Web Stack: 3RES – React, Redux, RethinkDB, Express, Socket.io

This post has been written by Scott Hasbrouck. You can find him on Twitter or his website.

It’s been nothing but wonderful to see JavaScript truly catch fire the past few years in web technology, ultimately becoming the most used language in 2016, according to StackOverflow data. My history with JavaScript began about 15 years ago, not all that long after it was first released as part of Netscape Navigator 2, in 1996. My most used learning resource was DynamicDrive, and their tutorials and code snippets of “Dynamic HTML” or DHTML – a term coined by Internet Explorer 4. Really, DHTML was a set of browser features implemented with JavaScript, CSS, and HTML that could get you nifty elements like rollover buttons and stock tickers.

Fasting forward to today, we now live in a world where JavaScript has grown to take over web technology. Not just in the browser, but it is now the most popular backend language according to that same StackOverflow report! Naturally, there are always those who dislike the language citing things like the ease of creating a global variable, or null being an object and undefined being its own datatype. But I’ve found that every language I pick up has quirks that are easily avoidable once you learn to properly use it. And we do want to become experts in our craft and truly learn to master our tools, do we not?

Continue reading “Reactive Web Stack: 3RES – React, Redux, RethinkDB, Express, Socket.io”

Meeting React.js: An Excerpt from ‘React Quickly’

This is an excerpt from React Quickly (Manning, 2016). You can download the entire first chapter for free at Manning. The book is scheduled for release in the first quarter of 2016, but MEAP is available right now. Use code “mardandz” to get 39% off.

Each chapter has a project which is supplemented by a video screencast hosted on YouTube.

Project: Menu with React.js

The project for this article will be minimal. The idea is to have a dynamically generated menu which will consist of <a> tags.

We’ll use custom React components Menu and Link. They way we create them is similar to the way we create the HelloWorld component in the previous example. The project will show you how to render nested elements programmatically. In the previous examples, we just coded the children manually. We’ll use the map() function for it.

Continue reading “Meeting React.js: An Excerpt from ‘React Quickly’”

React Quickly Screencasts

Each chapter of my new book React Quickly (Manning, 2016) has a project which is supplemented by a video screencast. Watch the videos here or on YouTube. The code is on GitHub.

Also, you can download the entire first chapter for FREE at Manning. The book is scheduled for release in the first quarter of 2016, but early access (e-copy) is available right now. Use code “mardandz” to get 39% off at Manning.

React Quickly Chapter 1 Project: Menu with React:

Continue reading “React Quickly Screencasts”

React for Fun and Profit

React is a fun little library for User Interfaces. You can use it for web, or mobile development. It’s fun because it’s very developer-friendly. You write your code in the same place without having to switch between HTML and JavaScript files.

I’ve heard many times people complaining about React’s favorite syntax JSX. I found it great, after I spent a few hours learning and coding with it. Contrary to what people unfamiliar with React think, JSX is not HTML in JavaScript. JSX is just an XML-like syntax which produces JavaScript. There’s not HTML involved at this step. When you develop with React, you write JavaScript objects. Later React automagically transforms those object into rendered HTML.

Also, React is very fast due to its virtual DOM and smart diffing algorithm. And React’s component approach to architecture allows for great development scalability. Just ask Facebook, Twitter, Slack and other companies with large web apps.

Furthermore, you can use React with React Native to create native iOS and Android apps. These apps can share the same code. It’s not the same as the so called hybrid or HTML5 apps. The latter are websites trapped into a headless browser in a mobile app. The former is a real native app which uses JavaScript interface for it’s UIs and logic.

Hey, you can even use live reloading when developing apps with React Native. Pure joy! The feature native mobile developers can only dream of! “React is fun, but show me the money”— you can yell. Fair enough.

Continue reading “React for Fun and Profit”

HTML5 Dev Conf 2015 Recap with Notes and Slides

Last week, I attended the HTML5Dev conference in San Francisco which was just across from Capital One SF office at 201 3rd St. The conference was split across a few building which made it hard to navigate and find talks.

Swanky espresso bar at @html5devconf. Smoothies will be later. Only in San Francisco tech. ;) @meteorjs pic.twitter.com/aBNEXsVdYx

— Azat Mardan (@azat_co) October 19, 2015

The whole conference was along the lines of React is amazing, ES6 is the future and Node.js is everywhere. There were a few talks on the Internet of Things, design, UX and HTTP/2 as well. Here’s the recap of the talks to which I went to.

Continue reading “HTML5 Dev Conf 2015 Recap with Notes and Slides”