Introduction

We are going to build a full Todo application using React JS. We build the application to learn the basics concepts of ReactJS such as Components, States, Props, Lifecycle hooks, Event...

What is React?

React is technically a JavaScript library. It is not a framework like a lot of people tend to think. It was created and is maintained by Facebook. React is used to create front-end applications (it means applications that run on the browser). The benefits of running applications on the client are among others, performance boost, interactive interface, high-load application with a minimum server reload.

React is the most popular front-end framework in the industry for now.

Why use React

Javascript allows us to interact with the DOM to create and manipulate user interface elements. But writing applications with vanilla JavaScript, we end up writing a lot more code, it is tedious and difficult to do simple things that can be done using libraries or frameworks.

React makes it very easy to build complex front-end projects. React is also very organized and uses self-contained independent components that have their own state allowing us to build an interactive user interface.

With React, we don't manipulate the actual browser DOM. We manipulate Virtual DOM. That allows us to only manipulate and change what needs to be changed as opposed to the whole page.

React also use a syntax called JSX which allows us to use HTML markup right inside of JavaScript code.

Finally, React makes it easy to work with teams because it is organized and every developer can be on the same page, working on different components at the same time.

What to know before learning React?

Obviously, one has to know basic JavaScript programming fundamentals (Objects, Arrays, Conditionals). It may also help to know ES6 features such as :

• Classes
• Destructuring
• High order array methods (forEach, map, filter)
• Arrow Functions
• Fetch API & Promises

Thinking in Components

![React App Component Structure])

React put everything in the user interface into a self-contained component that really organizes the application. In the figure above we have an application a basic Todo App similar to what we will be building. We can see the different components that are outlined. The search component, the todo-list component, the todo component, the add-todo components. All these cited components are wrapped in the todo-app component.

React State

We mentioned that components can have a state. A state is just an object which contains property/value that determines how the component behaves and renders. Here is an example of a state of a simple post component.

state = { 
    title: 'xxxx',
    body: 'xxxx',
    isFeatured: true
}

The post has a title, a body, a isFeatured. We can render this data out, we can also choose to render the post component differently depending on the value of a isFeatured state property for instance. We can also have events that can dynamically change the state and it will automatically reflect on the user interface.

Sometimes, though we need application-level state, and it is data we want to share with multiple components. To handle this requirement, we have a state manager called redux but React also has its own context API to handle that.

Create-React-App

To get started React offers a tool called create-react-app which is a CLI (Command Line Interface) tool to create for creating react applications

create-react-app uses webpack which is a module bundler that bundles javascript files among other things.

create-react-app also comes bundled with a development server with hot reload that reload the server every time we make a change to the application files.

Finally create-react-app comes with a build tool that allows us to compile the code that can be load and render by the browser just by typing npm run build

Anatomy of a Component

There are several types of components in the React world. We have:

• Function Components: They are literally JavaScript functions. They take a single props as an argument with data and return React element.
• ES6 Class Components: They are Java