React tutorial
Official guide: https://reactjs.org/.
Component
A component is an independent, reusable piece of UI. A page can have multiple components and they can be nested.
class Greeting extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
JSX
It can make components much cleaner to understand. JSX can be translated to compiled JS code on babel.
const App = () => {
return (
<div>Hi!!
</div>
);
}
React example
Main app
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import SearchBar from './components/search_bar';
// a component
const App = function() {
return <div>Hi!!</div>;
}
// another way with ES6 syntax
const App = () => {
return (
<div>Hi!!
</div>
<div>
<SearchBar />
</div>
);
}
// render component App to the target node
ReactDOM.render(<App />, document.querySelector('.container'));
A sub component
// components/search_bar.js
import React from 'react';
const SearchBar = () => {
return <input />;
};
// export component
export default SearchBar;
Use class
import React from 'react';
class SearchBar extends React.Component {
// a function, called when rendering, return JSX
render() {
return <input />;
}
}
export default SearchBar;
ES6:
import React, { Component } from 'react';
const Component = React.Component;
class SearchBar extends Component {
// a function, called when rendering, return JSX
render() {
return <input />;
}
}
export default SearchBar;
HTML
HTML file:
<!-- index.html-->
...
<body>
<!-- target div, as the root node of the react application-->
<div container="container"></div>
</body>
...
Events
Create event handler for component, inside class.
import React, { Component } from 'react';
const Component = React.Component;
class SearchBar extends Component {
// a function, called when rendering, return JSX
render() {
// onChange(a property, predefined)={the event handler}
return <input onChange={this.onInputChange}/>;
// lambda func
return <input onChange={(event) => console.log(event.target.value)}/>;
}
// run the code whenever the input changes
// event is an event object
onInputChange(event) {
console.log(event.target.value);
}
}
export default SearchBar;
States
State is a kind of plain JS object that can record or react to use events. Each class-based Component defined has its state object. Whenever a component state changes, the component immediately re-renders and all its children.
import React, { Component } from 'react';
const Component = React.Component;
class SearchBar extends Component {
// constructor
constructor(props) {
super(props);
// create a new object and assign to state
this.state = { term: '' };
}
// a function, called when rendering, return JSX
render() {
return (
// predefined setState method
<div>
<input onChange={event => this.setState({ term: event.target.value })} />
Value of input: {this.state.term}
</div>
);
}
}
export default SearchBar;
Controlled field
The value of controlled field is set by the state rather than the other way around.
- User action triggers the events
- Event handler can update State
- The value of field is actually some state variables
import React, { Component } from 'react';
const Component = React.Component;
class SearchBar extends Component {
// constructor
constructor(props) {
super(props);
// create a new object and assign to state
this.state = { term: '' };
}
// a function, called when rendering, return JSX
render() {
return (
// value= makes input to be a controlled field,
// the value only change when state changes
// setState() will cause rerender
<div>
<input
value={this.state.term}
onChange={event => this.setState({ term: event.target.value })} />
</div>
);
}
}
export default SearchBar;
Props
We can pass variable from parent object to child object with props. props can be null while initializing. A check is needed.
We can pass a callback function from parent to its child or even deeper, for example, onVideoSelect. (App => VideoList => VideoListItem)
Parent
// for add latency
import _ from "lodash";
//...
constructor(props) {
super(props);
this.state = {
video: [],
selectedVideo: null
}
}
render() {
// ...
// add latency, can only be called once every 300 ms
const videoSearch = _.debounce(term => {
this.videoSearch(term);
}, 300);
// pass onVideoSelect to the props of VideoList
return (
<div>
<SearchBar onSearchTermChange={videoSearch} />
<VideoDetail video={this.state.selectedVideo}/>
<VideoList
videos={this.state.videos}
onVideoSelect={selectedVideo => this.setState({selectedVideo})}/>
</div>
);
}
videoSearch(term) {
//... setState(videos, selectedVideo)
}
Child
class VideoList extends Component {
constructor(props) {
super(props);
// the object will arrive as props
// use this.props for class-based component
const videoItems = this.props.videos.map((video) => {
// need to make those objects different with different keys
return (
<VideoListItem
key={video.etag} video={video}
onVideoSelect={this.props.onVideoSelect}/>
)
});
return (
<ul>
{videoItems}
</ul>
);
}
}
SearchBar:
class SearchBar extends Component {
constructor(props) {
super(props);
this.state = { term: "" };
}
render() {
return (
<div className="search-bar">
<input
value={this.state.term}
onChange={event => this.onInputChange(event.target.value)}
/>
</div>
);
}
onInputChange(term) {
this.setState({ term });
this.props.onSearchTermChange(term);
}
}
export default SearchBar;
Grandson
// ES6 flavor, can just use extract video from props
const VideoListItem = ({video, onVideoSelect}) => {
// do onVideoSelect() when onClick
return <li onClick={() => onVideoSelect(video)}>video.videoId<li>;
};
React Native
A guide can be found at https://facebook.github.io/react-native/.
Redux Readme
Redux is a predictable state container for JavaScript apps. The help doc is https://redux.js.org/.
Redux uses a single object to manage many application states.
Reference
This is my learning note while catching udemy React Redux Course. Credit to the instructor.
