react

When Does a Project Need React?

You know when a project needs HTML and CSS, because it's all of them. When you reach for JavaScript is fairly clear: when you need interactivity or some functionality that only JavaScript can provide. It used to be fairly clear when we reached for libraries. We reached for jQuery to help us simplify working with the DOM, Ajax, and handle cross-browser issues with JavaScript. We reached for underscore to give us helper functions that the JavaScript alone didn't have.

As the need for these libraries fades, and we see a massive rise in new frameworks, I'd argue it's not as clear when to reach for them. At what point do we need React?

(more…)

Papercons

Bobby Grace, on the Dropbox Paper team:

On the engineering side, we use inline SVGs. These have many advantages. One advantage is that SVG is a well-structured format that we can manipulate with code. Paper is also using React and has a component for inserting icons.

They:

  1. Use a single Sketch file, checked into the repo, as the place to design and house all the icons.
  2. Use gulp-sketch to extract them all individually.
  3. The build script continues by optimizing them all and building a source of data with all the icons and their properties.
  4. That data fuels the their <SvgIcon /> React component. (Also see our article).

They call it Papercons.

Now, whenever someone asks for an icon, we can just share a link to all the latest production icons. No more hunting, context switching, and long conversation threads.

Web Animation Workshops in Spring

Web Animation Workshops has started up again for Spring, we're headed for San Francisco, Chicago, and Paris this year, some dates still to be announced. Val Head and I team up to bring you two packed days full of content and exercises so that when you leave the class, you not only understand the techniques of how to animate in different tech stacks/environments but why. Here's is some of the content we cover:

(more…)

CSS Modules and React

In this final post of our series on CSS Modules, I’ll be taking a look at how to make a static React site with the thanks of Webpack. This static site will have two templates: a homepage and an about page with a couple of React components to explain how it works in practice.

(more…)

Leveling Up with React: Redux

This tutorial is the final of a three-part series by Brad Westfall. We'll learn how to manage state across an entire application efficiently and in a way that can scale without dangerous complexity. We've come so far in our React journey, it's worth making it across the finish line here and getting the full bang-for-our-buck out of this development approach.

(more…)

#147: Starting a React-Powered Comment Form

In this pairing screencast, Sarah Drasner joins me and guides me through some of my very first learnings of React. We tackle some "real world" style functionality: a comment form.

This turned out to be a pretty useful bit of UI to work with, as it required a lot of things rather fundamental to React (or at least, it seems to me). For example, a master "App" that deals with the state (our big "state" thing is the comments themselves) and components that deal with rendering the view (for example, the comment form is a component and each comment is a component).

Then we got into lots of littler React thingies, but also huge things to understand in React-land, like:

  • props - a way to pass data between components. They looks like HTML attributes when you send them, and arrive as an object in the form of this.props.
  • refs - how you snag data out of the form element we created.
  • keys - a way to uniquely identify a component when it's repeated. We're repeating comments here (there can be multiple comments), so if we were to have functionality that could change any of them, having a key is what makes React efficient (it can just replace that single comment instead of all of them).

Plus a ton more!

Here's the demo we worked on:

See the Pen Starting a React-Powered Comment Form by Chris Coyier (@chriscoyier) on CodePen.

How do you level up your React learning beyond this? Start here.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag