New to React? Here is what you should know!

React is simply a javascript library for building user interfaces. React doesn’t operate directly in the browser’s DOM (Document Object Model) but on the virtual DOM(which exists entirely in memory).

The syntax used by React JS is the ES6 (ECMAscript) syntax. React uses JSX for templating instead of regular JavaScript. JSX is a React extension that allows us to write javascript that looks like HTML. Unlike in HTML, “classes” are identified as “className” in React.

Below is an example of a react code:

import './App.css';

function App() {
  return (
    <div className="App">
      Welcome Cynthia
    </div>
  );
}

export default App;

React Packages

The react library comes with its own set of packages i.e React and React DOM.

React itself is the logic needed to create useful react components while the ReactDOM is needed for rendering components to real DOM, it also provides DOM-specific methods that can be used at the top level of your app and as an escape hatch to get outside of the React model if you need to.

As a result of the JSX syntax used by React, there is a need to convert this code syntax into a backwards-compatible version of JavaScript in current and older browsers or environments. Hence the need for the library Babel-core (Babel).

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code. It has support for the latest version of JavaScript through syntax transformers.

React Components

A React Component is a Javascript class or function that allows you to split the user interface into independent, reusable pieces. Every React Component has to return HTML codes to the DOM.

React components can either be Classes or Functions.

Class Components

A class component or stateful component is an ES6 class. Class components that are more complex than functional components must always have a render method that returns a React Element(JSX). Class components can accept props (in the constructor) if needed and can maintain their own data with the state.

Below is an example of a class component:

import React, { Component } from 'react'

export class Home extends Component {
  render() {
    return (
      <div>This is the home page</div>
    )
  }
}

export default Home

Functional Components

A functional component or stateless component is a Javascript function or ES6 function that returns a React element and usually passes props as an argument. In this type of component, lifecycle events are used by the useEffect hook.

Below is an example of a functional component:

import React from 'react'

const Home = () => {
  return (
    <div>This is the home page</div>
  )
}

export default Home

Making Calls In React

In React, a component can be called into another component. When a component is nested inside another component, it is called a CHILD component while the component that uses a child component is called a PARENT component.

In the example below, I would be creating a child component called the header component

import React from 'react'

const Header = () => {
  return (
    <div>I am the child component</div>
  )
}

export default Header

This header component is then passed into the parent component which is the Home Page

import React from 'react'
import Header from '../components/Header'

const Home = () => {
  return (
    <div>
        <div>This is the home page</div>
        <Header/>
    </div>
  )
}

export default Home

Conclusion:

React can be used as a base in the development of single-page or mobile applications and also makes it easy to create interactive UIs. It is maintained by Meta (formerly Facebook) and a community of individual developers and companies which means that it is here to stay for a long time.