React JS c Нуля – ПОЛНЫЙ Курс для начинающих (2025)

Main ideas, concepts, and lessons

Why React exists / what React is

• React is presented as a JavaScript library for building user interfaces (web, and also via React Native for native-style mobile development).
• Its key value is simplifying UI development by working with components—described as building blocks.

Course approach / teaching methodology (Resul University)

• Learn the theory in short micro-videos, then spend most time on practice.
• Instruction emphasizes experienced mentors (mid / “middle+” specialists) who guide you until you achieve results.
• The video includes links to roadmaps and learning/tasks aligned with real workplace expectations.

React vs “pure JavaScript” (imperative vs declarative)

• Pure JS (imperative) example:
  • Uses sequential DOM-like steps: handle clicks, update classes manually, and rerender parts via imperative logic.
• React (declarative/reactive) example:
  • You define the UI based on state (“what should be active”).
  • When state changes, React automatically redraws the interface.

How to start a React project

• Easiest online method: React Sandbox
• Local development:
  • Use an editor like VS Code (or WebStorm).
  • Install Node.js and verify with npm -v.
  • Create a project with Create React App:
    • npx create-react-app my-app
  • The course also demonstrates a Vite/TypeScript-like flow and local server (e.g., localhost:5173).

JSX compilation detail

• React uses JSX, which browsers can’t directly understand.
• Tooling transpiles/compiles JSX into browser-understandable JavaScript.

React components: building blocks

• A React UI is decomposed into small components (e.g., header, button, list items).
• Benefits:
  • Reuse across the app
  • Easier navigation and maintenance
  • Reduced errors, faster iteration
  • Component-local grouping of HTML/CSS/JS logic

JSX fundamentals

• JSX resembles HTML tags, but it’s actually JS syntax plus XML-like markup.
• Dynamic values are inserted via curly braces: {...}.
• JSX supports:
  • rendering expressions
  • conditional rendering
  • passing props/attributes
• Conditional logic patterns taught repeatedly:
  • ternary operators
  • short-circuit rendering

Props and data-driven components

• Components accept props (parameters) from parents.
• Props enable reusable generic components (e.g., one “card/list item” component used for many items).
• Arrays are mapped into components:
  • array.map(item => <Component ... />)
• React requires a unique key for each list element.

State and reactivity

• React is “reactive”: it rerenders when state changes.
• Hooks used:
  • useState for local component state
  • update state via setter functions (e.g., setContent(...))
• Common beginner pitfall:
  • logging the value right after setState may show the previous state, because updates apply on the next render cycle.
• State-driven UI features shown:
  • tab-like switching
  • conditional content display
  • active button highlighting using className derived from state

Conditional rendering patterns taught

• Ternary: condition ? <A/> : <B/>
• If not / short-circuit:
  • {condition && <Component/>}
  • {!condition ? <A/> : null} style
• Also includes using variables to hold JSX blocks and render conditionally.

Refactoring / architecture

• Demonstrates moving large sections out of App into:
  • separate files/components in a components/ folder
• Introduces components like:
  • Header, Button, Teachings/Differences/Section
• Goal: improve readability and maintainability.

Fragments and root element rule

• JSX components must return one root element.
• Two approaches shown:
  • use a wrapper element (div)
  • use a Fragment (<></> or Fragment) to avoid adding extra DOM nodes

React “event handling” with props

• Custom Button component supports clicks via onClick.
• Parent passes the handler down as a prop.
• Examples include passing identifiers (e.g., type) to decide which tab/content should change.

useEffect for side effects

Multiple useEffect use cases:

1. Correct modal opening using effect dependencies
2. Intervals/timers cleanup to avoid memory leaks
3. Fetching data from a server asynchronously
   • use state for loading and users
   • avoid infinite rerenders with correct dependency arrays

Important rule:

• When using timers/listeners, return a cleanup function from useEffect.

Fetching data from server

• Example flow:
  • fetch a list of users from an external API
  • store results in users state
  • render via .map(...)
• Warning:
  • placing async requests inside the render body can trigger repeated requests / render loops

Custom hooks

• Demonstrates building a hook like useInput():
  • encapsulates useState for input value
  • returns an API like { value, onChange }
• Used for dynamic filtering (filtering user lists based on input text).

Styling approaches taught

• Baseline: global CSS imports (e.g., index.css)
• Component-scoped styling:
  • CSS Modules (className={styles.someClass})
  • libraries like “sty” for CSS-in-JS-like scoped styling
• Important naming detail:
  • JSX uses className, not class

Forms and input handling

• Controlled inputs:
  • store form values in state
  • bind with value={...}
  • update via onChange={...}
• Validations:
  • conditional error flags (e.g., hasError)
  • conditional style changes (e.g., red border)
  • disable submit when invalid: disabled={hasError}
• Core principle:
  • state must be updated via setter functions
  • state changes drive UI updates

State update correctness: previous state pattern

• Another pitfall:
  • toggling state twice quickly can yield unexpected results due to batched/async updates
• Best practice:
  • use the updater function form:
    • setState(prev => !prev)
    • setX(prev => ...)

Optimizing state shape

• Demonstrates merging multiple useState calls into a single object state to reduce fragmentation.
• Updates rely on immutability:
  • spread and careful merging.

Two-way binding / useRef

• Introduces two-way binding (template linked with state).
• useRef discussion:
  • updating a ref does not cause rerenders
  • used for mutable values that persist between renders

Modal component + portal

• Modal is created with a dialog-like component (<Dialog ...>).
• Rendering is moved above the main DOM tree using React Portal:
  • createPortal(content, document.getElementById('modal-root'))
• Backdrop/darkening is used when the modal is open.

Routing concept (simplified without full router)

• Instead of a full router, the course demonstrates tab/page switching:
  • state holds the current “page”
  • conditional rendering shows either page A or page B
• Notes “smart vs dumb” component approach:
  • stateful parent/page components vs presentational components without internal state

---

Methodology / instruction-style content (detailed bullets)

Building a minimal interactive UI with React (as demonstrated)

• Setup
  • Create a React project (online sandbox or local tooling).
  • Start the dev server (localhost:3000 for CRA; localhost:5173 for Vite-like setup).
• Create base UI
  • Use a root App component.
  • Return JSX markup from components.
• Make UI data-driven
  • Create a component (e.g., list item).
  • Pass data via props.
• Make it interactive
  • Add state with useState (in the parent or in the component that owns the logic).
  • On user action (click):
    • call a handler (e.g., handleClick(type))
    • update state via setState(...)
  • React rerenders automatically based on updated state.

Render lists correctly

• Use array.map() to generate repeated elements.
• For every list child:
  • provide a unique key (e.g., key={item.id} or key={item.title})
• Update the UI by changing underlying state/arrays.

Conditional rendering

• JSX patterns:
  • Ternary: condition ? <A/> : <B/>
  • Short-circuit: condition && <Component/>
• Include a fallback (e.g., default text when state is null/empty).

Modals with portal and effects

• Create a modal component that accepts:
  • open (boolean) and children
• Render the modal via createPortal(...) into a top-level DOM node (e.g., modal-root).
• Use useEffect when the modal must react after mount:
  • include open in the dependency array
• Add backdrop styling when open is true.

useEffect usage guidelines taught

• Intervals/timers
  • Create interval inside useEffect
  • Provide cleanup to clear interval on unmount or dependency change
• Data fetching
  • Put async request logic inside useEffect
  • Use [] when requesting once on mount
  • Maintain states:
    • loading / status
    • data (e.g., users)
  • Avoid infinite rerenders via correct dependencies and fetch function placement

Controlled forms

• Create state per field:
  • const [name, setName] = useState("")
  • const [reason, setReason] = useState("help")
• Bind inputs:
  • value={name}
  • onChange={(e) => setName(e.target.value)}
• Validation:
  • compute error state (e.g., based on name.length === 0)
  • apply red border / error styles
  • disable submit:
    • disabled={hasError}

Custom hook (useInput) pattern

• Implement a function starting with use:
  • function useInput(defaultValue = "") { ... }
• Inside:
  • use useState for the value
  • provide an onChange handler
• Return:
  • { value, onChange }
• Use the hook to simplify repeated input logic and enable filtering

---

Speakers / sources featured

Speaker

• Vladislav Minin (host/instructor; mentions 11 years of JavaScript teaching and founder of “Result University”)

Sources mentioned (not necessarily shown directly as speakers)

• React official documentation (React docs)
• MDN documentation (referenced for Dialog / methods)
• React Sandbox (online editor)
• Create React App tooling (named and demonstrated)
• External data example: JSONPlaceholder (for user fetching)
• UI placeholder/example mentioned: Yandex Music
• Other libraries/frameworks mentioned: Angular, Vue, Solid, React Native, TypeScript, npm, Vite, CSS Modules, Portal, sty, etc.