サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ドラクエ3
jamesknelson.com
I don’t know about you, but when I started writing React apps, I struggled to decide where my state should go. No matter how I re-arranged setState calls, things never felt quite right. And maybe that is why I got so excited when I found Redux. Redux gave me a single place to put all my state. Which sounded great in theory. But then I realised that having one spot to put things doesn’t necessarily
A while back, I received a great question from a reader: Just a note in your Learn React By Itself tutorial. In the “Components” section, where you say: return ( React.createElement('li', {className: 'Contact'}, React.createElement('h2', {className: 'Contact-name'}, this.props.name) ) ) It’s not clear to me why you need the parens and can’t just do return React.createElement. I tried that and it f
So you heard React was fast, and decided to give it a go. You grabbed a boilerplate, started working through it, and noticed shouldComponentUpdate and PureRenderMixin. Some googling reveals these are the things you use to make React fast. But wasn’t React already fast? The answer is that React is fast… sometimes. The other times, you should use shouldComponentUpdate. But when are the other times?
Have you ever wanted to respond to a change in your Redux store’s state by dispatching another action? Now you know that this is frowned on. You know that if you have enough information to dispatch an action after the reducer does its thing, then it is a mathematical certainty that you can do what you want without dispatching another action. But for some reason, you just don’t care. Maybe your sto
This article has kindly been turned into a video by the folks at Webucator who do JavaScript training. When dealing with asynchronous code, JavaScript’s ES6 promises can make your life a lot easier. No more callback pyramids, no more error handling on every second line, and no more reliance on external libraries to do things as simple as getting the result of a for loop. But ES6 Promises can have
So you’ve got the React basics down, and you’ve decided to put together an app. Given that React runs on both the server side and the client side, it seems that making a Universal (or Isomorphic) app is a no-brainer. Or it did until you’d spend hours trying to figure out how to set up Node.JS and Express, and make it distinguish between requests for JSON and HTML. And that’s if you’re lucky enough
One of my favourite blog posts on the internet is Steven Luscher‘s guest post on the Babel blog, React on ES6+. It manages to be both incredibly helpful and easy to understand, while being short enough that when you hit the end you’re like “wait, is that it?”. And as it happens, one of the most frequent requests I get is for an updated version of my React cheatsheet, showing the newer React compon
So you’ve decided to build a React component. You know what it will do, what it’s called, and where it’ll go. But when you open your editor and go to write the first line, you’re confronted with the decision between three different ways to declare it? Why three? And which one should you use? Luckily, this decision doesn’t need to be a hindrance. In fact, with a little history and two simple rules,
TL;DR? Clone the Starter Kit instead. Have you ever wished that libraries for React apps could be simpler? Sure, you know that there are cases when all the bells and whistles are an advantage — but for you, features aren’t as important as clarity. Instead of giving up control to fast-moving libraries written by big names, you want to understand what is going on under the hood. And instead of sifti
This guide is part of The Complete Guide to ES6 with Babel 6 series. If you’re having trouble upgrading to Babel 6, start with Six Things You Need To Know About Babel 6. Even if you write your NPM package with ES2015, it is important that the code you publish is compatible with everyone else’s JavaScript environments. That means compiling your code to ES5 before publishing it. And of course, the b
This guide is part of The Complete Guide to ES6 with Babel 6 series. If you’re having trouble upgrading to Babel 6, start with Six Things You Need To Know About Babel 6. The Babel CLI is great for compiling ES6 to ES5 on a file-by-file basis. However, when Babel encounters an import statement, it outputs a require call – which won’t get you very far in the browser. To make our Babel output browser
Over the last year, Babel has become the go-to tool for transforming ES2015 and JSX into boring old JavaScript. But seemingly overnight, Babel 6 changed everything. The babel package was deprecated, running babel doesn’t actually transform ES2015 to ES5, and the old docs have basically disappeared. But Don’t Panic! To get you up to speed, I’ve put together a brief list of the six most important ch
Update: I’ve announced react-pacomo, a solution for some of the problems with CSS outlined here, without the downsides of Inline Style. So one of the hottest topics in the React world lately is Inline Style, i.e. setting styles with an element’s style property instead of CSS. This new and shiny way of doing things promises to make your life easier. It eliminates the bugs caused by global styles, i
Do you ever find yourself frustrated with all the boilerplate and repetitive code in React components? Frequent use of patterns make components long-winded, hard to reason about, and difficult to maintain. And with mixins no longer supported in ES6 components, there is no longer any obvious solution! This became a problem while writing Memamug. Without mixins, the code gradually evolved a bunch of
So you’ve decided to build a Single Page App with React, and everything seems to be going dandy. You’ve got yourself some wireframes, a HTML file and a few components, and then you decide to add some routes. Easy, right? Well, thats what you thought until you started reading the internet. But now you’re worrying about isomorphism and the HTML 5 history API and even how to pass props to your view c
In the world of React.js single-page apps, there are two types of routing: push-state, and hash-based. Each of these have their strengths and weaknesses. Now as you may know, most of the React ecosystem focuses on push-state routing, using the HTML5 History API and (sometimes) server-side rendering with Node.js. There are a number of reasons for this, the two main ones being: The HTML5 History API
Disclaimer: I love JSX, Flux, ES6 and Webpack. I’ll discuss these tools more in another series. Update August 2018: A newer, more complete introduction to React’s fundamentals is available at my course “React (without the buzzwords)”. It uses the latest version of React, and covers many topics that “Learn Raw React” is missing, including component state, asynchronous data storage, JSX, structure b
Update October 2018: If you need to brush up on promises and async/await, I highly recommend you look instead at my Mastering Asynchronous JavaScript course on Frontend Armory. The course contains 47 live examples and exercises, and also comes with this spiffy Promises and async/await cheatsheet. Of course, my original promises guide is still useful today! Here it is: Apart from being new and shin
このページを最初にブックマークしてみませんか?
『James K Nelson』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く