Once I tried to describe my friend what is react and why it so fast and why it so popular. He knows that it uses virtual DOM and it makes patch for updates and does not touch all other page.
But when I started to describe what is components and how compose them into big component, what is stateful and stateless, pure components, He didn’t understand it. I think it’s because of we just talked and I didn’t show an examples.
So here I’ll try to show examples.
But before I want to share some useful sources for running examples:
Online
I think first link CodeSandbox is the most interesting:
CodeSandbox — An online React editor 🏖_Already more than a week ago Bas Buursma and I released CodeSandbox: an online code editor with a focus on sharing…_hackernoon.com
Offline
For running react on your PC you need to install node.js (try nvm or docker).
Or you can read my article how to install full react ecosystem into your PC:
React app from scratch_It’s a first part of tutorial where I’m going to show how to create react app from scratch._medium.com
What is component?
Before we start I need to explain what is component?
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. For example, Title component could be like this:
<h1>Hello, {this.props.name}</h1>
And you can create other components and compose it into one big component like tags in HTML.
There could be stateful and stateless components, other names: smart / stupid, containers/components. If talk about form inputs (text, button, checkbox…) components could be controlled.
So let’s check it one by one.
Stateful and stateless paradigm
If you use JavaScript you can use classes or functions.
A class is a blueprint or template or set of instructions to build a specific type of object. Every object is built from a class. They are instance of the same class but they are different because of own state. You cannot compare objects.
class Component { state = {};
render() {
}}
const firstComponent = new Component();const secondComponent = new Component();
firstComponent !== secondComponent
If you use functions without side effects — pure functions, you can repeat the same result by passing the same parameters.
function buildComponent(text) {return `<h1>${text}</h1>`;}
const firstComponent = buildComponent('Hi');const secondComponent = buildComponent('Hi');
firstComponent === secondComponent
Stateful components
As objects in JS have own state and created using classes, stateful components are objects created from classes extended from React.Component or React.PureComponent (use it for avoid useless rendering).
The main reason of using stateful components is managing state of your app or component.
You can change state using this.setState method by putting plain object
this.setState({comment: 'Hello'});
or function:
this.setState((prevState, props) => ({ counter: prevState.counter + props.increment}));
But don’t use manual changing:
// Wrong!!!this.state.comment = 'Hello';
It won’t work. And don’t forget that rendering is asynchronous action.
Other reason is to managing lifecycle of your component.
You can read more about lifecycle:
React Lifecycle Methods- how and when to use them_The above is the life of a React component, from birth (pre-mounting) and death (unmounting)._engineering.musefind.com
Stateless components
Stateless component is just a pure function. It gets properties and returns component.
Or using a new ES6 standard we can use arrow function:
So if you like functional programming you can use it like: props => jsx.
It’s so easy and so useful.
Controlled components
If you need to get data from form inputs (checkbox, input text, textarea), you need to use components with state.
In this state you can store updates, render updates and return it to high order component to process this data.
Let’s check more useful example. If we want to send the name when it is submitted, we can write form as a controlled component:
Input changes state by entering data and on submitting form handler has access to state and can make any actions with it.
Other way is using react ref and get data from DOM, but it’s not the react way.
State
State could be global and local. Global state better manage with redux, but for small app you can still use stateful components.
For managing local state (form inputs), you can use stateful components or recompose — library that gives you a set of high order components (HOC) for managing state, lifecycle...
With recompose you can use only functional components. I’m going to describe this library more in next article.
React “Aha” Moments_As a teacher, one of my main goals is to maximize people’s “aha” moments._medium.freecodecamp.org