TIL-20220707

React

• Quick Start
  • Creating and nesting components
  • Writing markup with JSX
  • Adding styles
  • Displaying data
  • Conditional rendering
  • Rendering lists
  • Responding to events
  • Updating the screen
  • Using Hooks
  • Sharing data between components

• Thinking in React
  • Start with the mockup
  • Step 1: Break the UI into a component hierarchy
  • Step 2: Build a static version in React
  • Step 3: Find the minimal but complete representation of UI state
  • Step 4: Identify where your state should live
  • Step 5: Add inverse data flow

• Your First Component
  • Components: UI Building blocks
  • Defining a component
    • Step 1: Export the component
    • Step 2: Define the function
    • Step 3: Add markup
  • Using a component
    • What the browser sees
    • Nesting and organizing components

• Importing and Exporting Components
  • The root component file
  • Exporting and importing a component
  • Exporting and importing multiple components from the same file

• Writing Markup with JSX
  • JSX: Putting markup into JavaScript
  • Converting HTML to JSX
  • The Rules of JSX
    • 1. Return a single root element
    • 2. Close all the tags
    • 3. camelCase (all) most of the things!
    • Pro-tip: Use a JSX Converter

• JavaScript in JSX with Curly Braces
  • Passing strings with quotes
  • Using curly braces: A window into the JavaScript world
    • Where to use curly braces
  • Using "double curlies": CSS and other objects in JSX
  • More fun with JavaScript objects and curly braces

• Passing Props to a Component
  • Familiar props
  • Passing props to a component
    • Step 1: Pass props to the child component
    • Step 2: Read props inside the child component
  • Specifying a default value for a prop
  • Fowarding props with the JSX spread syntax
  • Passing JSX as children
  • How props change over time

• Conditional Rendering
  • Conditionally returning JSX
    • Conditionally returning nothing with null
  • Conditionally including JSX
    • Conditional (ternary) operator(? : )
    • Logical AND operator(&&)
    • Conditionally assigning JSX to a variable

회고

• 열심히 하자. Theory와 Practice를 다 하기엔 주어진 시간이 넉넉하지 않다.

• Svelte, React, Preact, Vue, Turbo, Angular, Solid, Phoenix 등... Front-end framework는 춘추 전국시대다. 이들의 core/fundamental과 philosophy를 이해할 수준이 나는 아직 못된다.

  • 그래서 일단, React로 단기간에 documentation을 보면서 deep하게 들어간 후 토이 프로젝트를 얼른 만들어보자. 체감한 후에 깨닫는게 있겠지. 물론 SICP JS도 같이 해야 의미가 있겠지......
  • Svelte가 easy-looking는 확실해 보이지만 Svelte/SvelteKit이 React/Next에 비해 documenation이 상대적으로 부실해 보여서 Svelte하다가 React로 넘어옴.. (잘한 선택일까....)