Select Page

Category: react

Putting Things in Context With React

Context is currently an experimental API for React – but soon to be a first class citizen! There are a lot of reasons it is interesting but perhaps the most is that it allows for parent components to pass data implicitly to their children, no matter how deep the component tree is. In other words, data can be added to a parent component and then any child can tap into it. See the Pen React Context Lights by Neal Fennimore (@nealfennimore) on CodePen. While this is often the use case for using something like Redux, it’s nice to use if you do not need complex data management. Think about that! We create a custom downstream of data, deciding which props are passed and at which levels. Pretty cool. Context is great in areas of where you have a lot of components that depend on a single piece of data, but are deep within the component tree. Explicitly passing each prop to each individual component can often be overwhelming and it is a lot easier just to use context here. For example, let’s consider how we would normally pass props down the tree. In this case, we’re passing the color red using props on each component in order to move it on down the stream. class Parent extends React.Component { render(){ return ; } } class Child extends React.Component {...

Read More

React Native: A Better DOM?

How do we convince web developers that React Native has already solved many of the hardest GUI problems for them? Go back in time and release React Native before React DOM? Is there an easier way… — Nicolas (@necolas) March 1, 2018 Like a lot of people in this Twitter thread, I didn’t really understand that React Native was even for building on the web. I thought it was a way to write React to build native mobile apps. Nicolas has a whole “React Native for Web” repo though, explaining otherwise. Plus a conference talk. It probably doesn’t help that the tagline is “Build native mobile apps using JavaScript and React.” I suppose, it does do that (e.g. build an iOS or Android app), but it also can build your web app, which could mean… single code base? Several of the replies suggest “a better DOM” which is interesting. Or, as Nicolas points out, it’s kinda like “web: the good parts” as much of it is an intentionally limited subset of the involved platforms in order to simplify things and make them interoperable. Obviously, this isn’t for every project. But, if you have a React-based website already, and either have or want a native mobile app, then it seems like this is worth exploring. Direct Link to Article — Permalink React Native: A Better DOM? is a post from...

Read More

Sketching in the Browser

Mark Dalgleish details how his team at seek tried to build a library of React components that could then be translated into Sketch documents. Why is that important though? Well, Mark describes the problems that his team faced like this: …most design systems still have a fundamental flaw. Designers and developers continue to work in entirely different mediums. As a result, without constant, manual effort to keep them in sync, our code and design assets are constantly drifting further and further apart. For companies working with design systems, it seems our industry is stuck with design tools that are essentially built for the wrong medium—completely unable to feed our development work back into the next round of design. Mark then describes how his team went ahead and open-sourced html-sketchapp-cli, a command line tool for converting HTML documents into Sketch components. The idea is that this will ultimately save everyone from having to effectively copy and paste styles from the React components back to Sketch and vice-versa. Looks like this is the second major stab at the React to Sketch. The last one that went around was AirBnB’s React Sketch.app. We normally think of the end result of design tooling being the code, so it’s fascinating to see people finding newfound value in moving the other direction. Direct Link to Article — Permalink Sketching in the Browser is a post...

Read More

How Would You Solve This Rendering Puzzle In React?

Welcome, React aficionados and amateurs like myself! I have a puzzle for you today. Let’s say that you wanted to render out a list of items in a 2 column structure. Each of these items is a separate component. For example, say we had a list of albums and we wanted to render them a full page 2 column list. Each “Album” is a React component. Scroll rendering problem Now assume the CSS framework that you are using requires you to render out a two column layout like this… Column 1 Column 2 This means that in order to...

Read More

WordPress + React

I posted just 2 months ago about Foxhound and how I found it pretty cool, but also curious that it was one of very few themes around that combine the WordPress JSON API and React, even though they seem like a perfect natural fit. Like a headless CMS, almost. Since then, a few more things have crossed my desk of people doing more with this idea and combination. Maxime Laboissonniere wrote Strapping React.js on a WordPress Backend: WP REST API Example: I’ll use WordPress as a backend, and WordPress REST API to feed data into a simple React e-commerce SPA: Creating products with the WP Advanced Custom Fields plugin Mapping custom fields to JSON payload Consuming the JSON REST API with React Rendering products in our store Perhaps more directly usable, Postlight have put out a Starter Kit. Gina Trapani: People who publish on the web love WordPress. Engineers love React. With some research, configuration, and trial and error, you can have both — but we’d like to save you the work. Here’s that repo. WordPress + React is a post from CSS-Tricks...

Read More
000webhost logo