This Week In React #5

This Week In React #5 @ericnakagawa  #JavaScript #Reactjs

  • A project at Khan Academy that I worked on started using React, so I started learning it when I joined the project.
  • Projects aimed at beginning React developers.
  • A common concern when using React is whether or not your site will be indexed by Google.
  • 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.
  • Each post shall feature 3+ interesting projects and an interview with someone from the community.

17 projects, 1 interview, 1 launch, and 11 upcoming events!

@Roger_M_Taylor: This Week In React #5 @ericnakagawa #JavaScript #Reactjs

Edem has released the part two of his Create-React-App tutorial.

Component that adds animations and customizability to React Native modal.

A grid component for React Native (iOS/Android).

Videos can be found in link below.

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.

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.

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!

This Week In React #5