Simon Donaldson sidonaldson

React "Hello World" Examples

Below are a small collection of React examples to get anyone started using React. They progress from simpler to more complex/full featured.

They will hopefully get you over the initial learning curve of the hard parts of React (JSX, props vs. state, lifecycle events, etc).

Usage

You will want to create an index.html file and copy/paste the contents of 1-base.html and then create a scripts.js file and copy/paste the contents of one of the examples into it.

Export multiple Adobe Illustrator artboards to png, jpg, pdf

This is a reference to Matthew Ericson's article Export Illustrator Layers and/or Artboards as PNGs and PDFs in case something happens to happen to the article, and if I just forget where to find the exporter online.

Usage

Drop MultiExporter.js into /Applications/Adobe\ Illustrator\ CS6/Presets.localized/en_GB/Scripts
Restart Illustrator

A quick example Harp app that uses the correct title for your blog in the correct place.

The App

app/
  |- _harp.json
  |- _layout.ejs
  |- index.ejs
  |+ posts/
      |- _data.json

	function sortObject(object) {
	//Thanks > http://whitfin.io/sorting-object-recursively-node-jsjavascript/
	if (!object) {
	return object;
	}

	const isArray = object instanceof Array;
	var sortedObj = {};
	if (isArray) {
	sortedObj = object.map((item) => sortObject(item));

	import { useRef } from 'react';

	const safeDocument = typeof document !== 'undefined' ? document : {};

	/**
	* Usage:
	* const [blockScroll, allowScroll] = useScrollBlock();
	*/
	export default () => {
	const scrollBlocked = useRef();

	brew options ffmpeg

	brew install ffmpeg \
	--with-chromaprint \
	--with-fdk-aac \
	--with-fontconfig \
	--with-freetype \
	--with-frei0r \
	--with-game-music-emu \
	--with-libass \

	import React, { Component } from 'react'

	export default class MyComponent extends Component {
	render() {
	return (
	<div>
	<h1>This is my Component</h1>
	</div>
	)
	}

	$ cd /usr/local
	$ git checkout b64d9b9c431642a7dd8d85c8de5a530f2c79d924 Library/Formula/node.rb
	$ brew unlink node
	$ brew install node
	$ npm install -g npm@latest

	// this method is currently broken
	// better use vinyl-source-stream method
	// http://fettblog.eu/gulp-browserify-multiple-bundles/

	const gulp = require('gulp');
	const browserify = require('browserify');
	const transform = require('vinyl-transform');
	const browserSync = require('browser-sync');
	const reload = browserSync.reload;
	const gutil = require('gulp-util');

	/**
	* Date.prototype.addDays
	*
	*/
	Date.prototype.addDays = function( days ) {
	var element = new Date( this.valueOf() );
	element.setDate( element.getDate() + days );
	return element;
	}