Skip to content

Latest commit

 

History

History
81 lines (65 loc) · 2.43 KB

notes.md

File metadata and controls

81 lines (65 loc) · 2.43 KB

JSX file structure

--------------------
                    |
  // import section |
                    |
--------------------

------------------------
  // actual component

class Component extends React.Component {
  // ...

  // to parse this kind of component we want to grab
  // the content inside of the return value
  render() {
    return (
      {/* stuff we care about */}
      <div>
        some content
      </div>
      {/* stuff we care about */}
    )
  }
}

// OR

export const Component: React.FC<Props> = ({...}) => {

  // we also want to grab stuff inside of the return statement
  // but the problem is that it's not guaranteed that everyone
  // follows the 'best practices' like wrapping chunks of jsx
  // inside of parentheses...
  return (
    <div>
      some content
    </div>
  )
}

------------------------

Where are the JSX elements?

                             ClassDeclaration

                                    ▲
                                    │
                                    │
                                    │
              VariableDeclaration   │       FunctionDeclaration
                      ▲             │                ▲
                      │             │                │
                      │             │                │
                      │             │                │
                      │             │                │
                      └─── ExportNamedDeclaration ───┘
                                    ▲
                                    │
                                    │
                                    │
      FunctionDeclaration  ◄────── Body ───────►  ExportDefaultDeclaration
                                    │ │                                │
                                    │ │                                └───────┐
                                    │ │                                        │
                                    │ │                                        └──────►  ClassDeclaration
                                    │ │
                               ┌────┘ └────┐
                               │           │
 VariableDeclaration  ◄────────┘           └───────►  ClassDeclaration