What's React

The most popular way to build interactive web apps.

The TL;DR

React is a philosophy and framework for building web applications that use client side rendering.

  • Web apps are increasingly using client side rendering instead of server side (scary words!)

  • Web developers use React to build dynamic web applications like Twitter

  • React’s philosophy emphasizes components so you don’t rewrite code

  • The must-know basics of the React ecosystem: props, JSX, state, and React Native

Unless you live under a rock (which, given San Francisco rents, is becoming a legitimate housing option), you’ve probably heard about React. It’s at the center of a lot of hot topics right now, like “are frontend engineers really engineers” (hint: yes, yes they are) and my personal favorite, “what’s the most complicated way I could possibly build this one page website.” So what is React, and why should you care?

Client side rendering vs. server side rendering

🔮 Dependencies

To get the most out of this post, you’ll want to understand how a web app works and what dynamic content looks like.

Hopefully you’ve been reading some Technically in your free time, and you’re familiar with the client-server model. It’s how the whole web works: companies host their websites and apps on fancy, powerful servers, and you download files from those servers to look at in your browser. When these files are dynamic, their content changes based on who’s logged in, what’s going on, what screen you’re on, and stuff like that. This section is about how that actually happens.

When an app or website needs to send you dynamic content, there are (surprise!) two places they can create that content: on the server side, or on the client side. The server side means they populate and configure the page before they send it to you; the client side means they send you the basic HTML, and the dynamic logic happens in your browser.

client server rendering

In practice, the difference is in where the backend logic happens: all on the server, or mostly in the browser calling APIs on the server.

The benefit of doing things server side – in a lot of cases, it’s faster. That’s because files only need to make one trip – from the server to you – as opposed to Javascript in your browser hitting multiple APIs on the server over time to load one page.

The benefit of doing things client side – you don’t need to reload the same HTML and other boilerplate stuff every time you load a page; all that needs to change is the dynamic parts of whatever you’re loading.

Traditionally, server side rendering was the dominant form of building web applications. But as Javascript has gotten better and web apps have gotten more complicated, client side rendering is getting more popular, to the point where it’s now pretty much the default for most tech startups building their stuff from scratch. React is the poster child of that movement.

(Nowadays, things aren’t completely black and white: a new class of applications is combining server side and client side rendering into hybrid models that take advantage of the benefits of both.)

React’s philosophy: components

React is a framework for building these kinds of client side rendering apps. A few engineers at Facebook built it almost 10 years ago – [it was present in the 2011 News Feed](https://en.wikipedia.org/wiki/React_(web_f...