ELI28 (…and a decent JavaScript developer) ReactJs

Joshua Lee
Aug 28, 2017 · 3 min read

What is React?

What is React? A JavaScript library for building user interfaces.

This is achieved by building components. The ‘component’ is the main building block of a React project.

A component takes in parameters, called props, and returns a hierarchy of views to display via the render method.

Why use React for SPAs:

  • React is fast. Apps made in React can handle complex updates and still feel quick and responsive.
  • React is modular. Instead of writing large, dense files of code, you can write many smaller, reusable files. React’s modularity can be a beautiful solution to JavaScript’s maintainability problems.
  • React is scalable. Large programs that display a lot of changing data are where React performs best.
  • React is flexible. You can use React for interesting projects that have nothing to do with making a web app. People are still figuring out React’s potential. There’s room to explore.
  • React is popular. While this reason has admittedly little to do with React’s quality, the truth is that understanding React will make you more employable.

Here is an example of a simple React component:

const BookListAppTitle = ({ title }) => {
return (
<h1>{title}</h1>
);
}

JSX!

What kind of weird hybrid code is that? Is it JavaScript? HTML? Or something else? It is JSX!

JSX is a syntax extension for JavaScript. It was written to be used with React. JSX code looks a lot like HTML.

What does “syntax extension” mean? In this case, it means that JSX is not valid JavaScript. Web browsers can’t read it! If a JavaScript file contains JSX code, then that file will have to be compiled. That means that before the file reaches a web browser, a JSX compiler will translate any JSX into regular JavaScript.

Props and State

What are Props and State? Props are “a way of passing data from parent to child.” Props are just a communication channel between components, always moving from top (parent) to bottom (child). State is best described as how a component’s data looks at a given point in time. Using state, we can change how this data looks based on user input or interaction.

Through lifecycle methods, we can then control what happens when each tiny section of your UI renders, updates, thinks about re-rendering, and then disappears entirely.

Lifecycle!

Each component has several “lifecycle methods” that you can override to run code at particular times in the process. Methods prefixed with will are called right before something happens, and methods prefixed with did are called right after something happens.

Mounting

These methods are called when an instance of a component is being created and inserted into the DOM:

Updating

An update can be caused by changes to props or state. These methods are called when a component is being re-rendered:

Unmounting

This method is called when a component is being removed from the DOM:

)
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade