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 https://codesandbox.io https://jsfiddle.net/ https://codepen.io I think first link CodeSandbox is the most interesting: _Already more than a week ago Bas Buursma and I released CodeSandbox: an online code editor with a focus on sharing…_hackernoon.com CodeSandbox — An online React editor 🏖 Offline For running react on your PC you need to (try or ). install node.js nvm docker create-react-app Storybook Or you can read my article how to install full react ecosystem into your PC: _It’s a first part of tutorial where I’m going to show how to create react app from scratch._medium.com React app from scratch What is component? Before we start I need to explain what is component? let you split the UI into independent, reusable pieces, and think about each piece in isolation. For example, Title component could be like this: Components <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 and components, other names: smart / stupid, containers/components. If talk about form inputs (text, button, checkbox…) components could be controlled. stateful stateless So let’s check it one by one. Stateful and stateless paradigm If you use JavaScript you can use classes or functions. A 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 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: _The above is the life of a React component, from birth (pre-mounting) and death (unmounting)._engineering.musefind.com React Lifecycle Methods- how and when to use them 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 and get data from DOM, but it’s not the react way. react ref State State could be global and local. Global state better manage with , but for small app you can still use stateful components. redux For managing local state (form inputs), you can use stateful components or — library that gives you a set of high order components (HOC) for managing state, lifecycle... recompose With recompose you can use only functional components. I’m going to describe this library more in next article. _As a teacher, one of my main goals is to maximize people’s “aha” moments._medium.freecodecamp.org React “Aha” Moments
