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.
Readme
React is a javascript module to make it easier to work with asynchronous code, by reducing boilerplate code and improving error and exception handling while allowing variable and task dependencies when defining flow. This project is applying the concepts of Reactive programming or Dataflow to controlling application flow.
This async flow control module is initially designed to work with Node.js but is planned to be extended to browser and other environments.
React gets its name from similarities with how "chain reactions" work in the physical world. You start the reaction and then it cascades and continues until complete.
Also "Reactive Programming" or "Dataflow" describe defining flow which reacts to the data similar to how a spreadsheet updates cells. These are good examples of how React controls flow based on when data is available
It takes inspiration from several projects including:
Ryan Atkinson did a nice job of demonstrating some of the power of react as compared to async and native callback code. http://www.youtube.com/embed/5EDucc56UnA?rel=0
You can read more and see his example site here https://github.com/ryanatkn/react-writeup
react.resolvePromises();)The tasks can be mixed, meaning you can use async, sync, object method calls, class method calls, etc in the same flow.
Borrowing heavily from Tim and Elijah's ideas for conductor, this async flow control module provides a way to construct a flow from a collection of rules based on functions or methods (referred to as tasks in this module). It allows dependencies to be defined between the tasks so they can run in parallel as their dependencies are satisfied. React can us both variable dependencies and task dependencies.
As tasks complete, React watches the dependencies and kicks off additional tasks that have all their dependencies met and are ready to execute. This allows the flow to run at maximum speed without needing to arbitrarily block tasks into groups of parallel and serial flow.
To reduce the boilerplate code needed and improve error handling, React automatically provides callback functions for your asynchronous code. These React-provided callback functions perform these steps:
npm install react
OR
Pull from github - http://github.com/jeffbski/react
Simple example showing flow definition of two async functions feeding a synchronous function.
First two async functions inputs are satisfied by the flow inputs, so they will both run immediately in parallel.
The last function waits for the outputs of the previous ones, then executes synchronously.
Finally the flow calls the callback with the output values once all the tasks have completed.
// in your foobar module
var react = require('react');
// some normal async and sync functions
function loadFoo(fooPath, cb) {
setTimeout(function () {
cb(null, [fooPath, 'data'].join(':'));
}, 10);
}
function loadBar(barPath, barP2, cb) {
setTimeout(function () {
cb(null, [barPath, barP2, 'data'].join(':'));
}, 10);
}
function render(foo, bar) {
return ['<html>', foo, '/', bar, '</html>'].join('');
}
// define fn, glue together with react, it will parallelize
// starts with name and in/out params, then the tasks
var loadRender = react('loadRender', 'fooPath, barPath, barP2, cb -> err, renderedOut',
loadFoo, 'fooPath, cb -> err, foo', // async cb function
loadBar, 'barPath, barP2, cb -> err, bar', // async cb function
render, 'foo, bar -> renderedOut' // sync function using outputs from first two
);
exports.loadRender = loadRender; // is a normal fn created by react
// in a different module far far away, use this as any other node function
var foobar = require('foobar');
foobar.loadRender('foo.txt', 'bar.txt', 'BBB', function (err, renderedOut) {
// tasks in loadRender were parallelized based on their input dependencies
console.error('results:', renderedOut);
});
Below is a graph of how the dependencies are mapped by React which also indicates how the tasks will be executed. This was generated by the react plugin react-graphviz which you can use to also graph your flows.
The main function returned from require('react') can be used to define the AST used for the processing of the rules or flow.
It takes the following arguments to define a flow function:
var fn = react('loadRender', 'fooPath, barPath, barP2, cb -> err, renderedOut',
loadFoo, 'fooPath, cb -> err, foo',
loadBar, 'barPath, barP2, cb -> err, bar',
render, 'foo, bar -> renderedOut'
);
->. Use the parameter name cb or callback to specify the Node style callback and err to represent the error parameter as the first output parameter of the callback. Literal values can also be specified directly (true, false, numbers, this, null). Literal strings can simply be quoted using single or double quotes.locals property can contain an object map of any local variables you want to reference in the flow (other than what is passed in as parameters). For example: { locals: { foo: foo, bar: bar }} would make local vars available in the flow. Note that global variables are already available in the flow.'obj.method'. These can be asynchronous Node-style callback cb(err, ...) functions or synchronous functions which simply return values directly.cb or callback along with err to specify asynchronous Node style cb(err, ...) task, or omit both to specify a synchronous task.A synchronous task can only have a single return parameter._index (zero based index of the task) added to create unique name. If you specify a name, you will also want to indicate a unique name for within the flow otherwise it will get a suffix as well. Example: { name: 'myTaskName' }{ after: 'foo' } or { after: ['foo', 'bar'] }after option. If you want to guarantee that something only runs after something else completes, then it will need to use an output from that task or specify the dependency with an after.The flow function created by react from the input definition is a normal Node-style function which can be used like any other. These flow functions can be defined in a module and exported, they can be passed into other functions, used as methods on objects (the this context is passed in and available).
React has a built-in plugin which can be loaded that will enable logging of tasks and flow as it executes very useful for debugging. For full details see Advanced React - LogEvents along with the other plugins and an explanation of the AST React uses.
var react = require('react');
react.logEvents(); // turn on flow and task logging for all react functions
React has many additional plugins and features which enable logging, monitoring, promise resolution, etc.
See the Advanced React for details on the AST React uses for processing and other plugins that are available.
mocha
178 tests complete
Source code repository: http://github.com/jeffbski/react
Ideas and pull requests are encouraged - http://github.com/jeffbski/react/issues
You may contact me at @jeffbski or through github at http://github.com/jeffbski
FAQs
React is a JavaScript library for building user interfaces.
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
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).