Last week I had the pleasure of attending my 2nd React NYC event which was held at the WeWork Chelsea Location. For those of you who don’t know, WeWork is a co-working space for freelancers, creatives, computer nerds and everyone in between. Also, this just happened: WeWork acquires The Flatiron School
So I felt right at home since I’m technically employed by WeWork (I help students with our curriculum as a Technical Coach). Most WeWork’s that I’ve been to are super nice and come with an assortment of beer/wine, tea, coffee and anything else you can put a tap on(Pineapple water anyone?).
So I cozied up with a freshly poured glass of wine from the tap and intently listened to an awesome talk by Harry Wolff on the new features of React 16.
I was definitely excited, because I read the newest features and it didn’t immediately click for me, so it was amazing to get further details about why the update was important and how I could implement it in my own project. I actually already updated my current project to use React 16, but was unaware of some of the awesome features that shipped.
React 16 includes the ability to use something called Fragments. This means that you can write a component that can render without a parent
which results in a correct
<table>
<tr>
<div>
<td>Hello</td>
<td>World</td>
</div>
</tr>
</table>
Strings are also allowed to be rendered by a component in React 16. Cool!
Also introduced was a concept called Portals. It allows you to render a component to any part of the DOM tree!
Woah! Portals!
You can use the following syntax to take advantage of portals.
ReactDOM.createPortal(child, container)
“The first argument (child) is any renderable React child, such as an element, string, or fragment. The second argument (container) is a DOM element.”
Leave a Reply