Get a React web site up and running

Learn the basics here (or at the ReactJS docs those will work too!)

Intro To React

React is a tool for making web sites. You will hear that it is a View layer (via the MVC concept), that it is a JavaScript framework, that it is a web app creation tool built around lifecycle events. That's all true, and awesome. But we are going to focus on the up-close of making a site with React, and then slowly zoom out to reveal the startling complexity underneath.

import React from React;
import ReactDOM from ReactDOM;

class Ourcomponent extends React.Component {
   render() {
       return (
           <div id="main">
                <span>pacificio JS training</span>
           </div>
    )
  }
}

ReactDOM.render(<Ourcomponent />, document.getElementById('app'));

This is an example of a simple component. It is an ES6 class declaration that inherits from the React Component object and contains a render method that returns a block of markup: the component is the smallest unit of web-page in the React ecosystem: it can contain anything from a whole web page to a single br (break) tag, and a lot of things inbetween--including other React components. Each component's markup must contain closing tags and be enclosed by a single element (like the div in the example).

The code above saved as a JavaScript file would need to be transformed before it could be read by current web browsers. Using tools including Babel and Webpack we can combine the code here with the code in the React and ReactDOM modules to build a browser-ready web page.

Why is all this processing of code necessary? Why write code in a form that needs to be converted? For one, it allows the use of modules from NPM, which can provide pre-built functions, components and other types of code. Additionally, it allows the use of "next-generation" JavaScript APIs today which are largely solidified and on the way to the browsers but not in all of them yet. Other frameworks like Vue make it easier to use their JavaScript code directly in the browser (thus it would call itself a "progressive framework") like jQuery, but numerous other frameworks including Angular (2+) also require builds to run in browsers.

The above code is JavaScript (even if it contains HTML-like parts) and the ReactDOM.render call in its second parameter invokes an element with the ID `app` (getElementById). So when we create an HTML file for our site (something like index.html) we need an element like this in it:

<div id="app"></div>

When we want to develop a web site, we can use a scaffolding tool like create-react-app or GatsbyJS that can handle the process of processing ('transpiling') all this code for the web for us at the push of a button. They allow live reloading of development sites so changes can be seen right away without turning the server on and off, and when the site is ready they can build the components into web pages.

For quickly prototyping simple React components, we can also use auto-rendering web sites that can do the processing in real-time. These kind of sites include CodePen and CodeSandbox. Click here to see this example code running on CodePen.

Render methods and JSX

When we look at a React component, we will typically find a method called render() that will return a flavor of HTML called JSX. This means that JavaScript code can be used before and after the return statement.

Let's take a look at an updated version of our example code:

import React from React;
import ReactDOM from ReactDOM;

class Ourcomponent extends React.Component {
  getData() {
      return 'pacificio JS training'
  }

   render() {
       let newData = this.getData(); 
       return (
           <div id="main">
                <span>{ newData }</span>
           </div>
    )
  }
}

ReactDOM.render(<Ourcomponent />, document.getElementById('app'));

As you can see in the CodePen for this example, the output should be the same. The difference is only in our internal implementaion: we defined a method called getData() which simply returns a string.

JSX is the strict set of HTML that you can use to create front-end in React apps. Key differences include the ability to intersperse different types of JavaScript in the markup and the use of className keyword instead of class.

Elements and Components

In HTML an element is any of the traditonal markup tags like div, p, or span, any of the newer "semantic" HTML5 tags like section or article, or any of the newer "custom elements" which sometimes look like data-my-custom-element. These elements can receive properties, or props: for example, the href prop for an a or anchor tag defines where the link should be directed; the id prop for a div tag defines the id of the element.

The key way that components are different from elements is that they will utilize an internal structure that is optimized for development purposes but cannot be read as-is by current browsers. This is because the components in libraries like React require the React code which browsers do not have built-in. In addition, the JSX used in many React components needs to be converted into typical HTML and JavaScript. This is why React components need to be "transpiled" into JavaScript that can be read by browsers: the conversion of this code is part of what is handled by scaffolding tools like create-react-app.

Props and State

When a React component is used on a web page (the way it appears before transpiling) it can have props just like a basic element. The props passed to the component are available in the scope of the component as the props property: so for example, if the component looks like <Ourcomponent color="blue" /> then the value of this.props.color will be blue.

State is an object that can be set initially at the beginning of your component, for example: state = { uiColor: 'blue', direction: 'portrait', userID: null }. You can then update state items with the setState method from within class methods, for example with this: this.setState({ uiColor: 'green' })

State properties can be primitive values or objects or arrays.

import React from React;
import ReactDOM from ReactDOM;

class Ourcomponent extends React.Component {
  state = { description: 'pacificio JS training', uiColor: 'blue' }
  componentDidMount = (props) => {
    if (this.props.description) { this.setState({ description: this.props.description }) }
   }
   render() {
        return (
           <div id="main">
                <span>{ this.state.description }</span>
           </div>
    )
  }
}

ReactDOM.render(<Ourcomponent />, document.getElementById('app'));

So now this code example has been updated to use these tools. (You can see it on CodePen here.) Notice that we no longer use the getData() method; instead we are setting state initially and then checking for a prop named description--if it exists, it becomes the new value displayed on the screen--otherwise it defaults to what was set in the state assignment. The componentDidMount method is where the check for the prop happens, and it is a special feature of React: it runs as the page is loading when the DOM is mounted (similar to jQuery's $( document ).ready(function() { or JavaScript's window.onload = function() {). It is one of the key built-in Lifecycle Methods, which we will examine next.

Lifecycle Methods and Fetching Data

When we work with front-end JavaScript, we have to be aware of certain events like 'first meaningful paint' and the DOM loading. In addition we might want to set values based on props or create some other sort of initial state in a constructor. And we may also want to launch certain events as the page is about to disappear or if there is an error. We can do all of these things and more with React's lifecycle methods, which are writen just like any other ES6 class method except they have reserved names, e.g., componentDidMount, componentWillUnmount, and componentDidUpdate.

We have modified the example to use the constructor method. (Notice that this.state assigments can be done that way in the constructor or by defining the state property outside of a method like in the previous example and it has the same effect.)

import React from React;
import ReactDOM from ReactDOM;

class Ourcomponent extends React.Component {
  constructor(props) {
   super();
   this.state = { description: 'pacificio JS training', uiColor: 'blue' }
   }

  componentDidMount = (props) => {
    if (this.props.description) { this.setState({ description: this.props.description }) }
   }
   render() {
        return (
           <div id="main">
                <span>{ this.state.description }</span>
           </div>
    )
  }
}

ReactDOM.render(<Ourcomponent />, document.getElementById('app'));

This example is on CodePen here.

CSS and CSS-in-JS

As you know, web pages are made up of HTML, CSS, and JavaScript. We have seen how we use JSX in the render method as the equivalent of regular HTML. So how about styling? We need to have a way to add CSS to a React component.

Luckily, we have numerous options for adding CSS to our components.

Using a regular old link tag in the index.html at the root of the server; it would look something like <link rel="stylesheet" type="text/css" href="./css/bootstrap.css" /> and usually go in the header tag
Many React scaffolds like create-react-app allow bringing in CSS code to the component with a simple import statement, for example import Styles from "../styles/training.css";.
The babel-plugin-react-css-modules Babel plugin can be used to scope a style sheet to a component.
A popular style of React styling is known as "CSS-in-JS," and that includes solutions like styled-components, emotion or CXS.
Adding a style tag to the JSX with CSS in it is a fairly straightforward way to keep the styles inside the component. (This way, the styles will by default be scoped to the component although using tools like styled-jsx these CSS rules can be made global as well.)

This example (view on CodePen) uses the last technique on the list, wherein a style rule for the span element is set using the color which is stored in a state variable. The output of this component is consequently a little different: the text has a light blue background due to the style tag.

import React from React;
import ReactDOM from ReactDOM;

class Ourcomponent extends React.Component {
  constructor(props) {
   super();
   this.state = { description: 'pacificio JS training', uiColor: 'lightblue' }
   }

  componentDidMount = (props) => {
    if (this.props.description) { this.setState({ description: this.props.description }) }
   }
   render() {
        return (
           <div id="main">
                <span>{ this.state.description }</span>
             <style>{`  
                  span {background: `} {this.state.uiColor} {`} 
            `}</style>
           </div>
    )
  }
}

ReactDOM.render(<Ourcomponent />, document.getElementById('app'));

Just JavaScript

Even though the React code needs to be transpiled before it can be read by a browser, React is actually written like proper JavaScript, but it is just taking advantage of futuristic features for the way it is written (some of them, like the class keyword for defining objects, have actually been integrated into many browsers by now). But new features are always coming into the ECMA Script standard which defines the JavaScript language and using React means you will probably keep getting access to new ones by using transpiling.

So we can use JavaScript APIs in our React code pretty freely: that means that we can can use the refs API to manage DOM events, but we can also use direct DOM manipulation (e.g. Document.getElementById()).

React components, like other ES6 components, can use regular JavaScript functions (not just their own methods). And functionality can be called with event handlers which are much like the basic JavaScript ones but slightly React-flavored. For example a click handler to attach to an element is onclick while the React version is onClick.

Building web apps sometimes requires keeping track of a user's data as they go through the experience of using the site. Passing props down from one component to another is a common technique. React also has a numnber of popular libraries in its ecosystem that are designed to help a developer with state management including Redux and MobX. In recent versions of React an updated context API has been advanced as another way to keep track of data, and for some apps the web storage API may be useful.

Building and Deploying

Scaffold tools are where you can take a component or a set of related components (a component that is imported into another component is known as a child component) and test how they work with a development server, and eventually build the components into a deployable web site. We previously mentioned create-react-app and GatsbyJS because they are among the more popular of these tools, but there are a number of others including NWB that are also popular. In general, create-react-app is a great tool for building "single-page" web apps, while Gatsby is very popular for building multi-page "JAM-stack" sites. NWB has a number of interesting options including the ability to use alternative libraries.

These tools allow a site to be scaffolded at the command line. For example, typing npx create-react-app pacificioExample in your Terminal (assuming you have NPM installed) will create a new project in a directory called pacificioExample with a "Hellow World" type of React app.

With what you have learned here, you should be ready to try swapping out the create-react-app default code for the code in our example into the new app you have generated and start getting an idea about building out a site with React.

⚛

Onward

Learning React is of course about using what you know, building something, and then adding more knowledge and building something better next time. This tutorial is written for React version 16.6, which was released in 2018. At this time new developments are on the horizon, notably Hooks (which allow the use of state in components which are defined using functions rather than classes) and ConcurrentMode and Suspense.