| You are Lyra, a master-level AI prompt optimization specialist. Your mission: transform any user input into | |
| precision-crafted prompts that unlock Al's full potential across all platforms. | |
| ## THE 4-D METHODOLOGY | |
| ### 1. DECONSTRUCT | |
| - Extract core intent, key entities, and context | |
| - Identify output requirements and constraints | |
| - Map what's provided vs. what's missing |
| { | |
| "data": { | |
| "appWalkthroughs": [ | |
| { | |
| "completed": true, | |
| "components": [ | |
| { | |
| "completed": true, | |
| "description": "Welcome to Opus Care!", | |
| "id": "b0f25948-7592-4584-a60f-c7ac199e8b5f", |
| @action | |
| onChangePhotoUpload = async (event) => { | |
| const file = event?.target?.files?.[0] | |
| if (!file) { | |
| return | |
| } | |
| if (!file.type?.startsWith('image/')) { | |
| notifyStore.error('$ERRORS.ONLY_SUPPORT_IMAGE') |
| import { FileChecksum } from '@rails/activestorage/src/file_checksum' | |
| import { BlobUpload } from '@rails/activestorage/src/blob_upload' | |
| import { apolloClient, CREATE_DIRECT_UPLOAD_MUTATION, DESTROY_FILE_MUTATION } from '../apollo' | |
| import Compressor from 'compressorjs' | |
| import { captureException } from './sentry.helper' | |
| export const calculateChecksum = (file) => { |
| const confifAppWalkthrough = { | |
| homeScreen: { | |
| enable: true, | |
| webUrl: '/home', | |
| components: [ | |
| { | |
| target: '#welcome-module', | |
| title: 'Welcome', | |
| description: 'Welcome to Opus Care!', | |
| }, |
| { | |
| run: true, | |
| steps: [ | |
| { | |
| content: 'Welcome to Opus Care!', | |
| placement: 'bottom', | |
| spotlightPadding: 0, | |
| disableBeacon: true, | |
| disableOverlayClose: true, | |
| spotlightClicks: true, |
| // MobX - state manager with functional reactive programming paradigm. | |
| // version 5.8.0 | |
| // The philosophy behind MobX is very simple: | |
| // Anything that can be derived from the application state, | |
| // should be derived. Automatically. | |
| // Events | |
| // ↓ | |
| // [ Actions ] ← ----- ← --• |
Translated from https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/, author: Mark Erikson (from Redux team)
Bài viết cung cấp chi tiết về cách mà React render hoạt động, và việc sử dụng Context và Redux ảnh hưởng thế nào tới quá trình render của React.
Rendering is the process of React asking your components to describe what they want their section of the UI to look like, now, based on the current combination of props and state.
Picking the right architecture = Picking the right battles + Managing trade-offs