Osmel Mora osmelmora

This is a proposal for a lightning talk at the Reactive 2015 conference.

NOTE: If you like this, star ⭐ the Gist - the amount of stars decides whether it makes the cut!

The Joy of Composition

Why stateless rendering is pure bliss

React just got stateless components, meaning that they are in essence pure functions for rendering. Pure functions make it dead simple - even fun - to refactor your views

Performance and Conditionally Rendered Content in React

First, this is not about if in JSX. It's just the simplest example to talk about (and a lot of people tried to do it at first a long time ago).

Some react components conditionally render content. When React first went public, a lot of us coming from handlebars really wanted "if" syntax. This gist isn't just about If components though, it's about

Recently CSS has got a lot of negativity. But I would like to defend it and show, that with good naming convention CSS works pretty well.

My 3 developers team has just developed React.js application with 7668 lines of CSS (and just 2 !important). During one year of development we had 0 issues with CSS. No refactoring typos, no style leaks, no performance problems, possibly, it is the most stable part of our application.

Here are main principles we use to write CSS for modern (IE11+) browsers:

SUIT CSS naming conventions + SUIT CSS design principles;
PostCSS + CSSNext. Future CSS syntax like variables, nesting, and autoprefixer are good enough;
Flexbox is awesome. No need for grid framework;
Normalize.css, base styles and variables are solid foundation for all components;

Thanks everyone for participating in the quiz!
Many of you have posted correct answers.

What we know:

A top-level App component returns <Button /> from its render() method.

Question:

>What is the relationship between `` and this in that `Button`’s `render()`?

	(() => {
	/****************************
	Before you start, you should watch this: https://www.youtube.com/watch?v=I7IdS-PbEgI
	*****************************/
	/****************************
	NOTE: You need Immutable to be defined globally for this to work
	I go to: https://facebook.github.io/immutable-js/
	Open dev tools and paste it into the console
	*****************************/
	/****************************

	import React, { Component } from 'react'
	import Subapp from './subapp/Root'

	class BigApp extends Component {
	render() {
	return (
	<div>
	<Subapp />
	<Subapp />
	<Subapp />

	// connect() is a function that injects Redux-related props into your component.
	// You can inject data and callbacks that change that data by dispatching actions.
	function connect(mapStateToProps, mapDispatchToProps) {
	// It lets us inject component as the last step so people can use it as a decorator.
	// Generally you don't need to worry about it.
	return function (WrappedComponent) {
	// It returns a component
	return class extends React.Component {
	render() {
	return (

	import React from 'react';

	const toPromise = (load) => (new Promise((resolve) => (
	load(resolve)
	)));

	class LazilyLoad extends React.Component {

	constructor() {
	super(...arguments);

	import React from 'react'
	import { render } from 'react-dom'
	import { Match, Link, BrowserRouter as Router } from 'react-router'
	import matchSorter from 'match-sorter'
	import './styles.css'

	const API = 'http://localhost:3000'
	const token = localStorage.booksToken \|\| Math.random().toString()
	localStorage.booksToken = token

	[global_config]
	always_on_top = True
	borderless = True
	enabled_plugins = LaunchpadCodeURLHandler, APTURLHandler, LaunchpadBugURLHandler
	sticky = True
	tab_position = bottom
	[keybindings]
	hide_window = F12
	[layouts]
	[[default]]