AliceWonderland

Hands-On Tutorials for React and Redux

Beginner practice projects in React and Redux for those who like to learn by coding.

There's so much out there and many ways to start out. This is a start, from here your path can branch out how you prefer.

All resources and references are free and/or open source.

React

First projects using Facebook's Create-React-App, a barebones React app. (Best for learning only). Avoid having to research, install, and configure a setup. Jump to being able to try it to get a better sense of it.

delibytes

React & JSX Cheatsheet

Overview
JSX HTML	<div>...</div>
JSX Component	<Component property={javascript} /> <Component property='string' />
JSX Component with Children	<Component>{children}</Component> reference: props.children
Escaping JavaScript	{...}
require statements	const React = require('react'); const ReactDOM = require('react-dom');
npm modules	react, react-dom

rodrwan

class Node {
  constructor (value) {
    this.value = value
    this.right = null
    this.left = null
  }
}

class Tree {
  constructor () {

rebeccapeltz

'use strict';
//https://gist.github.com/alexhawkins/f993569424789f3be5db
//http: //stackoverflow.com/questions/1331289/javascript-binary-search-tree-implementation


function BinarySearchTree(value) {
  this.value = value;
  this.left = null;
  this.right = null;
}

kavitshah8

'use strict';

function BinarySearchTree() {
  this.root = null;
}

BinarySearchTree.prototype.insertNode = function (val) {
  var node = {
    data : val, 

ryanflorence

Folder Structure

Please note

While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.

Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.

Mikodes

/* (320x480) iPhone (Original, 3G, 3GS) */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    /* insert styles here */
}
 
/* (320x480) Smartphone, Portrait */
@media only screen and (device-width: 320px) and (orientation: portrait) {
    /* insert styles here */
}