How to code in React

To use React, it is important to know how React is constructed and which code can be used.

React is a library based on components. According to freecodecamp components are independent, reusable pieces of code that can divide the User Interface into smaller parts. These 'smaller parts' are for example paragraphs, articles, buttons or headings.

Before we can look at the structure of components, it is important to know what JSX is. JSX stands for JavaScript XML and looks like a combination of JavaScript and HTML (Source, Source) :

const paragraph = <p>Hello there, this is JSX!</p>;

Although JSX does not necessarily have to be used within React, I will work with it myself and will also use it in the examples below. JSX also ensures that you no longer have to worry about loose JavaScript and HTML files.

Structure of Components

Within React we can code a component in two ways: Using functional components (also known as Stateless components) or class components (also known as Stateful components). Both types of components do have a number of points that correspond. For example, both include:

• A name of the component with a capital letter.
• Curly braces in which the code is written.
• Props (this is the abbreviation for properties) that are included.

But the way we tell React which one to use differs.

Class components

The structure of a class component starts with indicating to React that it is a class component. We do this by putting the keyword 'class' before the name of the component. We also put 'extends React.Component' between the name of the component and the curly braces:

class App extends React.Component {
  render () { 
    return <h1>This is the title of the page!</h1>;
  }
}

We can make this class component dynamic and reusable by providing props. We do this by using the keyword 'this' followed by '.props.' and the variable name we want to display:

class App extends React.Component {
  render () { 
    return <h1>This is the title of the page! Your name is: { this.props.name }</h1>;
  }
}

(Source)

Functional components

Compared to class components, it is easier to tell React that we want to use a functional component. We do this by writing the functional component like a normal function: We do this by putting the keyword 'function' before the name of the component. Behind the name of the component there are brackets where, just like with a normal function, variables can be added:

function App () {
  return <h1>This is the title of the page!</h1>
}

Or in the ES6 way:

const App = () => {
  return <h1>This is the title of the page!</h1>
}

We can make this functional component dynamic and reusable by providing props. We do this by adding props in the brackets:

function App (props) {
  return <h1>This is the title of the page! Your name is: { props.name }</h1>
}

Or in the ES6 way in which the properties are extracted:

const App = ({ name }) => {
  return <h1>This is the title of the page! Your name is: { name }</h1>
}

Lifecycle methods

Lifecycle methods are a cycle of events that take place from the beginning of the component to the end of a component (Source). First, lifecycle methods could only be used using the class components. But since React version 16.8, we can also access lifecycle methods through hooks when we write functional components(Source). First I will explain how lifecycle methods work within class components and then explain that hooks 'hook' into the lifecycle methods within the functional components.

Lifecycle methods within classes

Several standard life cycle methods are known in React classes. The most important and only required life cycle method is: render(). This method ensures that all elements are rendered to the User Interface. This is also where JSX is written in the code (Source):

class Title extends React.Component {
  render {
    return (
        <h1>Welcome to the page</h1>
    )
  }
}

There is also the constructor(). This method is called once when the component is started. In the constructor you use 'state' which is an object in which values from the props are stored. States can be used to make the component reusable and updating without calling it every second. We create this state object by equating this.state with an object in which values are stored (Source):

class Title extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      name: "Isabelle"
    }
  }
  render {
    return (
        <h1>Welcome to the page, { this.state.name }</h1>
    )
  }
}

The last three, but most commonly used life cycle methods are: componentDidMount(), componentDidUpdate() and componentWillUnmount() (Source).

Hooks within functional components

As I mentioned, since version 16.8 we can 'hook' into the lifecycle methods in functional components by using hooks. According to React's documentation, hooks are: "Functions within functional components that allow you to 'hook into' React's status and life-cycle methods." (Source). For this reason, hooks can also only be used within functional components.

Like the lifecycle methods, there are a number of fixed hooks available in React, but you can also write your own. The built-in hooks are: useState() and useEffect().