One Pager Cheat Sheet

• React is a component-based JavaScript library developed by Facebook in 2011 used to create complex and interactive web and mobile UIs.
• The Real DOM updates slower but can directly update HTML, whereas the Virtual DOM updates faster but cannot update HTML directly, so it updates the JSX instead with no memory wastage.
• React increases perceived performance, making it easy to integrate with other libraries, JSX increases readability, and UI test cases are easier to write.
• React has a large API library and requires the use of multiple concepts and plugins to achieve full functionality, which may be challenging for novice programmers.
• JSX is JavaScript XML that provides an easy-to-understand syntax for React applications to boost performance.
• The Virtual DOM works by re-rendering the entire UI in its representation, calculating the difference between the previous and new DOM, and updating the real DOM with only the changes.
• React's ES6 syntax has drastically changed from ES5 in terms of require vs import, export vs exports, component and function, props, and state.
• React uses a One-way data binding virtual DOM, while Angular uses a Two-way data binding real DOM, and was created by Google and Facebook respectively.
• React components are the building blocks of a React application, allowing for a more modular structure with built-in control of behavior and state to make the development process smoother and more organized.
• React components use state objects to create dynamic and interactive elements by accessing them via this.state() or the useState hook.
• The state of a component can be updated using this.setState().
• React Components are typically saved in the js/components/ directory because they are written in JavaScript, making the structure convenient to keep the code organized and reducing setup when creating new projects.
• A React component is a function or class that produces React Elements when invoked, potentially containing multiple or nested elements.
• State is an object that keeps track of changing data within a component, and are managed within the component, while Props are used to pass data and event handlers from one component to another, and are managed by the parent component.
• A React component's state is an internal object that holds data used to determine how the component renders and behaves, set with a default value and updated manually or when its props are changed.
• We can embed multiple components into one using ReactDOM.render() and a parent component.
• Babel is a JavaScript Compiler (also known as a Transpiler) that can transform ES6+ JavaScript code into older ES5 code supported by most browsers, enabling developers to use modern language features.
• webpack bundles multiple individual JavaScript files, including those written with ES6 syntax, into a single file, while Babel compiles modern JavaScript code down to backward-compatible versions for browsers.
• The webpack-dev-server bundles your source code and serves it to a local development environment accessible via the URL http://localhost:8080, running by default on port 8080.
• Arrow functions are a concise syntax of function expression referred to as 'fat arrow', which bind to the context of their React components and are most useful with higher-order functions.
• ReactJS is a JavaScript library developed by Facebook in 2013, used for building dynamic, reusable user interfaces for single page applications that can change data without reloading the page through its Virtual DOM.
• ReactJS is a JavaScript library used for building user interfaces and web applications, which relies on state and props to track and pass data, respectively.
• In React, props are passed to a component from outside to provide dynamic data.
• Browsers can only read JavaScript objects, so JSX must be transformed into a JavaScript object using JSX transformers like Babel before being passed to the browser.
• In React, components are used to divide the UI into small, independent, reusable pieces which are then rendered independently without affecting the rest of the application.
• The render() method of React components must return a single React element which groups together other HTML elements, and must be kept pure.
• Props are read-only immutable components that are passed down from the parent to the child components in React, helping to maintain a unidirectional data flow and render dynamic data.
• Flux is a application design paradigm based on Unidirectional Data Flow, used to replace the traditional MVC pattern and is used by Facebook internally when working with React.