Skip to content

Instantly share code, notes, and snippets.

View stubbornella's full-sized avatar
😀
Building a browser

Nicole Sullivan stubbornella

😀
Building a browser
View GitHub Profile
@stubbornella
stubbornella / if-you-like-jquery-you-are-gonna-love-react.md
Last active May 26, 2018 06:12
If you like jQuery, you're gonna love React, and how to set it up on npm

I bet you think I'm making that up, right? Here is the thing, they both solve the same problem, just in different ways:

DOM interactions are complicated, it would be great if we didn't have to worry about them.

That's it, that is all both libraries do. I'm exaggerating a little, but not too much! They aren't trying to solve every problem out there, both libraries are highly focused on the DOM. They leave other bells and whistles to adjacent libraries, following a "do one thing and do it well" philosopy.

jQuery solves the DOM complexity problem by giving you handy ways of accessing particular nodes, and little methods for adding events to those nodes once you find them.

$("#price"); // finds the price element

##Usage

First, require the component.

var Media = require('pivotal-ui-react.media').Media;

Next, in your jsx, use the component. The default media displays a media object (images, video, audio) to the left or right of a content block.

@stubbornella
stubbornella / media-object.jsx
Created December 18, 2014 15:29
Media Object from OOCSS and now Bootstrap written in React/jsx
'use strict';
var React = require('react/addons');
var _ = require('lodash');
var setClass = React.addons.classSet;
var MediaObject = React.createClass({
render: function () {
var classes = setClass({
'media-left': this.props.horizontalAlignment === 'left',

How do you make a Media component in React?

var Media = React.createClass({

});

We then need to export our component so it can be used outside this file.

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]" />
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="text">text to be replaced</div>
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]" />
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<h1>Using onclick</h1>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="text">text to be replaced</div>
<ul>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="text">text to be replaced</div>
<ul>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="text">text to be replaced</div>
</body>
@stubbornella
stubbornella / dabblet.css
Created March 1, 2013 09:07
CSSConf gradient
/* CSSConf gradient */
height: 100%;
background-color: #96cd23;
background-image: radial-gradient(
hsla(330, 50%, 60%,0) 10%,
#c69 12%,
#c69 18%,
hsla(330, 50%, 60%,0) 20%,
hsla(330, 50%, 60%,0) 44%,