React 01 - Beginner : React function... Or How beauty comes from simplicity
Tags: react, javascript, typescript, html
Published: 2020-10-28 19:56:16

---
series: React overview for beginner
---
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.

```html
<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](https://dev.to/nomoredeps/why-react-uses-in-my-opinion-the-perfect-rendering-engine-4beh))

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.

```tsx
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.

```tsx
<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.

```tsx
// 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.

```tsx
<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 !!