Socket
Socket
Sign inDemoInstall

react

Package Overview
Dependencies
18
Maintainers
7
Versions
1825
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    react

React is a JavaScript library for building user interfaces.


Version published
Weekly downloads
24M
increased by0.72%
Maintainers
7
Install size
2.64 MB
Created
Weekly downloads
 

Package description

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

Changelog

Source

16.0.0 (September 26, 2017)

New JS Environment Requirements

  • React 16 depends on the collection types Map and Set, as well as requestAnimationFrame. If you support older browsers and devices which may not yet provide these natively (e.g. <IE11), you may want to include a polyfill.

New Features

  • Components can now return arrays and strings from render. (Docs coming soon!)
  • Improved error handling with introduction of "error boundaries". Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.
  • First-class support for declaratively rendering a subtree into another DOM node with ReactDOM.createPortal(). (Docs coming soon!)
  • Streaming mode for server side rendering is enabled with ReactDOMServer.renderToNodeStream() and ReactDOMServer.renderToStaticNodeStream(). (@aickin in #10425, #10044, #10039, #10024, #9264, and others.)
  • React DOM now allows passing non-standard attributes. (@nhunzaker in #10385, 10564, #10495 and others)

Breaking Changes

  • There are several changes to the behavior of scheduling and lifecycle methods:
    • ReactDOM.render() and ReactDOM.unstable_renderIntoContainer() now return null if called from inside a lifecycle method.
    • Minor changes to setState behavior:
      • Calling setState with null no longer triggers an update. This allows you to decide in an updater function if you want to re-render.
      • Calling setState directly in render always causes an update. This was not previously the case. Regardless, you should not be calling setState from render.
      • setState callback (second argument) now fires immediately after componentDidMount / componentDidUpdate instead of after all components have rendered.
    • When replacing <A /> with <B />, B.componentWillMount now always happens before A.componentWillUnmount. Previously, A.componentWillUnmount could fire first in some cases.
    • Previously, changing the ref to a component would always detach the ref before that component's render is called. Now, we change the ref later, when applying the changes to the DOM.
    • It is not safe to re-render into a container that was modified by something other than React. This worked previously in some cases but was never supported. We now emit a warning in this case. Instead you should clean up your component trees using ReactDOM.unmountComponentAtNode. See this example.
    • componentDidUpdate lifecycle no longer receives prevContext param. (@bvaughn in #8631)
    • Non-unique keys may now cause children to be duplicated and/or omitted. Using non-unique keys is not (and has never been) supported, but previously it was a hard error.
    • Shallow renderer no longer calls componentDidUpdate() because DOM refs are not available. This also makes it consistent with componentDidMount() (which does not get called in previous versions either).
    • Shallow renderer does not implement unstable_batchedUpdates() anymore.
    • ReactDOM.unstable_batchedUpdates now only takes one extra argument after the callback.
  • The names and paths to the single-file browser builds have changed to emphasize the difference between development and production builds. For example:
    • react/dist/react.jsreact/umd/react.development.js
    • react/dist/react.min.jsreact/umd/react.production.min.js
    • react-dom/dist/react-dom.jsreact-dom/umd/react-dom.development.js
    • react-dom/dist/react-dom.min.jsreact-dom/umd/react-dom.production.min.js
  • The server renderer has been completely rewritten, with some improvements:
    • Server rendering does not use markup validation anymore, and instead tries its best to attach to existing DOM, warning about inconsistencies. It also doesn't use comments for empty components and data-reactid attributes on each node anymore.
    • Hydrating a server rendered container now has an explicit API. Use ReactDOM.hydrate instead of ReactDOM.render if you're reviving server rendered HTML. Keep using ReactDOM.render if you're just doing client-side rendering.
  • When "unknown" props are passed to DOM components, for valid values, React will now render them in the DOM. See this post for more details. (@nhunzaker in #10385, 10564, #10495 and others)
  • Errors in the render and lifecycle methods now unmount the component tree by default. To prevent this, add error boundaries to the appropriate places in the UI.

Removed Deprecations

  • There is no react-with-addons.js build anymore. All compatible addons are published separately on npm, and have single-file browser versions if you need them.
  • The deprecations introduced in 15.x have been removed from the core package. React.createClass is now available as create-react-class, React.PropTypes as prop-types, React.DOM as react-dom-factories, react-addons-test-utils as react-dom/test-utils, and shallow renderer as react-test-renderer/shallow. See 15.5.0 and 15.6.0 blog posts for instructions on migrating code and automated codemods.

Readme

Source

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');

Keywords

FAQs

Last updated on 26 Sep 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc