Stellar Code

Full-stack Web Development with JavaScript (MERN stack)

ReactJS for beginners

Front End

Listen to this blog post:

 


ReactJS is a declarative, efficient and flexible JavaScript library for building user interfaces. That’s what the owner, Facebook says. React has many sides to it. ReactDOM is for rendering web interfaces, ReactVR for virtual reality development, and React Native for native mobile apps (really native, not another HTML 5 hybrid app library). That’s all the applications I know of at least for now. This post focuses on React for the web part.

The first and most important thing to know about React is that is Component driven. This means that an app made with React is just a bunch of child components, possibly inside other components till the the last outer parent component. I mean this literally, everything is a component. There’s even a camera component in React native for accessing a phone’s camera and also, the React router for navigating its web interface is a component.

The power of React is in its Virtual DOM. It’s called virtual because React components are actually not written in static HTML but in JavaScript that will influence how the components will render on a webpage. If you’ve had experience with JavaScript, you’ll know that how JavaScript’s document.write is used to attach a webpage content without being HTML itself. When changes in data occur, React leverages its virtual DOM to re-render the components seamlessly.

Not getting ahead of myself, lets explore the basic concepts in React.

React concepts

  • Components
  • JSX
  • Props
  • State
Components

A component is simply a user interface element on a web page. It is independent, self contained and can handle its own data. As I mentioned before, a React app is a big component made of small interoperable components. There are two types- Parent components and child components. To illustrate this think of how a HTML <ul> element contains <li> elements. In React, components are defined as ES6 classes like:


Class ProductList extends React.Component {
render() {
  return ( 
    <div className="col1">
      ...
    </div>
      ) 
    } 
  }

Note that writing the first letters of a component in uppercase is best practice, components have a render method for compiling the virtual dom JavaScript, that the return must use one enclosing parent element (e.g, div) to contain other elements and className is simply a way to write the normal HTML class in JSX.

React provides some methods that are triggered at various points of time from a component’s creation up until when the component is destroyed. Some are: componentDidMount(), componentWillMount(), componentWillUnmount(), shouldComponentUpdate(), componentWillUpdate(). We can take advantage of them to control our app’s behavior.

  • componentWillMount() : This method runs before the component is first rendered, i.e before the render() method. DOM manipulation cannot be done here because the component isn’t available in the DOM yet.
  • componentDidMount() : This method is called right after the component has been rendered. So it is called immediately after the render method has been executed. It’s the best place to perform network and AJAX calls.
  • componentWillUnmount() : This method is run right before the component is no longer available in the DOM or is destroyed.
  • shouldComponentUpdate() : This method determines if a re-rendering should occur or not. Its always called before the render() method.
  • componentWillUpdate() : This method is called as soon as shouldComponentUpdate returns true. It is called just before the component is rendered with new data.
Sequence of a component’s lifecycle (Source: https://swizec.com)

 

JSX

This means JavaScript extension. It is what allows us to write JavaScript in a HTML-like syntax. Recall how we defined the ProductList component:


Class ProductList extends React.Component {
  render() {
    return (
      <div className="col1">
        <h1>Our Products</h1>
       </div>
        )
      }
     }

The JSX is contained inside the multi-line return statement. Now that our component exists, we can use it by stating <ProductList /> in a self enclosing tag.

 

Props

This is short for Properties. Props are a way to make our components data-driven. Props are passed down from parent components to child components. Child components must be made to receive its props. Props are defined as attributes on a component, similar to how we write an ‘src’ inside <img src=”…”>. Let’s define a child component with props:


Class ProductList extends React.Component {
  render() {
    return (
      <div className="col1">
        <h1>Our Products</h1>
        <Product tagline="iphone" />
       </div>
        )
      }
    }
            
Class Product extends React.Component {
  render() {
    return (
        <h3>{{ this.props.tagline }}</h3>
        )
      }
     }

 

State

Whereas props are immutable and owned by a component’s parent, state is owned by the component. Every React component is rendered as a function of its this.props and this.state. When the state or props of a component update, the component will re-render itself. State holds information about the component e.g the number of times a button was clicked, user input from a form, etc.


Class ProductList extends React.Component {
  constructor() {
      super();
      this.state = {
           products: []
     };
}
  render() {
    return (
      <div className="col1">
        <h1>Our Products</h1>
        <Product tagline="iphone" />
       </div>
        )
      }
    }

These are the basic concepts of a Reactjs.


Also published on Medium.


Emmanuel Yusufu

Web Developer. Learning enthusiast.