Prev Source
Next Source

The Road to Learn React

Single-page applications (SPA) have become increasingly popular with first-generation SPA frameworks like Angular (by Google), Ember, Knockout, and Backbone.

React, yet another solution for SPAs, was released by Facebook later in 2013.

In the past, websites and web applications were rendered from the server. A user visits a URL in a browser and requests one HTML file and all its associated HTML, CSS, and JavaScript files from a web server. After some network delay, the user sees the rendered HTML in the browser (client) and starts to interact with it. Every additional page transition (meaning: visiting another URL) would initiate this chain of events again. In this version from the past, essentially everything crucial is done by the server, whereas the client plays a minimal role by just rendering page by page.

In contrast, modern JavaScript shifted the focus from the server to the client. The most extreme version of it: A user visits a URL and requests one small HTML file and one larger JavaScript file. After some network delay, the user sees the by JavaScript rendered HTML in the browser and starts to interact with it. Every additional page transition wouldn’t request more files from the web server, but would use the initially requested JavaScript to render the new page. Also, every additional interaction by the user is handled on the client too.

In this modern version, the server delivers mainly JavaScript across the wire with one minimal HTML file. The HTML file then executes all the linked JavaScript from the files on the client-side to render the entire application with HTML and uses JavaScript for its interactions.

Essentially a SPA is one bulk of JavaScript, which is neatly organized in folders and files, to create a whole application whereas the SPA framework (e.g. React) gives you all the tools to architect it.

With the rise of React, the concept of components became popular.

In the Road to React, we’ll use Vite to set up our React application. Vite, a french word which translates to “quick”, is a modern build tool for status quo web frameworks (e.g. React)

The essential core of Vite is a development server, which allows you to start your React application on your local machine (read: development environment), and a bundler, which outputs highly optimized files for a production-ready deployment (read: production environment).

package.json: This file shows you a list of all third-party dependencies (read: node packages which are located in the node_modules/ folder) and other essential project configurations related to Node/npm.

package-lock.json: This file indicates npm how to break down (read: resolve) all node package versions and their internal third-party dependencies.

node_modules/: This folder contains all node packages that have been installed. Since we used Vite to create our React application, there are various node modules (e.g. React) already installed for us.

public/: This folder holds static assets for the project like a favicon which is used for the browser tab’s thumbnail when starting the development server or building the project for production.

index.html: The HTML that is displayed in the browser when starting the project. If you open it, you shouldn’t see much content though. However, you should see a script tag which links to your source folder where all the React code is located to output HTML/CSS in the browser.

Every React application is built on the foundation of React components.

The function of a component runs every time a component is displayed in the browser. This happens for the initial rendering (read: displaying) of the component, but also whenever the component updates because it has to display something different due to changes (re-rendering).

A component has to start with a capital letter, otherwise it isn’t treated as component in React.

Function components are the modern way of using components in React, however, be aware that there are other variations of React components

Everything returned from a React component will be displayed in the browser.

In fact, this output is called JSX (JavaScript XML), which powerfully combines HTML and JavaScript.

Changing the variable in the source code and seeing the change reflected in the browser is not solely connected to React, but also to the underlying development server when we start our application on the command line.

The bridge between React and the development server which makes this behavior possible is called React Fast Refresh (prior to that it was React Hot Loader) on React’s side and Hot Module Replacement on the development server’s side.

JSX replaces a handful of internal HTML attributes caused by internal implementation details of React itself.

When using HTML in JSX, React internally translates all HTML attributes to JavaScript where certain words such as class or for are reserved during the rendering process. Therefore React came up with replacements such as className and htmlFor for them. However, once the actual HTML is rendered for the browser, the attributes get translated back to their native variant.

JSX is a syntax extension to JavaScript.

const numbers = [1, 2, 3, 4];

Actually, rendering a list of items in React was one of my personal JSX “Aha” moments. Without any made up templating syntax, it’s possible to use JavaScript to map from a list of items to a list of HTML elements.

components encapsulate meaningful tasks while contributing to the greater good of a larger React project.

In a component tree, there is always a root component (e.g. App), and the components that don’t render any other components are called leaf components

You have learned how to declare a component (e.g. function List() { … }) and how to instantiate (e.g. ) it.

Once we’ve defined a component, we can use it as an element anywhere in our JSX.

As a rule of thumb, use either function declarations or arrow function expressions for your component declarations throughout your application.

In native HTML, we can add event handlers on elements by using the addEventListener() method programmatically on a DOM node.

React’s synthetic event is essentially a wrapper around the browser’s native event.

Since React started as library for single-page applications, there was the need for enhanced functionalities on the event to prevent the native browser behavior.

For example, in native HTML submitting a form triggers a page refresh. However, in React this page refresh should be prevented, because the developer should take care about what happens next.

this is how we pass HTML elements in JSX handler functions to add listeners for user interactions. Always pass functions to these handlers, not the return value of the function, except when the return value is a function again. Knowing this is crucial because it’s a well-known source for bugs in a React beginner’s application:

// if handleChange is a function // which does not return a function // don’t do this // do this instead

React’s useState method takes an initial state as an argument — in our case it is an empty string. Furthermore, calling this method will return an array with two entries: The first entry (searchTerm) represents the current state. The second entry (setSearchTerm) is a function to update this state.

the useState function is called a React hook.

When the UI is rendered for the first time, every rendered component’s useState hook gets initialized with an initial state which gets returned as current state. Whenever the UI is re-rendered because of a state change, the useState hook uses the most recent state from its internal closure.

In other words, when an (event) handler is passed as props from a parent component to its child component, it becomes a callback handler.

React props are always passed down the component tree and therefore functions that are passed down as callback handlers in props can be used to communicate up the component tree.

knowing where to instantiate state in React turns out to be an important skill in every React developer’s career.

The state should always be there where all components which depend on the state can read (via props) and update (via callback handler) it. These are all descendant components of the component which instantiates the state.

While it is not allowed to mutate React props as a developer, because they are only there to pass information from parent to child components, React state introduces a mutable data structure (read: stateful values).

---

---

---