=> The React script allows us to write React components

=> The ReactDOM script allows us to place our components and work with them in the context of the DOM

ReactDOM.render(<Greeting />, document.getElementById('root'));

Translating the line of code above to English would sound something like this;

Use ReactDOM’s render method to render the Greeting element into the DOM in a container with the id of root.

When naming a React component, it is convention to capitalize the first letter. This is important because it enables React to differentiate between the native HTML tags such as div, h1, span etc and custom components like Greeting.

Functional (Stateless) Vs Class (Stateful) components

By now, you’ve created both a functional and class component. In this section, we’ll take a closer look at the differences as well as situations in which you might prefer to use one type over another.

Functional components

These components are purely presentational and are simply represented by a function that optionally takes props and returns a React element to be rendered to the page.

Generally, it is preferred to use functional components whenever possible because of their predictability and conciseness. Since, they are purely presentational, their output is always the same given the same props.

You may find functional components referred to as stateless, dumb or presentational in other literature. All these names are derived from the simple nature that functional components take on.

=> Functional because they are basically functions

=> Stateless because they do not hold and/or manage state

=> Presentational because all they do is output UI elements

A functional component in it’s simplest form looks something like this:

const Greeting = () => <h1>Hi, I’m a dumb component!</h1>;

Class Components

These components are created using ES6’s class syntax. They have some additional features such as the ability to contain logic (for example methods that handle onClick events), local state (more on this in the next chapter) and other capabilities to be explored in later sections of the book.

As you explore other resources, you might find class components referred to as smart, container or stateful components.

=> Class because they are basically classes

=> Smart because they can contain logic

=> Stateful because they can hold and/or manage local state

=> Container because they usually hold/contain numerous other (mostly functional) components

Class components have a considerably larger amount of markup. Using them excessively and unnecessarily can negatively affect performance as well as code readability, maintainability and testability.

A class component in its simplest form:

class Greeting extends React.Component {  render(){    return <h1>Hi, I’m a smart component!</h1>;  }}

How do I choose which component type to use?

Use a class component if you:

=> need to manage local state

=> need to add lifecycle methods to your component

=> need to add logic for event handlers

Otherwise, always use a functional component.

Props

Props are React’s way of making components easily and dynamically customisable. They provide a way of passing properties/data down from one component to another, typically from a parent to a child component (unidirectional dataflow).

It’s important to note that props are read-only and that a component must never modify the props passed to it. As such, when a component is passed props as input, it should always return the same result for the same input.

All React components should act as pure functions with respect to their props.

State

Adding State to a Class Component

class Greeting extends React.Component {  render(){    return <h1>I’m a component in need of some state!</h1>;  }}

Adding state to the Greeting component above involves defining within the class component, a constructor function that assigns the initial state using this.state.

class Greeting extends React.Component {  constructor(props) {   super(props);     // Define your state object here     this.state = {       name: ‘Jane Doe’     }   }   render(){     return <h1>Hello { this.state.name }</h1>;   }}

Notice that the constructor accepts props as an argument, which are then passed to super(). Adding super() is a must when using the constructor.

Passing props is not necessary unless you are making use of them in the component. From the Greeting component above, it’s not necessary to pass props to either the constructor or super(), that is to say, the component can be written like so:

class Greeting extends React.Component {  constructor() {    super();    // Define your state object here  }  // Define your render method here}

However, the React docs recommend that you always pass props in order to guarantee compatibility with potential future features

State is accessed using this.state as seen in the Greeting component’s h1 tag.

State is initiated using this.state, however, all subsequent changes to state are made using this.setState. Using this.setState ensures that the components affected by the change in state are re-rendered in the browser.

Using the React Devtools

With the Greeting component from earlier in this chapter rendered in your browser, open the developer tools and navigate to the React tab. You should see something similar to this

Mastery of the React DevTools will enable you to gain a better understanding of React’s inner workings and to quickly debug React applications.