How To Code

lördag 2 november 2019

Kotline React GH-pages app Stage 3

So the goal of step 3 is to bring in Material UI and use a simple component. Going for a Button doing something. The simple part is to include the package.

yarn add @material-ui/core

But to use js libraries in kotlin is a bit complicated. For each component we need to define it in Button.kt:

@file:JsModule("@material-ui/core")
@file:JsNonModule

package materialUi

import org.w3c.dom.events.Event
import react.RProps
import react.RClass

 // way 1
@JsName("Button") // because it was exported as default
external val Button : RClass;

 external interface ButtonProps: RProps {
    var className : String
    var onClick: (Event?)->Unit
    var color: String
    var href: String
}

If you have any tips to make it easier this wrapping things feels a bit complicated:

#kotlin #react whats the thing with #wrappers mingodth is it really needed. I guess it gives purpose to wrapper builders.
— Patrik Gustafsson (@paven) November 1, 2019

Now on can us Material UI Button in App.kt but frist we need a state for the button to manipulate:


    interface APPstate : RState {
        var ticker: Int;
    }
    fun APPstate.init(props: TickerProps) {
        ticker = 0
    }

Now for the button, and asmale change using the state in ticker.

override fun RBuilder.render() {
        div("App-header") {
            h2 {
                +"The awesome Page"
            }
        }
        p("App-ticker") {

            Button {  +"Timetravel"
                attrs {
                    onClick = {
                        setState { ticker += 1 }
                    }
                    variant="contained"
                }}

            br{}
            ticker(state.ticker)

        }
    }

Stage 3: Now with imported #materialUI component!https://t.co/1jX2I3UaDP #1ede71e741050afcc7df3ac765a0416aa960fe31 #kotlin #React #ghpages #project

Most helpful link: https://t.co/U9X5uEe7xJ
— Patrik Gustafsson (@paven) November 1, 2019

Small changes from the original tweet: #dcb19ca8e1d7d84bf6cfc0c102a10a67405a811d

tisdag 29 oktober 2019

Kotline React GH-pages app Stage 1-2

This is my record of learning to use Kotlin in combination of React on github pages. I used React with typescript before at work. I did some Kotlin for android dabeling. I use gh-pages for most my hosting. I also want my source code to be private, so we need two github repositories. One for the source code and one for the gh-page.

I created two repositories on : https://github.com/new
The private project for my source code organiser, git-url: git@github.com:paven/organiser.git
gh page project organiser_beta: git@github.com:paven/organiser_beta.git

This first step required me to create a react kotlin app and hook it up to github:

yarn global add create-react-kotlin-app
create-react-kotlin-app organiser
yarn add gh-pages
cd organiser
git init
git remote add github git@github.com:paven/organiser.git
git commit -a -m "create-react-kotlin-app"
git push -f github master

You can read about the create-react-kotlin-app here: create-react-kotlin-app
And the git commands: git/docs

By now I had my source project created and up on github, but the gh-page was not up and running, for this I needed to do some editing to the configuration. The guide i looked at "How to deploy your react application to github pages" was pretty strait forward, but it defaults to sending to the origin repo and I wanted to send to a second github repo so i hade to figure some things out from npm/gh-pages.

So i modified my package.json (int the organiser repo) with the this:

{
   ...
   "predeploy": "yarn run build",
   "deploy": "gh-pages -d build --repo 'git@github.com:paven/organiser_beta.git'"
   ...
}

yarn deploy

Resulting in some joy from me, I figured this was a twitter moment

Playing around with a kotlin-react-gh-pages app. Stage 1 - doing nothing https://t.co/SRncgdmBGC ✌️
— Patrik Gustafsson (@paven) October 26, 2019

Though the page was mysteriously white it was a smale win. After investigating the webcode I realised that code tried to load from organiser instead of organiser_beta. I needed to change the first value in package-json

{
   {
      "name": "organiser_beta",
   ...
}

and after yarn deploy this it was a second twitter moment.

Stage 2 - It is doing something https://t.co/PqMEHlPxw9
Playing with #react #kotlin #ghpages
— Patrik Gustafsson (@paven) October 26, 2019

Tada!
More react: https://medium.com/@ralf.stuckert/getting-started-with-kotlin-react-c5f3b079a8bf

lördag 20 december 2014