(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
// setup.js | |
import hook from 'css-modules-require-hook' | |
import sass from 'node-sass' | |
hook({ | |
extensions: [ '.scss' ], | |
preprocessCss: data => sass.renderSync({ data }).css | |
}) |
/* | |
##Device = Desktops | |
##Screen = 1281px to higher resolution desktops | |
*/ | |
@media (min-width: 1281px) { | |
/* CSS */ | |
Picking the right architecture = Picking the right battles + Managing trade-offs
import React, { Component } from 'react'; | |
class EmbeddedGist extends Component { | |
constructor(props) { | |
super(props); | |
this.gist = props.gist; | |
this.file = props.file; | |
this.stylesheetAdded = false; | |
this.state = { |
Many people who work with React are familiar with the excellent classnames
library. If you aren't familiar, it provides a simple function for gluing classnames together. In web programming in general, there are many times that we need to add or remove multiple classes based on conditional logic. The classnames library makes this easy.
More and more developers are embracing CSS Next and the power of CSS modules. However, when you add CSS modules to your react components, working with classnames gets more difficult. Typically, CSS modules is implemented with class name mangling. Transforming human readable class name strings into unique identifiers helps ensure that every class name in your app is unique.
This means that you can write your component CSS in isolation without worrying about the dreaded class name collisions that have plagued CSS
invoices/123
?
in a URL like /assignments?showGrades=1
.#
portion of the URL. This is not available to servers in request.url
so its client only. By default it means which part of the page the user should be scrolled to, but developers use it for various things.