はてなブックマーク

On the surface, starting a project sounds easy. First you make some directories, install some dependencies, then you write some code. But there's a bit more to it than just those three steps. The type of project you're working on impacts the decisions you make. It gets more complicated when you're working on multiple projects that are related. For example, maybe you have a customer-facing frontend

React Suspense has been released in React 16.6.0 (React.lazy support only) and React Hooks is stable in 16.8.0! Let's see how we can use these and more features of React together to write simpler React components.

Drag and drop (dnd) experiences are often built to sort lists of content vertically and horizontally. react-beautiful-dnd is an excellent tool for these use cases. It utilizes the render props pattern to build accessible dnd functionality into lists that look and behave as you would expect—and you’ll even get keyboard-accessible dnd, straight out of the box, with no extra work required. It’s actua

Building an application with React typically involves several tools. Whether you configure these on your own or use a tool meant to save you from the configuration like Create React App, the tools are still there. When you come up against a situation where you need to start from scratch or make changes to a webpack or babel configuration, it helps to understand what each tool does, how they fit to

JSON Web Token (JWT) is a low overhead option for authentication that is easy to implement and scales with your application. There is no need to store session data as everything you need is stored in an encoded string sent in the JWT, significantly reducing database overhead for your servers. In this course, we will build a simple authentication server that will act as a token issuer, and we will

End-to-end testing assures you of a few things: that all the integrated pieces of an application properly function, all those pieces work together as expected, and your tests include and simulate real-user scenarios — something unit and integration tests just don't do. This course introduces you to two great tools for E2E testing: Puppeteer opens and runs applications in a Chromium browser and per

Redux: Using withRouter() to Inject the Params into Connected Components

JavaScript’s this keyword is a source of confusion for new and experienced developers alike. It can be frustrating if, for some reason, this doesn’t point to the context that was intended. This course will help you understand JavaScript’s this mechanism in-depth. Marius will take us through all of the ways this will change its values, from why many libraries use "use strict" to how arrow functions

React got that name for a reason. It’s a component-based JavaScript library that renders smartly and can seriously simplify your work. This course is for React newbies and anyone looking to build a solid foundation. It’s designed to teach you everything you need to start building web applications in React right away. Each lesson in this 28-part course is a single index.html file. This keeps your f

The React documentation has been warning us for a long time now that context shouldn't be used and that the API is unstable. Well, with the release of React 16.3, we're finally getting a stable context API and what's even better is that it has received a makeover and the dev experience is fantastic! In this lesson, we'll look at an example app that passes props down several levels deep into the co

In this video, we'll walk through accomplishing the common UI task of client-side pagination in React. We'll implement a render prop component to encapsulate the chunking/windowing logic of a large array of items that will provide our render prop function with the correct items for the current page. Our Paginate render prop component will not have any opinion or knowledge relating to UI and will o

In Use TypeScript to Develop Vue.js Web Applications we’ve seen how TypeScript Vue apps development by creating class based components and using decorators. This course will extend it, showing you how you can use Vuex with TypeScript in order to manage the state of your Vue app. We’ll see how to type-safe your store, organize the state in modules, modify it using mutations and actions and write Vu

Convert Sass (SCSS) Styled Button to CSS-in-JS with JavaScript Templates and Variables

This course explores the capabilities of TypeScript’s type system and shows how to use advanced static types in practice. For example, you’ll learn how to write safer code by using non-nullable types and being explicit about null and undefined in the type system. You’ll also see how the compiler analyzes control flow to determine the most specific type for a variable at any given location. In addi

In this course, we will incorporate react-intl into a project created with create-react-app and react-router. The react-intl library makes complex tasks such as internationalization and formatting dates & currency incredibly simple. Another huge benefit of react-intl is that it gives you the ability to centralize the content across your application into language specific files. This creates a cons

Managing state in modern web applications is hard. As applications grows in complexity, keeping track of state changes and mapping those changes back to your UI becomes increasingly difficult. One way data flow makes managing state more approachable and lightens the cognitive load required to follow the flow of data through your application. Using Redux takes this idea to the next level and moves

Electron is a framework that makes it easy to create cross-platform desktop apps with JavaScript, HTML, and CSS. Electron and open-source tools give you everything you need to create a compelling desktop app--native user interface elements like menus and dialogs, installers, auto-updates, and more. This course will teach you the core concepts of Electron so that you can leverage it to create your

MobX is designed to enable building web applications with a complex data model in an intuitive and very performant manner. Using React and MobX is currently the simplest way to build component based web applications. "Half the code, twice the fun" is how people describe MobX, or "So simple, I cannot believe it just works". A Community Resource means that it’s free to access for all. The instructor

Learning how to build and manage asynchronous programs is perhaps the most important part of becoming an effective JavaScript programmer. Unlike most programming languages, JavaScript is single-threaded. As a result, JavaScript programs must use async APIs to stay responsive to user input while performing long-running tasks like server requests and animations. You can't get very far in a JavaScrip