Archeology of React (2016)

Summary

This blog site has been archived. Go to react.dev/blog to see the recent posts. Just three and a half years ago we open sourced a little JavaScript library called React. The journey since that day has been incredibly exciting. Commemorative T-Shirt In order to celebrate 50,000 GitHub stars, Maggie Appleton from egghead.io has designed us a special T-shirt, which will be available for purchase from Teespring only for a week through Thursday, October 6. Maggie also wrote a blog post showing all the different concepts she came up with before settling on the final design. The T-shirts are super soft using American Apparel’s tri-blend fabric; we also have kids and toddler T-shirts and baby onesies available. Proceeds from the shirts will be donated to CODE2040, a nonprofit that creates access, awareness, and opportunities in technology for underrepresented minorities with a specific focus on Black and Latinx talent. Archeology We’ve spent a lot of time trying to explain the concepts behind React and the problems it attempts to solve, but we haven’t talked much about how React evolved before being open sourced. This milestone seemed like as good a time as any to dig through the earliest commits and share some of the more important moments and fun facts. The story begins in our ads org, where we were building incredibly sophisticated client side web apps using an internal MVC framework called BoltJS. Here’s a sample of what some Bolt code looked like: var CarView = require('javelin/core').createClass({ name: 'CarView', extend: require('container').Container, properties: { wheels: 4, }, declare: function() { return { childViews: [ { content: 'I have ' }, { ref: 'wheelView' }, { content: ' wheels' } ] }; }, setWheels: function(wheels) { this.findRef('wheelView').setContent(wheels); }, getWheels: function() { return this.findRef('wheelView').getContent(); }, }); var car = new CarView(); car.setWheels(3); car.placeIn(document.body); Bolt introduced a number of APIs and feature...