twilson63

Get Started with React

TL;DR

Just clone this gist if you don't feel like typing...

This is a sort step by step post on how to get started with React without Webpack.

Step 1

twilson63

{
  "esversion": 6,
  "asi": true
}

twilson63

yarn init -y
yarn add --dev neutrino neutrino-preset-react
yarn add react react-dom 
yarn add tachyons react-icons animate.css redux react-redux redux-thunk ramda isomorphic-fetch react-router-dom t63
npx json -I -f package.json -e 'this.scripts = { "start": "neutrino start --use neutrino-preset-react", "build": "neutrino build --use neutrino-preset-react"}'
mkdir src && touch src/index.js src/store.js src/constants.js src/db.js

twilson63

{
    "test": "tap test/*.js --100",
    "preversion": "npm test",
    "postversion": "npm publish",
    "postpublish": "git push origin --all; git push origin --tags"
}

twilson63

Troubleshooting Guide

This is a guide on how one might go about troubleshooting problems with a web application, using tools like console.log(), chrome dev tools, the debugger, and other resources.

Setting up for success

Break a task down into small chunks. Verify each chunk. As you successfully complete a step and validate that the code works, perform a git commit to provide a historical bread crumb trail. This will narrow the scope of a potential error.

Use a linter

twilson63

lsof -i TCP:3000 | grep LISTEN | awk '{print $2}' | xargs kill -9

twilson63

"use strict";
/**
 * Name: Calculator
 * Author: Tom Wilson
 * Description: This is a calculator engine that provides the ability to 
 * set the operators functions that will be used in the calculation process
 * this gives the student the ability to create the operator functions of the 
 * calculator process, without having to worry about the engine.
 * The main calc method takes a string as an equation:
 * 

twilson63

export PROJECT=foo
create-react-app $(PROJECT)
cd $(PROJECT)
yarn add react-router-dom tachyons redux react-redux pouchdb-browser blocs ramda

twilson63

import { EventEmitter } from 'events'
import { isTokenExpired } from './jwtHelper'
import Auth0LockPasswordless from 'auth0-lock-passwordless'
export default class AuthService extends EventEmitter {
  constructor (clientId, domain) {
    super()
    // Configure Auth0 Passwordless
    // We’ll get the clientId and domain credentials from our .env file we created
    this.lock = new Auth0LockPasswordless(clientId, domain)

twilson63

import React from 'react'

import AuthService from './utils/auth-service'

const basicReducer = type => (state = null, action) => {
  switch (action.type) {
    case type:
      return action.payload
    default:
      return state