Organising Elm components

Quick follow up to my previous post, this assumes that you have set up your app and dev environment in the way I described.

1. Add a Component directory #

mkdir src/Component

2. Create a component #

touch src/Component/Hello.elm

3. Edit the component #

Notice the magic namespacing here - our module name Component.Hello is derived from the name of the directory and filename.

// src/Component/Hello.elm
module Component.Hello where

import Html exposing (..)

sayHello : String -> Html
sayHello greeting =
    div
        [ ]
        [ text (greeting ++ " from Hello component") ]

4. Import into Main.elm #

Note: as Hello is simply an alias to Component.Hello which allows us to call its functions a little more concisely.

// src/Main.elm
module Main where

import Html exposing (..)
import Component.Hello as Hello

main =
    Hello.sayHello "uhh... hi"