Paulo Elias pauloelias

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.

Multi-language routing with Resource Router

The idea is to set up ISO 639-1 language code prefixes for urls (e.g. en/, de/, fr/), and set global variables {global:lang} and {global:lang_dir} for use in your templates.

In the control panel create a category group "languages" and populate it with your languages, setting the category url title to the appropriate 2-letter language code. Assign the category group to the channels you want to translate.

For example:

Category Name	Category URL Title

Files

The basic structure of a React+Flux application (see other examples)

 - /src/actions/AppActions.js     - Action creators (Flux)
 - /src/components/Application.js - The top-level React component
 - /src/constants/ActionTypes.js  - Action types (Flux)
 - /src/core/Dispatcher.js        - Dispatcher (Flux)
 - /src/stores/AppStore.js        - The main store (Flux)

React (Virtual) DOM Terminology

In React's terminology, there are five core types that are important to distinguish:

ReactElement / ReactElement Factory
ReactNode
ReactComponent / ReactComponent Class

React Elements

With Stash you have always been able to create global variables and evaluate them in the same template using if/else conditionals:

{exp:stash:set_value name="var" value="cheese" type="snippet"}

{if var == "cheese"}
  	We have cheese!
{if:else}
  	Where's the cheese, gromit? 
{/if}

	@media only screen and (min-width: 375px) {
	/* iPhone 6 Portrait */
	}
	@media only screen and (min-width: 414px) {
	/* iPhone 6 Plus Portrait */
	}
	@media only screen and (min-width: 480px) {
	/* Medium Sized Mobile */
	}
	@media only screen and (min-width: 667px) {

	<?php

	$plugin_info = array(
	'pi_name' => 'debug_override',
	'pi_version' =>'1.0',
	'pi_author' =>'GDmac',
	'pi_author_url' => '',
	'pi_description' => '',
	'pi_usage' => '{exp:debug_override override="all\|ajax"} default is override on ajax calls',
	);

	{# For this, I wanted the nav to show the top-level node and second-level nodes #}
	{# when on level 1, and then show the second-level and its children when on #}
	{# level 2 or level 3 (so we get good parent, child, and sibling navigation. #}

	{# Requires string 'sectionName' to be passed with Structure section name #}

	{% if entry.showLeftNavigation %}

	<nav class="interior-page__nav">

	<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/apple-touch-icon-152.png">
	<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144.png">
	<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/apple-touch-icon-120.png">
	<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114.png">
	<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/apple-touch-icon-76.png">
	<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72.png">
	<link rel="apple-touch-icon-precomposed" sizes="60x60" href="/apple-touch-icon-60.png">
	<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/apple-touch-icon-57.png">
	<link rel="apple-touch-startup-image" href="/apple_startup_image.png">
	<link rel="icon" type="image/png" href="/favicon-16.png" sizes="16x16">

	<div class="module__image image--lazy"
	data-image-src="Tim-Smith_220x140_220_140_int_c1.jpg"></div>