kodeFant

{
  "extends": ["react-app", "plugin:prettier/recommended"]
}

kodeFant

npx create-react-app NewAppName

Get Prettier & ESLint set up
https://gist.github.com/kodeFant/37d80984f275cd1d3122fbf9868b0f7a 

Add Reactstrap
https://reactstrap.github.io/

kodeFant

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Article;
use App\Http\Resources\Article as ArticleResource;

class ArticleController extends Controller
{

kodeFant

Set React Scaffolding for Laravel Project

php artisan preset react && npm install && npm run dev 

Adding create-react-app-linter options to any React Project

Reference https://www.npmjs.com/package/eslint-config-react-app

kodeFant

system_type=$(uname -s)

if [ "$system_type" = "Darwin" ]; then

  # install homebrew if it's missing
  if ! command -v brew >/dev/null 2>&1; then
    echo "Installing homebrew"
    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  fi
  

kodeFant

type RemoteData err data
    = NotAsked
    | Loading
    | Failure err
    | Success data

kodeFant

return foldRemoteData(
  () => <FetchPosts getPosts={getPosts} />,
  () => <Loading />,
  (error: Error) => <Failure error={error} />,
  (data: Post[]) => <BlogPosts data={data} />
)(posts);

kodeFant

Set up Elm in IHP

Archived content from the IHP with Elm series

This is just archived content from part 1 because IHP integrated this part of the tutorial into a boilerplate in the framework. It could be helpful to reference in case you want to set it up manually in an exisiting project.

Update .gitignore

Let's update .gitignore as soon as possible to avoid pushing unwanted stuff into git.

kodeFant

type MealPreference = Vegan | Vegetarian | Meat

type CelebrityStatus = NonCelebrity | Celebrity

type alias PassengerInfo = {name: String, passportId: String, extraLuggage: String}

type Passenger
    = Economy PassengerInfo
    | FirstClass MealPreference PassengerInfo CelebrityStatus

kodeFant

type RemoteData<E, D> =
  | { type: "NOT_ASKED" }
  | { type: "LOADING" }
  | { type: "FAILURE"; error: E }
  | { type: "SUCCESS"; data: D };
  
  
function foldRemoteData<R, E, D>(
  remoteData: RemoteData<E, D>,
  notAsked: () => R,