Intro to React

a. Thinking in React

The most important aspect of writing code in React is that you think about how the data transforms into the UI. In React, components are basically functions which take some data and render it into the UI. To manage the data, React components have props and state, that’s why we’ll dive into the difference between passing the props and keeping values in state.

b. Explain JSX

JSX (JavaScript XML) is a syntax extension to JavaScript. It may resemble HTML, but the truth is we’re still coding in JS. The syntax is processed by a suitably configured Babel compiler. The final result is a bunch of React.createElement() calls which return simple objects that tell React what to render.

c. One-way data flow model

Explaining the concept of one-way data flow and how it works in React. We introduce Flux as the application architecture for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow.

d. Local state management

Defining a state within the component is the most straightforward way to manage a state in the app. We will prove that simple state API of React will not increase the complexity. However, we have to look into the Context API added in version 16.3.0, which provides a solution for passing state wherever it’s needed.

e. React component lifecycle

An important aspect of React component is to understand its lifecycle methods, which you can use to run code in a specific time in the process. In this part we’ll teach you how to call these methods in different use cases.

f. Event handlers

Event handlers are useful to listen to various events, like clicking on a button. Our goal is to explain how events are handled and present you with the best practices.

g. DevTools

Debugging the React components hierarchy, including state and props, can be easier thanks to the standalone version of React Developer Tools or the browser extension.

‍