Spring Boot
What are the essential components to concentrate on in a Spring Boot and React application
Fundamentals
- What is Spring Boot? An extension of the Spring Framework designed to simplify the bootstrapping and development of new Spring applications.
- Spring Boot Starters - Dependency descriptors that simplify application setup with pre-configured dependencies for specific functionality.
- Auto-configuration - Automatic configuration of the Spring application based on the dependencies present on the classpath.
IoC Container
- Inversion of Control - Design principle where control flow is inverted compared to traditional programming.
- ApplicationContext - Spring's advanced container implementation that enhances BeanFactory functionality.
- Bean lifecycle - Initialization and destruction phases of Spring-managed beans.
Dependency Injection
- Constructor Injection - Dependencies provided through class constructors.
- Setter Injection - Dependencies provided through setter methods.
- Field Injection - Dependencies injected directly into fields using @Autowired.
- @Autowired, @Qualifier, @Primary - Annotations for controlling autowiring behavior.
Bean Scopes
- Singleton - Default scope, one instance per Spring IoC container.
- Prototype - New instance created each time the bean is requested.
- Request, Session, Application - Web-aware scopes for different web contexts.
- @Scope annotation - Defining custom or predefined scopes for beans.
Spring MVC
- DispatcherServlet - Front controller pattern implementation in Spring.
- @Controller, @RestController - Annotations for creating web controllers.
- @RequestMapping - Mapping HTTP requests to handler methods.
- View resolution - Converting model data to HTTP response.
- Form handling - Processing web forms with data binding.
Spring Data JPA
- Repositories - Interfaces for CRUD operations on domain objects.
- Query methods - Defining queries by method names.
- @Query annotation - Custom JPQL or native SQL queries.
- Pagination and sorting - Managing large result sets.
- Auditing - Tracking entity changes with @CreatedBy, @LastModifiedDate, etc.
Spring Boot Actuator
- Health endpoints - Monitoring application health status.
- Metrics - Collecting and exposing metrics from the application.
- Info endpoint - Exposing application information.
- Custom endpoints - Creating application-specific monitoring endpoints.
- Security considerations - Securing sensitive actuator endpoints.
Profiles
- Environment-specific configs - Tailoring application behavior for different environments.
- @Profile annotation - Conditional bean registration based on active profiles.
- profile-specific properties - Using application-{profile}.properties files.
- Profile activation - Setting active profiles via properties, environment variables, or programmatically.
Exception Handling
- @ExceptionHandler - Method-level annotation for handling exceptions in controllers.
- @ControllerAdvice, @RestControllerAdvice - Global exception handling across controllers.
- Custom error responses - Creating structured error responses.
- Error views - Custom error pages for web applications.
- Error attributes customization - Modifying default error attributes.
React
A JavaScript library for building user interfaces with a component-based approach and efficient rendering.
React Basics
- What is React? A JavaScript library for building user interfaces, primarily for single-page applications.
- React Philosophy - Declarative programming and component-based architecture.
- Setting up a React project - Using Create React App, Vite, or Next.js.
- React DOM - The glue between React and the browser DOM.
- React Developer Tools - Browser extensions for debugging React applications.
Components
- Functional Components - Simple JavaScript functions that return JSX.
- Class Components - ES6 classes that extend React.Component.
- Component Composition - Building complex UIs from simple components.
- Component Design Patterns - Container/Presentational, Higher-Order Components, Render Props.
JSX
- JSX Syntax - XML-like syntax extension for JavaScript.
- Expressions in JSX - Embedding JavaScript expressions with curly braces.
- JSX Attributes - HTML attributes vs. React props in JSX.
- Children in JSX - Nesting elements and components.
- JSX Compilation - How JSX transforms into React.createElement calls.
Props and State
- Props - Passing data from parent to child components.
- PropTypes and DefaultProps - Type checking and default values for props.
- State - Managing component-specific data that changes over time.
- setState - Updating component state correctly.
- Unidirectional Data Flow - React's one-way binding model.
Hooks
- useState - Managing state in functional components.
- useEffect - Handling side effects in components.
- useContext - Consuming context in functional components.
- useReducer - Complex state logic with reducer pattern.
- useCallback, useMemo, useRef - Performance optimization hooks.
- Custom Hooks - Extracting reusable logic into custom hooks.
Virtual DOM
- Virtual DOM Concept - In-memory representation of the real DOM.
- Reconciliation - The diffing algorithm that determines DOM updates.
- Keys - Optimizing list rendering with unique identifiers.
- Rendering Process - From state change to DOM update.
Component Lifecycle
- Class Component Lifecycle - Methods like componentDidMount, componentDidUpdate, etc.
- Functional Component Lifecycle - Using useEffect for lifecycle events.
- Mounting, Updating, Unmounting - The three phases of a component's lifecycle.
- Error Boundaries - Catching JavaScript errors in components.
Redux
- Redux Principles - Single source of truth, state is read-only, changes via pure functions.
- Actions, Reducers, Store - Core Redux concepts.
- react-redux - Connecting React components to Redux.
- Redux Middleware - Extending Redux with custom functionality.
- Redux Toolkit - Official toolset for efficient Redux development.
Context API
- Context vs. Props - When to use context instead of prop drilling.
- createContext - Creating a context object.
- Provider and Consumer - Providing and consuming context values.
- useContext - Hook for consuming context in functional components.
- Context Limitations - Understanding when context might not be appropriate.
Performance Optimization
- React.memo - Memoizing functional components to prevent unnecessary renders.
- PureComponent - Class component with shallow prop and state comparison.
- useCallback, useMemo - Memoizing functions and values.
- Code Splitting - Using React.lazy and Suspense for dynamic imports.
- Profiler - Measuring rendering performance with React DevTools.
React Router
- BrowserRouter vs. HashRouter - Choosing the right router type.
- Routes and Route - Defining application routes.
- Link and NavLink - Navigation without page reloads.
- URL Parameters - Accessing dynamic segments of the URL.
- Nested Routes - Creating hierarchical routing structures.
Forms
- Controlled Components - Form elements controlled by React state.
- Uncontrolled Components - Form elements that maintain their own state.
- Form Validation - Validating user input in React forms.
- Form Libraries - Formik, React Hook Form, and other solutions for form management.
Error Boundaries
- Creating Error Boundaries - Class components with getDerivedStateFromError and componentDidCatch.
- Fallback UI - Displaying alternative UI when errors occur.
- Error Handling Strategies - Where to place error boundaries in the component tree.
- Monitoring and Reporting - Tracking errors in production applications.
Fragments
- React.Fragment - Grouping children without adding extra nodes to the DOM.
- Short Syntax - Using <> and shorthand.
- Keyed Fragments - Adding keys to fragments in lists.
- Use Cases - When and why to use fragments.
Suspense
- React.Suspense - Component for handling loading states.
- Code Splitting - Using Suspense with dynamic imports.
- Data Fetching - Integrating Suspense with data loading.
- Suspense Boundaries - Strategically placing Suspense components.
Server Components
- Server Components vs. Client Components - Understanding the differences and use cases.
- Data Fetching - Fetching data directly on the server.
- Zero Bundle Size - Reducing JavaScript sent to the client.
- Streaming Rendering - Progressive content loading with Suspense.
- Integration with Next.js - Using Server Components in Next.js applications.