Introduction to React

React is a Javascript library that is made for building single page applications. React was created in 2011 by a Facebook employee and its purpose was to improve performance and simplify code maintenance. React is also an application made by components, components we can easily rehuse in our application to reduce code. The good thing about components is that they can be reused in the whole application at any time. Before we jump in React JS, I would highly encourage you have some foundation with JavaScript like:

Some key features that I like about React:

1. SPA | Single Page Application | Main benefit is that is very fast and the website doesn't refresh when navigating on it.
2. Virtual DOM | It's a simplified and optimized version of the real DOM and it helps React to make the updates that it needs by passing props or states
3. JSX | JavaScript XML It is call like that because it's a syntax extension to Javascript and it allows us to write HTML in JavaScript.

One of the only things that I dislike about React is that is a library and because of that, you need to add many external libraries to make your application work.

• Callbacks | This is very important when it comes to fetch data.
• Objects & Arrays | React uses these two to for storing and manipulating data. It is essential to also know how to destructure and also some array methods like the popular "map"
• Functions & Classes | React components are based in returning functions and classes with JSX syntax.

JSX is a way to write html in our JavaScript. It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.

React components implement a render() method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by render() via this.props.

• componentWillMount: Immediately before initial rendering.
• shouldComponentUpdate: Before rendering, after receiving new props or state.
• componentWillReceiveProps: When component receives new props.
• componenDidMount: Immediately after initial rendering.

Handling events with React elements is very similar to handling events on DOM elements. There are some syntax differences:

For example, the HTML:

is slightly different in React:

Another difference is that you cannot return false to prevent default behavior in React. You must call preventDefault explicitly. For example, with plain HTML, to prevent the default form behavior of submitting, you can write:

• React events are named using camelCase, rather than lowercase.
• With JSX you pass a function as the event handler, rather than a string.

HTML form elements work a bit differently from other DOM elements in React, because form elements naturally keep some internal state. For example, this form in plain HTML accepts a single name:

This form has the default HTML form behavior of browsing to a new page when the user submits the form. If you want this behavior in React, it just works. But in most cases, it’s convenient to have a JavaScript function that handles the submission of the form and has access to the data that the user entered into the form. The standard way to achieve this is with a technique called “controlled components”.