January 10, 2018
NOTE: This is a cross-post from my newsletter. I publish each email one week after it’s sent. Subscribe to get more content like this earlier right in your inbox! 💌
Hi ! In this post, I’ll try to simplify and show you some of React’s very basic, yet powerful, features.
PS : This is not one of those Read this and you’ll be ready to become an awesome React developer. I’m trying to help you Master React, but one blog post at a time.
It’s Javascript in an HTML way… I know it sounds (and looks) weird but bare with me, because once you learn how to write JSX, you’il love it. First, let me show you what would a Paragraph component look like using normal Javascript
'use strict'
var Paragraph = function Paragraph(props) {
return React.createElement(
'div',
null,
React.createElement('p', null, 'this is a paragraph')
)
}
Right now, you might be asking yourself WTF is this…. But don’t worry though, let’s write the same component but this time using JSX:
const Paragraph = props => (
<div>
<p>this is a paragraph</p>
</div>
)
Isn’t JSX awesome ? thought so 😏.
In React, there are two kinds of components, stateful components and stateless components.
Stateless components are functions that accept a single argument and return DOM elements. the Paragraph components that we have above for example is a stateless components, it accepts props as an argument and returns a p inside a div.
PS: the argument props is immutable, it can’t be changed inside the component.
Stateful components are components that have state and some other features.
A state is just an object that makes the component dynamic and determines how the component must be rendered, inside it, you need to store any data that is related or used by the component.
All this bla bla is weird so EXAMPLE TIME :
Let’s say we have a component that has an input and an h3, and we want to show whatever in the h3 is written in the input
import React, { Component } from 'react'
class ExampleComponent extends Component {
state = {
text: 'this is the initial text',
}
handleChange = event => {
this.setState({ text: event.target.value })
}
render() {
return (
<div>
<input
type="text"
value={this.state.text}
onChange={this.handleChange}
/>
<h3>{this.state.text}</h3>
</div>
)
}
}
Okay so let’s break down this example :
PS: DO NOT CHANGE THE STATE LIKE THIS :
this.state.text = 'something'
, if you do so, React won’t know if the state has changed or not, hence it won’t rerender your component. EVERYTIME you want to change the state, use the setState method like this:this.setState({ text: 'something' })
Apart from state, another feature that Stateful components have but the Stateless ones lack is the Lifecycle Methods.
These methods get called depending on weither the component gets mounted or unmounted, created or destroyed and when there’s a rendering error.
When a component is created and inserted into the DOM, these methods get called:
constructor()
componentWillMount()
render()
componentDidMount()
When a component’s props or state gets changed, the component rerenders and these methods get called:
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
When a component is getting removed from the DOM, componentWillUnmount()
get called
To declare one of these methods, you simply declare them the same way we declared the render method in the last example.
HISTORY TIME : Before React 16, to render multiple elements, we needed to wrap them with an element, like a div
const ThreeLines = (props) => (
<div>
<h1>title 1</h1>
<h1>title 2</h1>
<h1>title 3</h1>
<div>
)
and with React 16, a better way to render multiple elements was to return them inside an array:
const ThreeLines = props => [
<h1>title 1</h1>,
<h1>title 2</h1>,
<h1>title 3</h1>,
]
But this solution came with it’s own issues. You HAD to add a key prop to the elements in order to silence a React warning in the console for example.
With React 16.2, things got a bit easier and better thanks to Fragments :
const ThreeLines = (props) => (
<React.Fragment>
<h1>title 1</h1>
<h1>title 2</h1>
<h1>title 3</h1>
<React.Fragment>
)
Once rendered, this component would look like :
<h1>title 1</h1>
<h1>title 2</h1>
<h1>title 3</h1>
See, no more wrapping divs and no more Array-like crappy syntax.
I tried to be as concise as possible so that I won’t scare you off learning React, but the truth is that React is simple compared to other front end frameworks.
I will announce next week’s subject throught Twitter and email, so don’t forget to subscribe :D
Have a great week and see you soon !