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"