Common component building patterns in React, Netlify CMS & PHP + React
Last week I had the chance to go to the San Francisco React meet up at Lyft and heard some great talks. One of the speakers was the the co-founder & CEO of Netlify -- a CMS built with React & Git. As someone who has built probably one too many Wordpress sites, Netlify looks like a great alternative. And you can't go wrong with React, right? :) We also heard from Rafael Pedicini who talked about the challenges that come with cross-browser compatibility when it comes to styling and adding touch/click events to links and buttons. He open sourced a project called React Interactive that mitigates some of the cross browser compatibility issues.
Also included in this week's newsletter:
- React Mosaic -- a window manager built with React for React
- Client + Server hot reloading with Docker & React
- Pupper: A library for using WebSockets with PHP & React
Happing Coding (and Happy Halloween! 👻😈🤖)
-Sophia Shoemaker
`ReactDOM.hydrate()` documentation updated
The documentation for ReactDOM.hydrate() has been updated to reflect the changes in React 16. If you use ReactDOM.hydrate() make sure to read the updated documentation!
Tutorials
Client + Server Hot Reloading with Docker & React
If you aren't familiar with Docker, it is a build and deployment tool that allows you to package up all your code and your dependencies into a "container" and deploy that container anywhere. It makes it easy to reliably deploy your code and have confidence that it will work. This guide walks you through the process of setting up an Express server that serves a React client application and deployed in a Docker container.
medium.com
Simple React Patterns
In this article, Lucas Reis walks us through some common React patterns in building components and shows us some best practices for implementing them.
github.io
Code
Netlify CMS
Netlify CMS is a Content Management System for static sites, allowing collaborators to create, edit, review, and publish content without writing code or dealing with version control. Netlify CMS is an open-source React app that acts as a wrapper for the Git workflow, using the GitHub API. You can use any static site generator (like Gatsby) to generate your site and use Netlify to manage editing & creating content.
netlifycms.org
React Mosaic
react-mosaic is a React Tiling Window Manager meant to give a user complete control over their workspace. It has an API to tile React components across a user's view. Each tile can be resized & can include a toolbar with the ability to add & remove tiles. Check out the demo here
github.com
Pupper: PHP + React
Pupper stands for "PHP Plus React" (PPR > Pupper). The goal of Pupper is combine the best of PHP and React and make them communicate bi-directionally through the use of WebSockets.
github.com
React Interactive
React Interactive is a library that provides hover/active/focus styling for elements like buttons and links. The key features of React Interactive include:
- Style touch interactions in web apps to look like native apps
- Style keyboad interactions separate from mouse and touch interactions (focus from tab key, etc)
- Makes every Interactive div/span/etc accessible by default (tab index, role and key click handler added)
- Use inline styles for all interactive states - hover, active, focus, etc... (no style tags or CSS added to the page), or use class names if you prefer to write styles separately with CSS
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.