/ react

Understanding React

I want to dive into react and learn by building a simple web application. To get started, I signed up on CodeAcademy. I went slowly through the basics in order to properly understand what react is all about. After finishing a couple of courses in react I can safely say I get it now. The virtual dom, components, states, props and all that jazz.

Here are the basics as far as I know:

Virtual DOM

The virtual DOM is designed to solve a simple problem. JavaScript is really fast, but DOM manipulations are slow. DOM manipulations have become a bit of a bottleneck in complex webapps. The Virtual DOM solves this issue. It's a sort of replica of the actual DOM, but modifying it doesn't directly cause a rerender of the actual webpage, so we can basically queue up a bunch of modifications, then take our modified virtual dom, compare it to the real DOM, get the differences between the two and update only what's needed. This technique can apparently be very efficient when used correctly.

Components

Each UI element can be stored in its own little component. For a traditional webapp, the navbar could be one component, the header another, one component could be in charge of rendering blog posts etc. Components can be nested within other components, so we could then have a main component to render our whole application.

Props

Props are values, or functions or any variable that is passed on to a child component.

States

States are values within a component, that can change between each render.

That should be all we need to know for now to dive right in!

Getting Started

I heard about this package which helps get started with react very quickly, without any fiddly configuration, just a couple of commands and you're all set.

It can be found here: https://github.com/facebookincubator/create-react-app. Their handy TLDR guide is simple:

npm install -g create-react-app

create-react-app my-app
cd my-app/
npm start

Replace my-app with the name for your million dollar idea, mine is trumpOS, a simulation of what I imagine Donald Trump's smartphone home screen looks like.

Next up: I guess I could show some code examples and describe how a simple react project can be structured, what components are made of.