5 way to style your React components, building an offline React app with AI functionality and React's roadmap

I'm really excited about this week's newsletter! I've included a few code repos that do some interesting things with React, including a repo that works offline and uses AI -- all using AWS services (which I'm a fan of! 😀) .

Check out the highlights in this week's newsletter:

The React team published a blog post laying out the roadmap for future releases of React. This blog post will give you all the details for what's coming next in React.
styled-components now has native support for the css prop! Check out the blog post announcing the change and update to the latest version of styled-components to get this awesome new feature.
Speaking of styled-components, did you know there are other ways to style your React components? This week's newsletter includes a tutorial which details 5 different ways to style your components in React
Have you ever wanted to give your user the ability to print a React component? The ReactToPrint library does just that!

Happy Coding!

-Sophia Shoemaker

React Blog: React 16.x Roadmap

You might have heard about features like “Hooks”, “Suspense”, and “Concurrent Rendering” in the previous blog posts and talks. In this post, we’ll look at how they fit together and the expected timeline for their availability in a stable release of React.

Announcing native support for the css prop in styled-components 🎉

A new, convenient way to quickly style and iterate on your components and their boundaries has landed in styled-components 💅

Invented by Sunil Pai in glamor, the css prop has taken over the CSS-in-JS world as a convenient way to build components while staying flexible with the “lines”, their boundaries. By declaring the CSS inline, it’s simple to move elements around your app and iterate on them, allowing you to keep moving fast in the early stages. So far, to get support for the css prop in styled-components, you had to use user-land libraries such as rebass. With the latest release of styled-components, you can now use the css prop without any extra support

Tutorials

5 Ways to Style React Components

Choosing the right method for styling components isn’t an absolute truth. It’s a relative choice that should serve your use case, personal preferences and above all architectural goals of the way you work: Global namespacing, dependencies, reusability, scalability, dead-code elimination and so on. This post reviews 5 useful ways to style your React components and helps us understand what sets them apart.

Code

GraphQL starter with Realtime, Offline and AI/ML functionality using AWS AppSync

This Github repo is a starter project built with React and uses AWS AppSync to implement offline and real-time capabilities in a chat application with AI/ML features such as image recognition, text-to-speech, language translation, sentiment analysis as well as conversational chatbots. In the chat app, users can search for users and messages, have conversations with other users, upload images and exchange messages. The application demonstrates GraphQL Mutations, Queries and Subscriptions with AWS AppSync integrating with other AWS Services.

UI Library from data company Talend

This Github repo contains the React UI library Talend uses for all of the frontend web UI work. It's always interesting to see how and what kinds of components companies create with React. Check out the Storybook page here: http://talend.surge.sh/components

React to Print: A component for printing your components

So you've created a React component but would love to give end users the ability to print out the contents of that component. This package aims to solve that by popping up a new print window with CSS styles copied over as well. See demo here: https://codesandbox.io/s/kmmw7l39y7

Articles

Inside Fiber: in-depth overview of the new reconciliation algorithm in React

Starting from version 16, React rolled out a new implementation of that internal instances tree and the algorithm that manages it code-named Fiber. This is the first article in the series aimed to teach you the internal architecture of React. In this article, Max Koretskyi provides us with an in-depth overview of important concepts and data structures relevant to the algorithm.

About

Fullstack React: The Book

Learn React the right way with Fullstack React: The Complete Guide to ReactJS and Friends. If you've already purchased a copy, you automatically get access to the latest changes. If you haven't purchased a copy yet, don't delay and get the most up to date and comprehensive information and tutorials.

Like what you've been reading from Fullstack React? You can help us spread the word. Please forward this email to you friends (and let them know they can subscribe here).

Follow us on Twitter

Curated with love by Sophia Shoemaker and the Fullstack.io team.

Suggestions are welcome, just reply to this email - we'd love to hear from you.

Subscribe with Email

Issue 119 5 way to style your React components, React & AI, Roadmap for React November 28th 2018