react
Advanced tools
Package description
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.
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>
);
}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 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 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 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.
Changelog
0.9.0 (February 20, 2014)
componentDidMount and componentDidUpdate no longer receive the root node as a parameter; use this.getDOMNode() insteadundefined, the default value returned by getDefaultProps will now be used insteadReact.unmountAndReleaseReactRootNode was previously deprecated and has now been removedReact.renderComponentToString is now synchronous and returns the generated HTML string<html> tag using React) is now supported only when starting with server-rendered markupdeltaY is no longer negatedinput, select, and textarea elements, .getValue() is no longer supported; use .getDOMNode().value insteadthis.context on components is now reserved for internal use by Reactdefs, linearGradient, polygon, radialGradient, stopcrossOrigin for CORS requestsdownload and hrefLang for <a> tagsmediaGroup and muted for <audio> and <video> tagsnoValidate and formNoValidate for formsproperty for Open Graph <meta> tagssandbox, seamless, and srcDoc for <iframe> tagsscope for screen readersspan for <colgroup> tagspropTypes in mixinsany, arrayOf, component, oneOfType, renderable, shape to React.PropTypesstatics on component spec for static component methods.currentTarget is now properly set.key is now polyfilled in all browsers for special (non-printable) keys.clipboardData is now polyfilled in IE.dragTransfer is now presentonMouseOver and onMouseOut in addition to the existing onMouseEnter and onMouseLeave eventsonLoad and onError on <img> elementsonReset on <form> elementsautoFocus attribute is now polyfilled consistently on input, select, and textarea__owner__ property to each component's props object; passed-in props are now never mutatedReact.renderComponent within componentDidMount), events now properly bubble to the parent component.target, .relatedTarget, and .type are now set properly.data is now properly normalized in IE9 and IE10px appended for the unitless properties columnCount, flex, flexGrow, flexShrink, lineClamp, order, widowscomponentWillUnmount handlerrenderComponentToString would store event handlersdisabled are rendered without a value (previously disabled="true", now simply disabled)key values containing . are now supporteddata-reactid values for performancekey property changesdocument only when necessary, improving performance in some cases.returnValue in modern browsers, eliminating a warning in ChromescrollLeft and scrollTop are no longer accessed on document.body, eliminating a warning in ChromeReact.addons.TestUtils was added to help write unit testsReact.addons.TransitionGroup was renamed to React.addons.CSSTransitionGroupReact.addons.TransitionGroup was added as a more general animation wrapperReact.addons.cloneWithProps was added for cloning components and modifying their propstransitionLeave in CSSTransitionGroup<input> elements, checkedLink is now supported for two-way bindingreact-tools npm package no longer includes the React core libraries; use the react package instead.displayName is now added in more cases, improving error messages and names in the React Dev ToolsJSXTransformer now uses source maps automatically in modern browsersJSXTransformer error messages now include the filename and problematic line contents when a file fails to parseReadme
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.
var React = require('react');
// You can also access ReactWithAddons.
var React = require('react/addons');
FAQs
React is a JavaScript library for building user interfaces.
The npm package react receives a total of 19,791,165 weekly downloads. As such, react popularity was classified as popular.
We found that react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
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.
Security News
Research
The Socket Research Team has identified a malicious Python package that is typosquatting the popular crytic-compile utility, frequently used in popular toolkits and development environments for smart contracts and crypto applications.
Security News
NIST updates on the NVD backlog after media reports that over 50% of KEVs were unenriched since mid-February. They've contracted additional support and partnered with CISA to clear the backlog by fiscal year-end.
Security News
A hospital in Mobile, Alabama, agreed to a settlement in a landmark ransomware death lawsuit, but is now reportedly reconsidering the agreement and refusing to pay.