React Flashcards
What is React
- The V in MVC
- Is ideal for large-scale SPA
- Uses a high-speed virtual DOM (and updates the actual DOM only when needed)
- Uses clean and easy-to-understand JSX syntax
Props (vs State)
- Props are passed to the child within the render method of the parent as the second argument to
React.createElement() - Props (short for properties) are a Component’s configuration, its options if you may. They are received from above and immutable as far as the Component receiving them is concerned.
- A Component cannot change its props, but it is responsible for putting together the props of its child Components.
- Props are used to pass parameters which should be static (on the contrary of state). For example you can pass a size or name from an upperView to a lowerView (nested views);
State (vs Props)
- The state starts with a default value when a Component mounts and then suffers from mutations in time (mostly generated from user events). It’s a serializable (we didn’t say props are also serializable because it’s pretty common to pass down callback functions through props) representation of one point in time, a snapshot.
- A Component manages its own state internally, but–besides setting an initial state–has no business fiddling with the state of its children. You could say the state is private.
Props vs State
- Props and state are related. The state of one component will often become the props of a child component
- Subcomponents cannot directly affect enclosing components, meaning data is flown downwards, updating data changes in HTML efficiently, and abstracts away the DOM allowing better performance using Virtual DOM.
React vs ReactDOM
“As we look at packages like react-native, react-art, react-canvas, and react-three, it’s become clear that the beauty and essence of React has nothing to do with browsers or the DOM. To make this more clear and to make it easier to build more environments that React can render to, we’re splitting the main react package into two: react and react-dom.”
React.createElement() and ReactDOM.render()
To render a new tree into the DOM, you create ReactElements and pass them to ReactDOM.render along with a regular DOM element.
var root = React.createElement('div');
ReactDOM.render(root, document.getElementById('example'));
React components
You can use React using only ReactElements but to really take advantage of React, you’ll want to use ReactComponents to create encapsulations with embedded state.
var MyComponent = React.createClass({
render: function() {
...
}
});
createClass vs ES6 class
You may also define your React classes as a plain JavaScript class. For example using ES6 class syntax
class HelloMessage extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
ReactDOM.render(, document.getElementById('someId'));
ndlr: Au lieu du code suivant (exemple perso)
var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
ReactDOM.render(, document.getElementById(‘someId’));
createClass vs ES6 class
React.createClass is the workhorse of React. You can use it to model your components. At minimum it should implement a render method although it can implement various lifecycle hooks.
Alternatively you can use a ES6 type class. It’s more or less equal to createClass except that you cannot use mixins here. I prefer ES6 syntax myself as it hides some of the complexity and makes the API a bit tighter thanks to the usage of ES6 class constructor.
cloneElement()
- When you clone the element, you can pass in props at that time
- Note: cloneWithProps is deprecated. Use React.cloneElement instead.
Refs
The “don’t use refs” sentiment is correct when talking about using them for component instances. Meaning, you shouldn’t use refs as a way to grab component instances and call methods on them. This is the incorrect way to use refs and is when refs go south quickly.
The correct (and very useful) way to use refs is when you’re using them to get some value from the DOM. For example, if you have an input field attaching a ref to that input then grabbing the value later through the ref is just fine. Without this way, you need to go through a fairly orchestrated process for keeping your input field up to date with either your local state or your flux store - which seems unnecessary.
What is the difference between using constructor vs getInitialState
The two approaches are not interchangeable. You should initialize state in the constructor when using ES6 classes, and define the getInitialState method when using React.createClass.
```javascript
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { /* initial state */ };
}
}
~~~
is equivalent to
```javascript
var MyComponent = React.createClass({
getInitialState() {
return { /* initial state */ };
},
});
~~~
Refs
Refs are used to access the real DOM and not the virtual DOM of react. It’s needed when you need to access the real DOM.
```javascript
this.refs.myInput
ReactDOM.findDOMNode(this.refs.myInput).focus()
ReactDOM.findDOMNode(this.refs.myInput).value
~~~
Reusable Components
When designing interfaces, break down the common design elements (buttons, form fields, layout components, etc.) into reusable components with well-defined interfaces. That way, the next time you need to build some UI, you can write much less code. This means faster development time, fewer bugs, and fewer bytes down the wire.
Props validation
As your app grows it’s helpful to ensure that your components are used correctly. We do this by allowing you to specify propTypes. React.PropTypes exports a range of validators that can be used to make sure the data you receive is valid. When an invalid value is provided for a prop, a warning will be shown in the JavaScript console.
```javascript
React.createClass({
propTypes: {
optionalArray: React.PropTypes.array,
optionalBool: React.PropTypes.bool,
optionalFunc: React.PropTypes.func,
optionalNumber: React.PropTypes.number,
optionalObject: React.PropTypes.object,
optionalString: React.PropTypes.string,
optionalSymbol: React.PropTypes.symbol,
}
})
~~~
