React: JavaScript Library for UI Development

• React is a JavaScript library for building user interfaces
• Facebook and a community of developers and companies maintain React.
• React serves as a base for developing single-page or mobile applications.
• Managing complex React applications typically requires additional libraries for state, routing, and API interaction.

Key Features

• Declarative approach simplifies the creation of interactive UIs by designing basic views for each application state.
• React efficiently updates and renders the necessary components when data changes, enhancing code predictability and debugging.
• Encapsulated components managing their own state facilitate the construction of complex UIs.
• Component logic written in JavaScript allows easy data passing and keeps state out of the DOM.
• React's adaptability allows for new feature development without rewriting existing code.
• React can render on the server using Node and power native apps via React Native.

Core Concepts

• Components divide the UI into independent, reusable parts, treated like JavaScript functions.
• Components accept inputs ("props") and return React elements that dictate screen appearance
• JSX, a JavaScript syntax extension, describes UI appearance and offers the power of JavaScript.
• Props are inputs to React components, passed down from parent to child components and are read-only.
• State is component-managed data, private and fully controlled by the component, unlike props.
• Special methods called lifecycle methods are invoked at different stages of a component's life (creation, updating, destruction), enabling code execution at these points.

Virtual DOM

• React employs an in-memory data structure cache, computes differences, and efficiently updates the browser's DOM.
• Reconciliation is the name for this process.
• The virtual DOM is a lightweight JavaScript object representing the DOM.
• React updates the virtual DOM when a component's state changes.
• React compares the virtual DOM to the real DOM to identify minimal changes needed
• This process optimizes real DOM updates and minimizes performance impact from DOM manipulations.

Data Flow

• React uses a unidirectional data flow
• Data flows down from parent to child components through props.
• Child components can trigger parent updates using callback functions passed as props.
• Unidirectional flow simplifies reasoning about application state and prevents unexpected side effects.

Component Types

• Functional Components are basic JavaScript functions that accept props and return React elements.
• Class Components are ES6 classes extending React.Component, allowing them to possess state and lifecycle methods.
• Functional components with Hooks can manage state and use lifecycle methods.

Hooks

• Hooks enable functional components to "hook into" React state and lifecycle features.
• useState enables adding React state to functional components, returning a state variable and its updating function.
• useEffect allows running side effects in functional components, similar to componentDidMount, componentDidUpdate, and componentWillUnmount in class components.
• useContext enables subscribing to React context without nesting.
• Custom Hooks extract component logic into reusable functions.

State Management

• React components can manage their own state via the useState Hook or the this.state property in class components.
• Using a separate state management library is often useful for complex applications.
• Redux is a state management library providing a central application state store.
• React’s Context API facilitates state sharing between components without manual prop passing at each level.
• MobX is another state management library employing reactive programming principles.

Routing

• React lacks a built-in routing solution.
• React Router is a routing library for defining different application routes.

Common libraries and tools

• Create React App sets up new React projects with modern build tools like Webpack and Babel.
• Axios is a HTTP client for making API requests.
• Material-UI, Ant Design, and Bootstrap provide pre-designed UI components.
• Jest, Mocha, and Enzyme offer testing frameworks and libraries.
• Redux DevTools is a browser extension used for debugging Redux applications.

React Native

• React Native is a framework for building native mobile apps with React and JavaScript.
• React concepts and patterns can be used to build iOS and Android apps.
• React Native components directly translate to native UI elements for a native feel.

Benefits of using React

• Reusable components accelerate development through code reuse.
• Virtual DOM enhances speed and efficiency by reducing direct DOM manipulation.
• A large community provides a rich ecosystem of libraries, tools, and resources.
• Server-side rendering with Node improves SEO for React apps.
• React Native facilitates mobile app development with native UI.