Skip to main content

Introduction to React

Learning Objectives#

  • Describe why React is so popular and in high demand
  • Describe the history of React
  • Describe what is React in terms of code organization
  • Explain what is JSX
  • Explain what is state
  • Build a simple React app

What is React#

Reference

We've already been building web sites based on data. We've been using server-side rendering with a template engine (ie EJS). While there are many upsides to server-side rendering, there are some down sides.

  • it can be cumbersome to maintain, when you want to change one thing, you have to change things across many files
  • your data is tightly coupled with your view of the data (embedding our data inside of HTML using EJS)
  • every view requires a page reload, which can get slow for the user and can be demanding on the server (imagine thousands or millions of users)

React is just the view layer. We can go over to the react docs - Which are some of the best docs out there.

Let's look at a few screenshots from their docs

declarative views

Component Based

Write once, use anywhere

History of React#

React was created at Facebook. It was used at first for just one specific project. Then it was expanded to more projects, then it began being used at Instagram and then it was made open-source.

This organic growth of React demonstrated that React was a solution that appealed to many developers. React's meteoric rise and continued demand continued appeal makes it worthwhile to learn.

What is React in terms of code?#

React is written in JavaScript. However, it has always relied on the bleeding edge of JavaScript and uses JSX (an HTML-JavaScript hybrid). Therefore, in order for browsers to understand it, it has to be compiled into older JavaScript.

Luckily there is a great technology called Babel, that will handle this for us. This lets us write modern React/JavaScript without having to worry whether an older browser is up to date with its JavaScript.

Let's start with a Hello World example.

Every (class) component needs a render function. React is the view layer for users to see and interact with. If these components don't render any elements to the DOM, then they don't serve much purpose. So we'll always have a render function.

The render function returns the html elements that will be loaded somewhere in the DOM.

HelloWorld.jsx
class HelloWorld extends React.Component {  render() {    return <div>Hello World!</div>;  }}

In this case, the component is a class.

It is made up of a div that says Hello World!.

This isn't the most mind-blowing component. But it is a simple example that we can create custom elements with exactly the functionality we need.

We can incorporate data into our app rather easily.

HelloWorld.jsx
const someData = "World!";
class HelloWorld extends React.Component {  render() {    return <div>Hello {someData}!</div>;  }}

One great feature of React is that you can write your functionality right in your component. This includes event handlers and listeners.

Let's add a click event that triggers an alert:

HelloWorld.jsx
const someData = "World!";
class HelloWorld extends React.Component {  clickIt() {    alert("you clicked it!");  }  render() {    return <div onClick={this.clickIt}>Hello {someData}!</div>;  }}