DOCSEARCHbyAlgolia
Submit Docs

QBurst FEED Team Documentation

website·Indexed 30 days ago

https://feedpm.github.io/feed-docs/

A knowledge portal providing training, coding guidelines, and tool recommendations for front-end and back-end development. It includes comprehensive guides on React JS (JSX, Higher Order Components, Redux Persist, and React Router), Angular, Node.js, and CSS, as well as documentation on using MDX and Docusaurus.

Tokens
22.9K
Snippets
107
Records
179
Agent score
75%

What's inside QBurst FEED

  1. Overview of Flux architectural pattern

    Flux is an architectural pattern proposed by Facebook for building Single Page Applications (SPAs). It implements a unidirectional data flow to manage application state by splitting the application into four primary components: Stores, Dispatcher, Views, and Actions/Action Creators.

  2. Overview of Angular

    Angular is a platform and framework for building single-page client applications using HTML and TypeScript. It is written in TypeScript and implements its functionality as a set of TypeScript libraries that are imported into applications.

  3. Understand Lazy Loading in Angular

    Lazy Loading is a design pattern in Angular that loads feature modules only when a user navigates to their associated routes for the first time. By default, NgModules are eagerly loaded, meaning they are all loaded during the initial application startup. Lazy loading reduces the initial bundle size (main.js), which decreases initial load times and improves overall application performance.

  4. Understand Angular Architecture components

    Angular applications are built using the following core architectural elements:

    • NgModules: The basic building blocks that provide a compilation context. Every app has a root module (usually AppModule) that bootstraps the application.
    • Components: The UI building blocks. Each component consists of a class (for logic/data) and an HTML template (for the view), identified by the @Component() decorator.
    • Services and Dependency Injection: Used for sharing data or logic across components. Service classes are marked with the @Injectable() decorator to allow them to be injected as dependencies.
    • Routing: Provided by the Router NgModule, this service maps URL paths to views, enabling navigation and lazy-loading of modules without full page refreshes.

  5. Understand the Redux Store concept

    A Redux store is a singleton JavaScript object that encapsulates the entire application state. Unlike Flux, which may use multiple stores, Redux uses a single store for the whole app. If data handling logic needs to be split, reducer composition is used instead of creating multiple stores. The store is responsible for holding state, providing access to state, updating state via actions, and managing change listeners.

  6. Understand React JS core concepts and architecture

    React is an open-source, component-based JavaScript library used for building user interfaces, focusing specifically on the view layer. It uses a declarative paradigm, meaning developers describe what the UI should look like for a given state, and React efficiently updates and renders the components when data changes. Applications are built as a collection of small, reusable components that each render a piece of HTML.

  7. Use React components in Markdown with MDX

    By using MDX, you can write JSX and integrate React components directly within your Markdown files. This allows you to mix standard Markdown syntax with interactive or styled React elements in the same document.

  8. Understand and use JSX syntax in React

    JSX is a syntax extension for JavaScript used to create React elements. While React does not require JSX, it is widely used as a visual aid for building UIs. JSX is eventually compiled into React.createElement() calls.

    Key syntax rules:

    • HTML tags must be lower-cased to represent HTML elements.
    • Use className instead of the HTML class attribute.
    • Use htmlFor instead of the HTML for attribute.
    • All attributes must be camel-cased.
    • Tags support XML self-closing syntax (e.g., <input />) if there are no children.
    // JSX Syntax
const sampleJsxElement = <h1 className="hello">This is sample JSX</h1>;

// Equivalent plain JavaScript without JSX
const sampleJsxElement = React.createElement(
  'h1',
  { className: 'hello' },
  'This is sample JSX'
);

  9. Understand and prevent prop drilling with React Context

    Prop drilling occurs when data is passed through multiple levels of a component tree to reach a deeply nested child, even if the intermediary components do not need that data. React Context solves this by making specific data available to all components in the tree regardless of nesting depth. It is recommended to use Context when props are passed through three or more levels or when many components are burdened with irrelevant data.
    // Example of Prop Drilling (The problem Context solves)
const App = () => <ParentComponent theme="light" />;
const ParentComponent = (props) => <Child theme={props.theme} />;
const Child = (props) => <Grandchild theme={props.theme} />;
const Grandchild = (props) => <p>Theme: {props.theme}</p>;

  11. Implement the 'Lifting State Up' pattern in React

    Lifting state up is the process of removing local state from descendant components and moving it into their closest common ancestor. This ensures that the parent component acts as the 'single source of truth,' allowing multiple child components to reflect the same changing data and stay in sync.

    Key principles:

    • If data can be derived from props or existing state, it should not be stored in state.
    • Child components become 'controlled' components: they receive their value via props and notify the parent of changes via callback functions passed as props.
    • This reduces the surface area for bugs by centralizing state mutations in one component.

  12. Create a basic React functional component

    A functional component is a plain JavaScript function that accepts props as an argument and returns a React element. They are preferred for presentational components that do not require complex state or lifecycle methods, as they are easier to read, test, and result in less code.
    function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}