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"
 
66
Kudos
 
66
Kudos

Now read this

Setting up a dev environment in Elm using Atom

It’s as easy as 1,2,… uhh.. 10 Our goal is to put together an Elm environment that includes custom HTML/SCSS and is suitable for a professional workflow for web applications. The approach outlined here puts an emphasis on simplicity and... Continue →