Blog
React, forms and DOM nodes
To validate a form with the HTML5 constraint validation API you need to call
.checkValidity()on an actual<form>DOM node. With a custom React form component, how would you access the constraint validation API inside a parent component?3 Ways to Fine-tune Presentational Components
Here are three ways to make React presentational components work as re-usable building blocks.
React and the mysteries of this
What’s going on with
thisin JavaScript and what doesbind()do? Let’s explore howthisbehaves in JavaScript and learn why the React documentation recommends callingbind()on some methods in your class component constructors.Introducing React Lifecycle Methods
So-called lifecycle methods come in handy to change the default way React renders elements, like if you want to manipulate the DOM directly or compare the previous and the current props. In this post, we’ll examine three of the most common lifecycle methods. Since you can only use lifecyle methods in class components, let’s remind ourselves the difference between class and function components.
Three Steps to Learn React
Have you looked at the React documentation already, but are still confused about how to go about building your first prototype? Try these steps on the path to React mastery.
3 Web Servers for Frontend Developers
Ever needed to quickly start a web server to check a few scripts you’ve been developing locally? Front-end developers don‘t need long complex set up: they can create an HTML file, include some JavaScript and open the file in the browser. But loading files directly from disk causes a few issues: absolute URLs like /mystyle.css don’t load correctly. And requesting any kind of assets via Ajax calls will fail in Chrome because of cross-origin security policies (scripts aren‘t allowed o load files from your local hard drive).
I did everything right… and npm throws EINTEGRITY errors!
In my React book, I explain how to download your frontend project dependencies with npm; in this blog post I am going to explain how to recover from an oddball error that I’ve come across once or twice.
Make small React components
The more I experiment with React, the more I find small presentational components are the way to go. Take this markup for a panel component:
Create a Cloudfront distribution for an S3 website
The HTTPS protocol encrypts the data between your website and the browser; it makes it harder for third-parties to inject their content into your website and may boost search rankings. You can’t use HTTPS if you’re hosting a website on an S3 bucket on your own domain. To serve your S3 website with HTTPS, one solution is serving your website through the Amazon Cloudfront CDN.
Long term caching with webpack and templates
Far future expiry on your CSS and JS resources ensure visitors load them from cache as often as possible, improving page speeds and reducing bandwidth costs. But it can be complicated to force visitors to load a new version before the old one expires. CDN amplify the issue. When you distribute your assets to a CDN like Cloudfront, the CDN servers all over the world only request a new copy when the assets expire.
MobX gotchas
To decide which technologies to cover React book, I’ve developed the same example with Redux and MobX. While I ended up with less code with MobX thatn with Redux, I’ve found out that structuring an application with MobX still requires rethinking your data structures compared to a plain React application. get() and set() everywhere One advantage of React is that you can think about each component separately. Define the props that you need for a section of the interface and you’re good to go.
Taking Glimmer for a ride
Glimmer is a JavaScript library to create user interfaces for the web that’s been launched last week at EmberConf. The big differentiating factor is that it’s the same engine that’s used in the Ember framework. While Ember includes a router and a model layer, Glimmer just defines a way to update the UI when the data changes. As one example in my React book is a word counter, I tested Glimmer by building word counters with other frameworks.
Is React hard to learn?
Paradoxically, React might feel more difficult at first than other frameworks because it is simpler in the sense that it uses more general, less ad-hoc mechanisms. The Vue documentation is amazingly well-written. But I suspect Vue sometimes feels easier because each concept that you need to build an application with Vue.js maps explicitly to a part of the Vue.js API. For example, the UI is not just the return value of a function; it’s labelled template in the actual code that you write.
Test many npm packages at once with Lerna
If you develop multiple JavaScript packages, and you already use npm scripts to automate your tests in each package, Lerna can help you run the tests for all packages. When you tell Lerna to run a script, Lerna reads the script definition from the package.json file in each directory, so Lerna runs the right script even if you define it differently in different packages. That’s very useful, for example to test all packages at once with a single lerna run test command, even if test is defined differently in each package.
Comparing CSS in JS solutions
After testing a few CSS in JS solution, I have found these criterias useful to help me decide which to pick: whether they generate inline styles or a separate stylesheet whether they require to define class names whether they supply a helper to create a new component from just a style definition In a React application, defining styles with JavaScript allows you to store style definitions in the same place as your React components and easily modify the styles in response to props or user actions.
A math editor with React and Katex
Most websites use LaTex to let users input mathematics. We are going to see how to build a LaTex input widget with React. Two JavaScript libraries can transform LaTex input into proper mathematics: Mathjax and Katex. I chose Katex for this demo because it works out of the box as a npm package. Usually, Katex scans the whole document to find latex strings to convert. We instead wish perform the conversion inside a React component as the user types.
Null event properties in a React callback
When you use setState with the new (in React 0.13) callback argument, all the Event object properties are null inside the callback. How can you update this.state based on the value of the event target? handleEvent(event) { /* Fails! event.target is null */ setState(function() { return {text: event.target.value}; }); } <input onChange={this.handleEvent}/> The easiest workaround is to extract the information you need from the event outside the callback: handleEvent(event) { var text = event.
React analog clock
The ractive.js website has this demo of a beautiful analog SVG clock. I wanted to replicate the fuctionality in React. The markup is exactly the same, but we have subdivided the application into a React component for the digital clock face. Here is the final React SVG analog clock.
Integrate jQuery UI autocomplete and React
You can integrate jQuery UI widgets and React by taking advantage of React lifecycle methods. React will call a component function named componentDidMount after it creates the markup corresponding to the component. In this function, you can access the markup that React has created directly and modify in any way that you want, before anything else happens in the application. Therefore it is the ideal place to initialise the jQuery UI autocomplete.
React without JSX, part 2
In part 1, we have seen that JSX has a simple JavaScript equivalent and that you can use React with just plain JavaScript. Now, let’s make the code more concise. React defines helper functions to create common HTML tags in the React.DOM namespace. For example, React.DOM.div, React.DOM.ul, and so on. These functions take a variable number of arguments. The configuration object is always the first argument and all the next arguments are the child elements.