react

What is react?

The react npm package is a JavaScript library for building user interfaces, particularly for single-page applications. It allows developers to create reusable UI components and manage the state of their applications efficiently.

What are react's main functionalities?

Component-Based Architecture

React allows developers to encapsulate UI logic and design into components, which can then be composed to build complex user interfaces.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
ReactDOM.render(<Welcome name='Jane' />, document.getElementById('root'));

State Management

React provides a way to manage the state within components, enabling dynamic and interactive user interfaces.

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };
  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

Lifecycle Methods

React components come with lifecycle methods that are invoked at specific points in a component's lifecycle, allowing developers to hook into the component's creation, updating, and destruction processes.

class Timer extends React.Component {
  componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000);
  }
  componentWillUnmount() {
    clearInterval(this.timerID);
  }
  tick() {
    this.setState({
      date: new Date()
    });
  }
  render() {
    return (
      <div>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

Hooks

Hooks are functions that let developers 'hook into' React state and lifecycle features from function components. They provide a way to use stateful logic without writing a class.

import { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Other packages similar to react

vue

Vue.js is a progressive JavaScript framework used for building user interfaces. Unlike React, which is only the view layer, Vue includes a more comprehensive set of tools for building web applications, including a routing solution and state management solution.

angular

Angular is a platform and framework for building single-page client applications using HTML and TypeScript. Angular is more prescriptive than React, providing a standard way to structure an application and including a wide array of features out-of-the-box, such as dependency injection, templating, routing, and more.

preact

Preact is a fast, 3kB alternative to React with the same modern API. It provides the thinnest possible Virtual DOM abstraction on top of the DOM. Preact is a good choice for when performance is critical, and the application needs to be as lightweight as possible.

svelte

Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app, resulting in significantly smaller and faster applications.

README

react

An npm package to get you immediate access to React, without also requiring the JSX transformer. This is especially useful for cases where you want to browserify your module using React.

Note: by default, React will be in development mode. The development version includes extra warnings about common mistakes, whereas the production version includes extra performance optimizations and strips all error messages.

To use React in production mode, set the environment variable NODE_ENV to production. A minifier that performs dead-code elimination such as UglifyJS is recommended to completely remove the extra code present in development mode.

Example Usage

var React = require('react');

// Addons are in separate packages:
var createFragment = require('react-addons-create-fragment');
var immutabilityHelpers = require('react-addons-update');
var CSSTransitionGroup = require('react-addons-css-transition-group');

For a complete list of addons visit the addons documentation page.

Changelog

15.0.1 (April 8, 2016)

React

• Restore React.__spread API to unbreak code compiled with some tools making use of this undocumented API. It is now officially deprecated. (@zpao in #6444)

ReactDOM

• Fixed issue resulting in loss of cursor position in controlled inputs. (@sophiebits in #6449)