- It’s a library, not a complete framework. So it’s lightweight and best library to hook into existing project (PHP/Python/Ruby) which need reactive DOM due to its virtual lightweight DOM feature. Example usage: updating a huge page by simple javascript can crash the browser. Here comes the React JS.
- Dom elements bound with internal react state objects
- This automatically detects the changes in the object state values and updates the value of element bound to it.
- Each element in a component must have unique key=”” and that corresponds to the state object
- Main file in index.js which loads the main component
- Each component then loads the corresponding sub component. Component loading is done by including the jsx file
- Jsx file notation is like html notation. Each jsx file has render() method and state() property.
- When loading a component, it calls the render() method internally
- Variables are put within { } notation.
- It’s not a template engine. So all logic should be written in pure JS notation.
- Components are reusable.
- Normally main component starts at index.js. This includes the main App which then can include the child components. Each child component then include sub child components are so on. So any section of a page of project that we want to make reactive or to use react, its rending starts from index.js.
- Multiple subcomponent of a component if needed to include, we can use
<React.Fragment> </React.Fragment>
- To include a component, need to import the jsx file and the classname of it like:
import ComponentName from “PATH_TO_COMPONENTJSX_FILE/JSX_FILE_NAME”;
- Parent component can pass the state variables to child components via props. If need to pass the state variables to the same level component, need to lift the state property up. A parent can pass the state to all the children.
The props can be accessed by child via,
this.props.passedEventName
So altogether, references are passed through component include block downwards.
- Instead of using class, a simple stateless functional component can also be used so that a simple component doesn’t neccessarily need to have class.
const NavBar = () => {
return (
<nav className=”navbar”>.....</nav>
);
};
This should be exported.
export default NavBar;
- Lifecycle hooks of each component can be used to hook certain events. There are three life cycle phases: mount, update and unmount. Each has its own hook. Following are the most commonly used lifecycle hooks:
- Constructor of the parent class is called using
super()
class App extends Component {
constructor(){
super();
}
}
- ComponentDidMount is the best place to get data from server by making ajax request. Can simply call it inside the component class as a function like
ComponentDidMount(){
//script to run after mounting the component
}
- Render method is the method where we play along with our html doms to manipulate. When a component is rendered, all its components are rendered recursively.
- Lifecycle hooks can not be used in stateless functional components
- ComponentDidUpdate() of Update phase is the best place to detect any requirement like if we need to load more data by calling ajax to server.
- componentWillUnmount() can be used to remove any event listener or other cleanups for that particular dom before deleting it from dom tree.