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
.prettierrcfile - There is also support for
.prettierignorefiles 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.
github.com
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!
sxywu.com
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.
medium.com
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.
egghead.io
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.
github.com
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.
github.com
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.
fullstackreact.com
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.
Sophia Shoemaker