ReactJS is a JavaScript library used in front-end web development. Since a JavaScript library is a collection of common tasks, ReactJS helps developers build user interfaces quickly without having to 'reinvent the wheel.'

ReactDOM

Previously, ReactDOM was a part of the ReactJS library. It is a library that provides DOM-specific methods, while ReactJS is only responsible for rendering data to the DOM.

ReactDOM helps declare the top-level of the application by using the ReactDOM.render method. It is a reference to the root component instance, and it helps control its contents.

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

Components

ReactJS allows the composition of complex user interfaces to be rendered by small pieces of code called components. A component contains both the HTML template and the code that controls it.

The main component is detailed in a class declaration. ReactJS uses an ES6 class instantiation, which contains a constuctor and a render method.

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <p>Hello World!</p>;
  }
}

Simple Components

ReactJS also consists of simple components. These components do not use the class keyword. Instead, simple components can be created using ES6 arrow functions.

const List = () => {
  <div className="list">
    <list.map((listItem, i) => (
      <ListItem />
    )
  </div>
}

Props

When referencing a ReactJS component, developers can define what properties should be used. Props are the arguments that can be passed to a component. They are similar to Javascript's native object type with key/value pairs.

To the previous list example, the prop of listItems is now being passed to the List component.

const List = ({listItems}) => {
  <div className="list">
    <list.map((listItem, i) => (
      <ListItem />
    )
  </div>
}

const ListItem = ({item}) => {
  <div className="listItem">
    {item.text}
  </div>
}

The propTypes declaration informs developers what the component expects as an argument.

List.propTypes = {
  listItems: PropTypes.array.isRequired;
}

ListItem.propTypes = {
  item: PropTypes.object.isRequired;
}

States

In ReactJS, data can only go from a parent component to a child component. If a parent component needs data from a child component, states can be used. An initial state is declared when setting up a component's constructor.

A state can be passed to a child component as a prop.

States are also used to determine when things should be updated.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {key: value}
  }

  render() {
    return <p>Hello World!</p>;
  }
}

JSX

Historically, HTML and JavaScript were in separate files. However, since components contain both HTML and JavaScript code, it has the .jsx file extention.

JSX stands for JavaScript and XML. JSX are preprocessed by compilers like Babel, that transform HTML tags into JavaScript code.

Higher-Order Components

Up until now, only behavior-based components have been mentioned.
However, there is another way to to build components. Higher-order components are logic-based components.

Higher-order components are common in other React libraries.

Higher-order components are pure functions. The functions are known as "HoC". The basic structure of a higher-order component is a function that takes a component as a parameter and returns a new component.

const HigherOrderComponent = higherOrderComponent(OtherComponent);

Conclusion

Even though ReactJS can seem a bit overwhelming at first, it is currently one of the most popular libraries. Once the patterns are learned, it is easy to use, and the components are reusable. Not to mention that JSX makes it much simpler and cleaner. This makes it fast when displaying a large number of components.