- View library for building UI
- Idea is to build composable and stateful UI components
- React auto updates only the changed-parts of the UI when state changes
- Uses Virtual DOM and synthetic events to manage UI updates
- Uses JSX to represent components
- HTML code in Javascript
-
render() method required for each component
- specifies UI items that a component should render
-
this.props
- is a simple JS object
- represents the set of inputs from parent component
- immutable
-
this.state
- represents the internal state of a component
- can be changed using setState({key: newValue})
- calling setState() automatically invokes render() on the component
- intelligent diff ensures that only the
-
this.refs
- holds references to DOM nodes
- useful to get references to form elements like input, checkbox etc
- possible to get away without using this, but available if needed
-
Code example
- SimpleComponent.js
- LikeButton.js
- Catch-of-the-day.js (http://catchoftheday.wesbos.com/store/uptight-handsome-cacti)
-
Thinking in React
- Start with making application state as one big tree
- Break down UI into components - each with its props and state
- Need to use many small libraries that each do one thing well, for building the app
-
Note on ES6
- Latest version of JavaScript language
- Spec formalized last year, most browsers have implemented 90% of spec
- Highlights: arrow function, array spread operator, destructuring etc
- Babel - transpiler, converts ES6 code to ES5 so it can be run on all browsers
- Webpack
- module bundler
- analyses dependency tree of components
- flattens out imports
-
Redux (http://redux.js.org/index.html)
- Predictable state container for JavaScript applications
- High level components:
- Actions
- Reducers (pure functions -> fn(input) = output)
- fn(action, currentState) => newState
- Store
- simple js object
- https://egghead.io/series/getting-started-with-redux
-
Immutable.js (https://github.com/facebook/immutable-js)
- JavaScript Collections library that support Immutable Collections
- Works well with the idea of React and Virtual DOM diff. Helps in efficient object comparison.
- Ensures data flow is predictable