React + d3, A React VR course and Prettier 1.6 Release

Last week I had a great time at React Rally and enjoyed listening to the speakers and connecting with many other fellow React devs. If you have the means, I highly recommend attending the conference in 2018!

This week's newsletter contains some libraries and tutorials from some of my favorite speakers at the conference as well as:

A React VR video course
Release notes from the Prettier 1.6 release
A tutorial on folder structure for React applications
A Markdown library for React
Offline/Online components to render different parts of your application depending on whether the user is online or not

Happy Coding!

-Sophia Shoemaker

Prettier 1.6 Released

Prettier is "an opinionated code formatter". It removes all original styling and ensures all files in a project are consistent. If you haven't tried it you should! I've used it on all of my new projects and it's been a game-changing time saver for me.

Quite a few changes in this release including:

You can now configure Prettier using a .prettierrc file
There is also support for .prettierignore files to specify which file you don't want to convert
Improvements in the way JSX is formatted

There are lots of other changes as well, check out the release notes for the full list.

Tutorials

React + d3 Slides from Shirley Wu's talk at React Rally

Shirley Wu gave an amazing talk at React Rally last week about using d3.js, a charting/graph/visualization library for JavaScript with React. Check out the slides from her talk!

Writing Scalable React Apps with the Component Folder Pattern

Discover how to organize your React components using the component folder pattern. It will help un-clutter your projects.

400+ line components can be so large and unwieldy it can take a long time to get an understanding of how they work. This article takes one of these large components and break it down into bite sized and logical units of work. Then it applies the component folder pattern to compartmentalize the pieces.

Build Virtual Reality Experiences with React: A Video Course

This course by Nik Graf explores the possibilities to bring VR to the Web using React VR. Each lesson focuses on one specific concept or component that comes with React VR. It covers a large surface area of experiences like teleporting a user to a recorded 360° experience as well as placing them in virtual worlds.

Code

XState: Stateless JS Finite State Machines and Statecharts

One of my favorite talks at React Rally last week was by David Khourshid. He talked about the concept of finite state machines and how to apply that concept in our React applications.

What is a "finite state machine"? In the simplest terms, a finite state machine is a machine that stores information ("states") and based on certain actions, the state can change. Designers often use this concept when designing certain flows in a website (a user signs up, needs to reset his/her password, etc).

This library is an implementation of this concept for use in React applications. It can be really helpful in architecting a well organized React application when you're forced to think about the various ways a user will interact with your site.

vx: React + d3.js

If Shirley's slides inspired you enough to start using d3 with React, here's a library to jumpstart your project! vx is a collection of reusable low-level visualization components. vx combines the power of d3 with React to generate your visualizations. Check out the gallery to see the plethora of options available to create fancy visualizations.

React Markings

Markdown in <Components/>, <Components/> in Markdown by James Kyle

React Detect Offline

Components that track offline and online state. Render certain content only when online (or only when offline).

Wrapping your components with <Online> - Component that renders its children only when the browser is online.

Wrapping your components with <Offline> - Component that renders its children only when the browser is not online.

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 74 August 30th 2017