css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.

Posts tagged react

React + Value Transforms

After a short time with Facebook's React I found the need to intercept the properties coming into my components so I could transform them appropriately. Eventually I settled on a pattern...

React Mixin — Scroll Lock

Do What I Meant, Not What I Said

The sci-fi of my childhood promised computers that would do what I meant, not exactly what I said. You know that feeling — when you know what you want your computer...

Managing Data Flow With Flux and React

How best to manage data flow with Flux?

The easiest and first step seems to be in how you divide or deconstruct your components. Keep seperate folders for "dumb" and...

Tabbed Navigation with React

This is super basic, but I think the concepts here might help someone just starting out with React (as I am).

In this example, I'm going to create a very basic (nigh unusable, but a good basis...

A few thoughts on React development

I've been wondering what reasons are behind Facebook's keen recommendation of using immutable data. So now that I figured at least one pattern where mutability is evil I thought I'd...

Building a DOM library, thoughts on performance and stuff

In the past few weeks I've been playing around with NomJS, a library that has the sole focus of making life with DOM easier. To be honest the current solution isn't as solid as it could be,...


By now this shouldn't be a big news, but CoffeeScript has served it's purpose and it is now the time for it to die. I'm quite honest here: I don't like CoffeeScript. I like the good...

Advanced BEM with React components

The past week or so I've spent quite a lot of time putting together react-tabbordion component. It is my first contribution to npm and also the first time I've managed to put up WebPack and...

Reading RSS with React and Rails

rails opengraph' class="post-image

React and Rails, huh?

The React JavaScript library has blasted into popularity since Facebook released it a few years ago. I know that for me it’s become...

Better Rails React RSS (2nd Draft)

rails opengraph' class="post-image

Time for a Rewrite (or more like an expansion)

In a previous post we setup an RSS reader for parsing Craigslist jobs postings. The basic functionality is all...

Rails Audio Player with React

react audio' class="post-image

React.js and Rails

I’ve used React.js with Rails for a couple of little projects, but when it came time to add Album/Playlist player controls to a “header” element...

Album/Playlist Player With React and Rails

react audio' class="post-image

Almost There

In the last post we migrated the HTML5 audio element and associated JavaScript playback handling to React. This time we’re ready to migrate the...

#1 React drops

When I think of Web, I think of simple things, now I started thinking in React. Let start from the very beginning.

The why to use React the people on Facebook already answered, then I will write...

#3 React drops

Creating a component is an art. But, sometimes you need to pass some data to your component. Your component (almost always) need data to express something you want, and you can give it using...

#5 React drops

Let's create a dynamic UI. It's normal in web we create dynamic things. The example shows how React works with dynamic UI.

  var InputAnother = React.createClass({ render: function() { return...

Sublime Text Setup for React.JS Development

This was originally published Jan 5, 2016.

Sublime Text Setup for React.JS Development: Linting, Emment, and Formatting

In this tutorial, I will go over setting up Sublime Text 3 for linting,...

Getting Started with React.js


Getting Started in React.js, or any other javascript library or framework usually takes me a few hours or days of configuring my environment (downloading/updating node,npm,webpack,etc,etc)...

More React Pens


This is an ongoing series on React, check out the first part here:

Getting Started with React

So let's get started where we left off, in this case we want to validate an input form...

Icon React Component

For use with this setup.

  import React from 'react'; const Icon = React.createClass({ render () { const shape = this.props.shape; const sprite = '/public/img/sprites.svg'; return...

Animating SVG Charts built with React and D3

React, D3, SVG and Animation

One possible approach to creating data visualization charts is to use React and D3, where React handles building all of the SVG and D3 does the calculations required....

React js simple tutorial

React Js Simple tutorial list:

Here is the github souce code link : https://github.com/yokesharun/react-js-tutorial

creating a simple template with react

See the Pen simple-react-template by...

Turn Based Battles in The Danger Crew

I tried to fit this topic into my React Rally talk, Lessons Learned From Making a Video Game in React, but I had to cut a lot of details for time. (Check out the video of my React Rally talk here)...

Headless Wordpress & React

The goal of this post is to outline a structure for using wordpress as a backend editing tool for powering a snappy React based front end.

Note: This has not been built yet in full yet, but an idea...

TjejerKodar Barcelona

I got back from Tjejer kodar in Barcelona about a week ago I thought I would share my experiences here with you. So, 100 inspiring and awesome girls in Barcelona for one week, can’t really get any...

Simple React Router

Just the basics of using React Router (version 2.8.1 - v4 just came out and I'll monkey with that soon).

So you can use React Router to handle all of your navigation, and once getting used to...

React Props & Mapping

I like React because of how easy I find it to work with components. And when I'm working on a project that uses clickable thumbnails to send a user to a more detailed page, I really like React...

Social Coding — better. faster. stronger.

Social Coding — better. faster. stronger.

By Sasha Yee (Back end developer)

Social coding is an approach to development that places an emphasis on formal and informal collaboration.

If only they...

A React Navbar Component

I use React a lot, and I use navbars a lot, so this was just an obvious one for me. This is nothing extravagant. I'm not using React Router in this example, just some <a> tags. But it is...

ReactJS getDefaultProps & propTypes

So maybe it's a relatively obscure React lifestyle event, but I finally found a practical use for getDefaultProps, so that's cool.

Basically, getDefaultProps allows you to give your...

Creating an SVG Icon System in React Native

One of React Native's benefits is allowing web front-end developers to use their existing skillset to build native apps. However, just because the base technology is similar, the manner in...

React & Redux 入门教程 - 第一篇:React 术语浅析

本文是《React & Redux 入门教程》系列文章的第一篇。《React & Redux 入门教程》目标读者为有一定前端开发基础的 React & Redux 的初学者。

这一篇文章主要分析各种 React 术语,参考来自技术官网的资料,夹杂了我的个人体会和理解。通过阅读这篇文章,读者可以全面掌握各种核心 React 术语。在听别人讨论相关技术问题的时候,...

React Basics - making a markdown parser

Hello guys, this is a post on react basics. This is a very basic tutorial written for people who are beginner in React.

So, below is what we will be making. (If the codepen embed doesn't load,...

A Dummy's Guide to Redux and Thunk in React

If, like me, you've read the Redux docs, watched Dan's videos, done Wes' course and still not quite grasped how to use Redux, hopefully this will help.

It took me a few attempts at...

React patterns: JSX Spread attributes


The object properties are copied to the properties of the component.

var props = {}; props.foo = x; props.bar = y; var component = ;

The following attributes will overwrite the previous


Ramda unique counting with groupBy

Suppose we have an array of list. Each list have 3 fields which seperated by pipe '|'.

The first field defined as category.

The second field defined as nullable product.

The third field...

React - Passing State to {props.children} in JSX

I've recently begun working with React. So far so good! There is something quite intuitive about the use of state and reliance on components. Being able to break code down into very small,...

React - Reset Scroll Position when Changing Routes

As I delve deeper into React I want to continue writing about issues I hit or just just little tips I have come across. In this post I will be covering how to reset the window's scroll position...

Build & Deploy React JS Movie Info app part -1

Disclaimer: In this blog post we will not talk about what is react & why should we use it because there are lot of resources out there.

I have a video also for this blog post you can have a...

Writing a simple mobile app with React-Native Part 1. Setting Up



I think we are currently in a weird and wonderful transitional moment in web and mobile development,there is an excess of riches of easy and complex tools and frameworks for each one,...

Tiddly Bits: Intro to D3 + React

In the era of "big data," visual representations help to make sense of datasets of any size or complexity. Furthermore, libraries like d3 have turned javascript into the premiere platform...

React tips & tricks

Each component has one task

Components with logic don't render HTML

Standarised your conditionals

Use && for if statements

Use prop defaults

Use controlled components

Use unique names...

Controlled components

I prefer them over using refs

Multiple functions
JavaScript // example

One super function
Example test
JavaScript // example

Inline functions
JavaScript // example

Tiddly Bits: Nested Data and Higher Order Components

When faced with large or complex datasets, organization can help make sense of things. Categorization can help bridge the gap between data and their visual realizations. That's all fine and...












Headless WordPress with React - Complete Tutorial

This post originally appeared on my Medium account.

An intro to building decoupled WordPress-powered websites using the WordPress REST API and Create ReactApp

In recent months, I’ve taken a big...

React Udacity

When you use an array you need a unique key prop on each child element.

const people = [ {name: 'chris'}, {name: 'tyler'} {name: 'ryan'} ]

const element =...

What makes Jest outstanding?

Good afternoon every one! I know some of you are from the QA team, today I am going to present an interesting topic to you. There are lots of testing frameworks; recently there is a new one named...

Creating a Browser Extension with create-react-app


This post will walk you through creating a browser extension using React via create-react-app.

The React App

Step: Install create-react-app

Install create-react-app globally on your...

React Without a Build Step


Writing React components using createElement instead of JSX eliminates the need for a transpiler & build system. Components written in this style:

Leverage the core benefits of React—...

React Composition Patterns From The Ground Up

react logos and arrow

This post explores the many ways React Components can be combined, mixed-in, and mixed-up, including:

The Lifting State & Container/Presenter Pattern


3 fundamental principles for Redux

Redux can be understand with these three fundamental principles:

One Immutable Store for all the State

Everything that changes in app (data/ui state) is contained in a single object called the...

Tip for React PropTypes with Storybook

I've recently begun working with React.js, and I'm really enjoying it! There's so much to learn, but there's one tip I've picked up that's saving me some time.

I was doing...

Facebook gives one more reason to switch to React: Licence changed from BSD to MIT

React is bundled with lots more features and hence most loved technology among the developers and the clients. StackOverFlow survey shows that React is most loved technology.


Creating GitHub pages with React: Basic

1. Getting started with Create React App

Official : create-react-app

1-1. Quick Overview

  # Current path : ~/. npm i -g create-react-app create-react-app publish-react-app-basic cd...

Creating GitHub pages with React: Advanced

How to publish React project as GitHub pages ( with Sass + Redux + Routing )

1. Getting started with Create React App

Official : create-react-app

1-1. Quick Overview

  # Current path : ~/. npm i -g...

Creating mock-up with Polymer

React + Polymer = Polyreact

1. About Polyreact

Polymer is suitable for prototyping.
React is suitable for Web application developing.

React App + Polymer = Polyreact

Polyreact realizes fast...

Wedging State Data

In React, state must not be mutated directly, or, to say it in a dev-friendly way, state needs to be immutable. We don’t have to know all the inner-workings of React state to follow this guideline....

Creating a tic-tac-toe app with React Native and Pusher

In this tutorial we’ll create a ride-booking app with React Native and Pusher. The app that we’ll create will be similar to popular ride-booking apps like Uber, Lyft or Grab. React Native will be...

Creating a tic-tac-toe app with React Native and Pusher

In this tutorial, we’ll be implementing the classic game Tic-Tac-Toe with React Native and Pusher. This tutorial assumes that you already have a basic knowledge of React Native.



Using Webpack with React

Getting Started

  $ npm init $ npm install webpack --save $ npm install react react-dom --save 

File Structure

App folder -> for JavaScripts Modules

Public folder -> for files that are ready to...

I··C··D··O··T··S (––and––lines––)

I··C··D··O··T··S: A Web App Game

tl;dr - take me to the game already!

ICDots is a board game for 2-7 players who will take turns selecting lines to form boxes. Scoring is 1 point per box pinned....

Top Functions Performed By React.JS

As on June 2017, Facebook has two billion monthly active users which makes Facebook the most popular networking site in the world. The famous webpage of Facebook is built with React, also known as...

Short intro to React Components, Props and Destructuring

This is just a short post that started out as me trying to explain the concept of destructuring to a junior developer in my team. While reviewing one of his pull requests, I noticed that he had...

React 16's ✨ Stellar New Portal 🔮 API.

The Portal API

React 16 landed with a helpful new API called portals, which is a first-class way of rendering children into a DOM node outside of the parent component's hierarchy. Before 16,...

Fullstack React Chapter 2 Notes

In this chapter we build a time tracking app that a user can add, delete, and modify various timers from.

Some notes about component thinking

Components ending in the word list simply render a...

Using Promises with React

The seemingly constant churn in JavaScript frameworks is the bane of front-end developers everywhere. I remained on the sidelines for quite a while, but now that I'm learning React, I'm all...

Real-time Chart in JavaScript with ChartJS and Hamoni Sync

Real-time data is data that is presented as it is acquired. It is often used in tracking or monitoring systems like traffic GPS system, auction/bidding applications and stock trading applications....

How To Build Real-time Editable Datagrid In React

A datagrid enables you to display and edit data. This is vital in many data-driven or line of business applications. I've used it in some of the applications I've built. You might have...

React Context API

The Problem We're Solving

When building an app you'll end up with many nested components and passing down props can be a pain in the but.

This is usually solved by reaching for a framework...

React Training

Training date: 28-05-2018 2:21





States, Props




HW, State action

React to redux

Rest calls


Object oriented features added in ES6


Start with React JS

Hello Friends I am Yogesh Jadhav. I am too new in react.js. I am following below steps to start React App. Please like if you like it. :)


Install node latest version Node Version

Use Github...

A Drag & Drop example with React and HTML5 API


Recently, in one of my React project, I needed to add a Drag and Drop (D&D) feature to allow my users to manually sort a default list of data boxes (Stock Exchange data) in order...

React Interview Questions and notes

High order components

Synthetic events

Resolve browser compatibility issue we uses synthetic events

Difference between props and state

when and why to use redux?

watcher dom kaise linked hota...

React: An intro for the overwhelmed - Part 1

Jump to Part 2 >

Information overload

Do you want to learn React, but feel like you have to learn multiple things at the same time in order to get started? Then this post is for you.

We are...

React: An intro for the overwhelmed - Part 2

< Back to Part 1

Jump to Part 3 >

Classes instead of functions

Getting started with components was easier to understand with functions. However we are now going to define our components using...

the magic behind mobx

This is taken from his talk

  "use strict" const stack = [] function observable(initialValue) { let value = initialValue const observers = [] return { subscribe: function(observer) {...

"React: The Big Picture" Notes

Personal Notes of the Pluralsight Course React: The Big Picture by Cory House.

Why React?


2011: Facebook created React for their own site

2012: Instagram uses React

2013: Open Source