This Week In React #5
17 projects, 1 interview, 1 launch, and 11 upcoming events!
This Week In React is a weekly publication highlighting interesting projects and active members from the React community.
🕶 Create Portable VR Experiences on the Web (React VR)
Oculus announces ReactVR! :O
🌱 #ReactForNewbies: Building a Todo App w/ Create-React-App, Pt. 2
Edem has released the part two of his Create-React-App tutorial.
📊 How Airtable Uses React
🇨🇳 The React Community in China
🏃 React Native Animated Modal (react-native-animated-modal)
Component that adds animations and customizability to React Native modal.
🏗 React Native Grid Component (react-native-grid-component)
A grid component for React Native (iOS/Android).
🇮🇹 Event Recap and Links To 7 Talks From ReactJS Day in Verona
Videos can be found in link below.
- What The Hell Is GraphQL (And Why Should I Care?) by Fatos Hoti
- Frontend At Scale: Experiences Using React In Large Org — Erik Wendel
- Building Modular Redux Applications — Gian Marco Toso
- Stay (React)ive With MobX — Francesco Strazzullo
- How To Push A ReactJS Application To Production Without Losing Sleep — Emanuele Rampichini
- CSS Is Dead, Long Live CSS (but in modules, please)! — Kevin Mees
- Adding CSS Themes To Your React Components — Johannes Stein
🌤 DIY Minimalist Weather Monitor (React + Raspberry Pi)
🐇 SEO vs. React — Is It Necessary to Render React Pages on Backend?
A common concern when using React is whether or not your site will be indexed by Google. This story explores how for most sites this may not be an issue.
🌎 Isomorphic React without Node
Ben Ilegbodu of Eventbrite recently presented this talk, at Real World React, about taking advantage of the beneifts of React at a company whose backend is Python/Django.
🐇 20ms Server Response Time w/ Server Side Rendering And Caching
🗒 What We Learn From React Router v4 and Redux
🗂 Form Validation As A High Order Component, Part 2
🗜 Building the Case for Static Types in your React Applications
📁 How To Structure A Real World Redux/React Application
📡 React Native With Apollo Server and Client, Part 1
✨ Introducing React Axiom
Models in React
💵 Coinbase Launches Site Built With ReactJS
This week’s interview is with Emily Eisenberg of Khan Academy who works on aphrodite.
TWIR: First, please tell the community a little bit about yourself. Who are are you and where do you work?
Emily: I’m Emily Eisenberg, and I’ve been a web developer for the past 4 years, but I’ve been dabbling in the dark arts of Haskell and TeX as well. I currently work at Khan Academy in the Bay Area as a frontend engineer.
TWIR: What initially brought you to the React community? How long have you been active?
A project at Khan Academy that I worked on started using React, so I started learning it when I joined the project. The project got converted over about a week after React was publicly announced, so I’ve been at it about as long as anyone outside of Facebook. (Bonus points: the initial conversion was done by Ben Alpert, who’s now one of the core React developers!) Since then, almost all of Khan Academy’s new frontend development has been done in React.
TWIR: To new members of the React community what is aphrodite and why did you build it?
Aphrodite is a CSS-in-JS styling library. It’s specifically targeted towards writing per-component styles for lots of independent components in a large codebase. A bunch of CSS-in-JS libraries have been popping up in the past year or two after Vjeux’s talk about how inline styles solve a bunch of the limitations of CSS.
As for why we specifically built our own library: at Khan Academy earlier this year we built a server-side rendering infrastructure to improve performance, and we wanted to solve the issue of sending down lots of unused CSS in each page load. None of the existing libraries that we looked at offered the features we wanted and the ease of integrating into our infrastructure. We built Aphrodite with the ideas of inline styling while also allowing for server-side rendering and the minimum amount of CSS to get sent down on each page load.
Within Khan Academy, it’s been very popular, and almost all new projects have been using it. Also, I’ve been seeing it pop up on websites across the web, from an OK Google command list to the Airbnb search results page.
TWIR: Has this project or any of your other React-related projects brought about any interesting or unexpected uses?
Aphrodite was mostly created to handle per-component styles; that is, you write styles that are only used locally to one component, and only use them there (like how real inline styles work, where they only influence the immediate element). However, when given a styling hammer, I guess everything looks like nail, so people have been coming up with hacks for descendant styles, requests for better support of style themes (something like CSS variables), and especially trying to apply CSS resets and globally-applied styles using Aphrodite. For the most part, our answer to these questions has been “Aphrodite wasn’t designed for this,” but they are insistent, so we’re now looking into ways to let people do these things with Aphrodite.
Are you working on anything new or exciting that you can talk about?
Nothing terribly exciting planned for Aphrodite, sadly. Internally at KA I’m working on a big React/Redux router implementation that works with our server-side rendering infrastructure and our API server that I might be writing about soon, but not terribly exciting.
TWIR: Finally, are there any new React/RN projects that you’re most excited about or interested in?
I’m really excited about the announcement of ReactVR! I’ve been an Oculus fan for a while, and their recent announcement that you’ll be able to create VR content using React sounds like it’s going to be awesome.
TWIR: Thanks for your time Emily!
Want us to interview someone from the React community?community@thisweekinreact.com
- Saturday, October 22, 2016 — ReactJS Bangalore at ClearTax
- Tuesday, October 25, 2016 — ReactJS Atlanta at General Assembly
- Tuesday, October 25, 2016 — ReactJS Hamburg at Finanzcheck
- Wednesday, October 26, 2016 — GraphQL Summit, San Francisco
- Wednesday, October 26, 2016 — React Oslo at Aller
- Wednesday, October 26, 2016 — React Utah at MX
- Wednesday, October 26, 2016 — React Native Berlin at askCharlie
- October 26–28, 2016 — React Conf — Bratislava, Slovakia
- Thursday, November 3, 2016 — React Paris at SFEIR
- Monday, November 7, 2016 — React Sydney at BlueChilli
- Thursday, November 10, 2016 — React Israel at Klarna
Past
- Thursday, October 20, 2016 — React Dallas
- Thursday, October 20, 2016 — React Native Chicago at Stridekick
- Wednesday, October 19, 2016 — ReactJS Tokyo at MTL
- Wednesday, October 19, 2016 — “React Perf + Component Explorers” — ReactJS Dublin at Hubspot
- Tuesday, October 18, 2016 — Real World React at Eventbrite — Tom Occhino from the React Team at Facebook
- Tuesday, October 18, 2016 — London React Meetup at Facebook
- Tuesday, October 18, 2016 — Portland ReactJS at Mirador
- Thursday, October 13, 2016 — San Francisco ReactJS Meetup at Instacart
- Thursday, October 13, 2016 — ReactJS Spain at Redradix
- Wednesday, October 12, 2016 — React Native San Francisco at Capital One
- Wednesday, October 12, 2016 — ReactJS Phoenix at ClearVoice
- Tuesday, October 11, 2016 — Portland ReactJS at New Relic
Do you know about a React event coming up in the next 2 months? community@thisweekinreact.com
This Week in React is a weekly publication that aims to provide interesting videos, links, and interviews to help you quickly catch up on the latest React community developments. Each post shall feature 3+ interesting projects and an interview with someone from the community.
