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