Getting into React Part 1

All posts in this series use versions around July 2017, i.e.
React: late v15s
Typescript: v2.3.4
etc. - you know things are in flow. While react has been quite stable the past years, you never know. The code you will see is compatible to react v16, though.

I have no idea how many getting started tutorials are out there that deal with react, but I felt like documenting the things I know about using that library, in case I forget something about something or that someone else might find some part useful.

The danger with tutorials, especially in the kingdom of javascript: They can get mouldy, become obsolete and all that. This will no doubt happen to this one as well. There is at least the possibility of fixing it, though, as my site is github repo that is located over here.

Even so, I have found react to be quite stable as far as javascript libraries go. Major versions come with their deprecation warnings and the things you need to fix have been of a mechanical nature and quite manageable.

So, let’s get started with react with a simple hello world:

Yeah, right.

Here’s the Hello World:

<html>
    <head>
        <script src="https://unpkg.com/react@15/dist/react.js"></script>
        <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
        <script>
            const { createElement } = React;
            const { render } = ReactDOM;
            const Hello = ({text, color = "black" }) =>
                createElement("h1", { style: { color } }, `Hello ${text}`);


            document.addEventListener("DOMContentLoaded", () =>
                render(
                    createElement(Hello, { text: "World", color: "mediumseagreen" }),
                    document.getElementById("target")
                )
            );
        </script>
    </head>
    <body>
        <div id="target"></div>
    </body>
</html>

Yes, that’s it. And you can even specifiy a color.

Of course I’m trolling you. This is modern javascript development. We need TypeScript, so we need compilation, hence we need webpack, and when we develop we need hot reloading and JSX to keep sane, and enzyme to test, and redux as a flux backend, or rather Cerebral, or OH MY GOD!

So, yes, I’ll definitely not be able to give you answers to all of that, but, without further ado, let’s move on to the real Hello World, the one shown in the tweet.