concept React in category node

This is an excerpt from Manning's book Isomorphic Web Applications: Universal Development with React. Login to get full access to this book.

Figure 1.10. Comparing the DOM trees: the virtual DOM changes are compared to the browser DOM. Then React intelligently updates the browser DOM tree based on the calculated diff.

1.4. Building the view with React

React is one of the pieces that makes building an isomorphic web app possible. React is a library, open sourced by Facebook, for creating user interfaces (the view layer in your app). React makes it easy to express your views via HTML and JavaScript. It provides a simple API that’s easy to get up and running but that’s designed to be composable in order to facilitate building user interfaces quickly and efficiently. Like many other view libraries and implementations, React provides a template language (JSX) and hooks into commonly used parts of the DOM and JavaScript.

Redux can be hooked up to any view, but it works especially well with React. React’s top-down flow of props and state through nested components work well with Redux’s single-direction state update flow.

Listing 6.12. Connect React to Redux—src/components/app.jsx

class App extends React.Component { componentDidMount() {} getSystemNotifications(id) { let items = []; if (this.props.all) { #1 this.props.all.forEach((item, index)=>{ #2 if (item.serviceId == id) { let classes = classnames("ui", "message", item.messageType); items.push( <div className={classes} key={index}> <i className="close icon" onClick={ this.dismiss.bind(this, index) }> </i> <p> {item.message} </p> </div> ) } }) } return items; } render() {} } function mapStateToProps(state) { #3 let { all } = state.notifications; #4 let { refresh } = state.settings; #4 return { #5 all, refresh } } function mapDispatchToProps(dispatch) {} export default connect( mapStateToProps, mapDispatchToProps )(App) #6 #1 Component accesses notifications directly on props. #2 Using notifications array, you build an array of notification items. #3 The function tells connect to pull specific keys out of the store and put them directly on props. #4 Pull out relevant items (notifications and refresh); refresh is required by the child component. #5 Return just the keys the component needs instead of the whole store. #6 Pass mapStateToProps into the connect function; it will be called during render cycle.

copy

This is an excerpt from Manning's book Node.js in Action, Second Edition. Login to get full access to this book.

Since Node.js appeared in 2009, JavaScript has gone from a barely tolerated browser-centric language to one of the most important languages for all kinds of software development. This is partly due to the arrival of ECMAScript 2015, which solved several critical problems in previous versions of the language. Node uses Google’s V8 JavaScript engine that’s based on the sixth edition of the ECMAScript standard, which is sometimes called ES6 and abbreviated as ES2015. It’s also due to innovative technologies such as Node, React, and Electron, which allow Java-Script to be used everywhere: from the server to the browser, and in native mobile applications. Even big companies such as Microsoft are embracing JavaScript, and Microsoft has even contributed to the success of Node.

Listing 4.1. A gulpfile for ES2015 and React with Babel

Shows a modern rich web application using your preferred client-side technology (for example, React or Angular)

Listing 12.4. The App class

import React from 'react'; import ReactDOM from 'react-dom'; import Request from './request'; import Response from './response'; class App extends React.Component { render() { return ( <div className="container"> <Request /> <Response /> </div> ); } } ReactDOM.render(<App />, document.getElementById('app'));

copy

12.3.1. Bootstrapping React and Babel

The biggest challenge in building a new app with a sophisticated front end is setting up libraries such as React and Babel with a maintainable build system. You have many choices, including Grunt, Gulp, and webpack. And what makes things even more difficult is that these libraries change over time, so books and tutorials quickly become out-of-date.