React in the blink of an eye!

Learn what you need to get started in React JS! Or just have some minutes of fun reading this article!

Well, I guess you are in this article since you have heard amazing things about React, if that is case, you can skip the next paragraph and save 30 valuable second of your time! But, just in case you have never seen something before about React, I will give you a quick definition.

React is an open source Javascript library for building UI components. It is one of the most popular frameworks to build web applications (See the image below). Ok, maybe that sounds boring but, trust me, React is amazing. I’m full-stack software engineer and I’ve been working with big companies that are migrating their projects from old tools into super frameworks such as React. Wait a sec, Am I asking you to trust in me? Ok, maybe you won’t do it, I am a stranger, lol. But, I hope this article help you to learn a couple of new things

How Javascript frameworks have trended over time based on use of their tags in Stack Overflow

During this article we will be learning 3 important concepts that will give you an intro into your React trip.

• JSX, what a *** is that?
• Components, how they work!
• State and life cycle, please don’t be afraid, just keep with me!

JSX — JavaScript XML

Mainly, JSX is just syntactic sugar for the React.createElement(component, props, … children) function. In other words, is a preprocessor step that includes XML syntax in JavaScript. JSX helps to make your code very readable and maintainable.

<MyHeader type="mobile" handleClick={someFunction}>
  Hello World
</MyHeader>

Is transformed into

React.createElement(
  MyHeader,
  {
    type: "mobile",
    handleClick: someFunction
  }, "Hello World");

As you can see JSX is formed mainly of 3 properties:

• Tags: opening tag and closing tag
• Children: content between the tags
• Props: the way you can pass variables, constants, functions, etc. Into that element.

Lets see again the code but with some notes

<MyHeader // Opening Tag
  type="mobile" // Prop 1: constant
  handleClick={someFunction} // Prop 2: function
>
  Hello World // Children
</MyHeader> // Closing Tag

To have an easy definition of what JSX is we cain said: is a syntactic sugar for JavaScript that describe how the UI elements look like.

Remember that this article is just to learn the basics in some minutes, I recommend you to go to the following links to get a full understanding of what JSX is and how to get all its benefits:

Introducing JSX: https://reactjs.org/docs/introducing-jsx.html
JSX in Depth: https://reactjs.org/docs/jsx-in-depth.html

React Components

Ok, JSX was fast, right? Let’s define the components!

Components are short, independent and reusable elements of the User Interface. And, to keep it short: a component is just a function that represents an element on the UI, it could be a button, a header, a label, a modal, a side-bar, etc, etc, etc…

We can create components using as classes or as functions.

Class Components are defined as the code below:

class MyHeader {
render(){ // Every class component should have this render function
  return <MyJsx>Hello World</MyJsx>; // is intended to returnJSX
 }
}

We can have also Functional Components:

function MyHeader(props){
  return <h1>Hello, {props.world}</h1>
}

Have you notice this:

• Every component start with Capital letter:
  <Component></Component>
• We can return HTML tags also as JSX, these don’t start with capital letter
  <h1>Header 1</h2>

Great, that was fast! But, to be honest is just a quick start. Please visit the following links to understand well how components work:

Components and props:
https://reactjs.org/docs/components-and-props.html

React Component API reference:
https://reactjs.org/docs/react-component.html

State

Ok, what is the state? First, what are the states of matter? We can said: solid, liquid, gas and plasma [How can we get plasma? haha. Ok, let’s keep with React state].

Let’s take: Solid, Liquid and Gas states of the water. How do we pass from one state to another? We need a trigger right? In this case called: temperature. Each time we want to go from liquid to solid, we need to decrease the temperature lower than 0 degrees Celsius. Similarity, if we heat a volume of water above 100°C water changes into a gas.
And, that is exactly the way React state work, with:

• Trigger: something that changes the state
• State: variable that will change into whatever we want (Could be plasma)

Check this code

Class Matter {
  constructor() {
    this.state = { // Create an state in our component
      water: "liquid" // default value
    };
  }
  function changeStateOfWater(temp) {
    let waterState = "liquid";
    if(temp < 0) state = "ice";
    else if(temp > 100) state = "gas";
    else state = "liquid";
    this.setState({ water: waterState});
  }
render() {
    return (
      <div>
        <h1>State of Water</h1>
        <p>this.state.water</p>
        <button 
         onClick={() => changeStateOfWater(
                   Math.floor(Math.random()*200) - 100;
                  )}
        >
          Set Temp
        </button>
      </div>
    );
  }
}

Did you note:

• You have to create and define default values in the class constructor
• If you want to update the state use: this.setState
• Note: Each new update in the state will run again the render method, updating automatically four UI

Visit the next link to learn more about the state:

State and Life Cycle: https://reactjs.org/docs/state-and-lifecycle.html

To Conclude

Thank you for reading this article, I’ll be creating another one to put in practice all this concepts.

I hope you’ve learned something new and check the links to increase your React abilities.