React 01 - Beginner : React function... Or How beauty comes from simplicity

This post is intended for an audience that doesn't necessarily have the time to give React a try, but who would like to understand what it's all about, basically. This is the first post of a serie that will cover a full overview.

Let's start at the beginning. Let's take 2 features of the web that every front-end developer knows well.

HTML, for formatting, and scripting (Javascript or Typescript) for logic.

Let's start with our most basic Hello world HTML template.

<div>
  <span>Hello Kitty</span>
</div>

I know, I almost lost you, but I think you survived.

Joke aside, the good thing about HTML is that like any XML-based description, its tree structure is easy to read and represent in your head. And each tag allows you to represent a particular element.

What I really want to do when creating a template is to extend this HTML to naturally put tags representing the components I want to create and use, as naturally as the code above.

And that's where the second part comes in, scripting. Because yes, you're going to have to code a bit, it's not magic either.

Suppose we want to keep it simple, and create a component that represents our Hello Kitty.

React will allow us to do this via a definition that perfectly combines the best of both worlds, called JSX (See this little introduction)

Thanks to JSX, you will be able to use your HTML code directly in your JS/TS code. Think of it as the possibility to materialize a tag, as a stand-alone Object, no more, no less.

function HelloKitty() {
  return <span>Hello Kitty</span>;
}

It cannot be more simple.

And just with this, you are now able use it as it was always a valid HTML tag of the same name as the function.

<div>
  <HelloKitty />
</div>

The initial HTML template needs to be placed in a JSX file for sure, to be correctly understood, but the syntax remains exactly the same.

Now let's be crazy, and let's transform a little bit our component to be able to put any wording, a touch of dynamism doesn't hurt.

As we are in a function, it can take an optional parameter, which will simply represent the attributes of this new tag.

// In Javascript
function Label(props) {
  return <span>{props.text}</span>;
}

// In Typescript
function Label(props: {text: string}) {
  return <span>{props.text}</span>;
}

Again it pushes the simplicity at a high level.
We have defined a new attribute named text of type string to show an arbitrary wording.

Let's modify our template accordingly.

<div>
  <Label text="Hello Kitty"/>
</div>

Wait wait wait !!! That's all ? No hidden fees ? Just define it and use it ? No need to use a kind of decorator or mixin ? No need to configure some injection ?

You want us to buy a tech that is the same thing as we already use on a day to day basis ?

Short answer : That's the beauty of React. Why adding another layer of knowledge specifically WHERE you don't need to.

React can do far more obviously, but this is only a short overview. The next post will cover how to design a component, and the mindset behind React.

Enjoy !!