hello_ts_react
dz / codestudy / hello_ts_reactSummary
Studying the boilerplate typescript code in React that's generated with the command "npx create-react-app my-app --template typescript"
Node Tree
Nodes
| app_tsx | |
| content | App.tsx: seems to be the entry point |
| children | app_tsx_imports, top_level_app_func |
| file reference | codestudy/hello_ts_react/App.tsx:0 |
| top_level_app_func | |
| content | Top Level App() function |
| children | top_level_jsx_code |
| parents | app_tsx |
| file reference | codestudy/hello_ts_react/App.tsx:5-24 |
| app_tsx_imports | |
| content | imports for App.tsx |
| parents | app_tsx |
| file reference | codestudy/hello_ts_react/App.tsx:1-3 |
| top_level_jsx_code | |
| content | this looks like JSX code? |
| children | import_app_tsx (imports this function) |
| parents | top_level_app_func |
| file reference | codestudy/hello_ts_react/App.tsx:7-23 |
| header_element | |
| content | header element: thought this could have been a custom element, but it wasn't. |
| children | webdev/mdn_header_element (looked up header element because I didn't recognize it) |
| components_use_capitals | |
| content | custom react components use capital letters as a naming convention. |
| children | app_elem (This here is a react component, not a built-in) |
| index_tsx | |
| content | index.tsx file |
| children | import_app_tsx, root_render, create_root |
| remarks | kind of looks like boilerplate |
| file reference | codestudy/hello_ts_react/index.tsx:0 |
| import_app_tsx | |
| content | imports the App created in App.tsx |
| children | app_elem |
| parents | index_tsx, top_level_jsx_code |
| remarks | This must mean that index.tsx is the top-level node that gets created. |
| file reference | codestudy/hello_ts_react/index.tsx:4 |
| root_render | |
| content | top-level render, "root render" |
| children | react_strictmode_elem |
| parents | index_tsx |
| file reference | codestudy/hello_ts_react/index.tsx:10-14 |
| create_root | |
| content | create a root element via ReactDOM.createRoot |
| parents | index_tsx |
| file reference | codestudy/hello_ts_react/index.tsx:7-9 |
| react_strictmode_elem | |
| content | React.StrictMode element. |
| children | app_elem |
| parents | root_render |
| remarks | this seems to be the top-most element. I wonder if StrictMode is a typescript thing, or if it's a react thing that you can do in JS as well? |
| file reference | codestudy/hello_ts_react/index.tsx:11-13 |
| app_elem | |
| content | App element component |
| parents | components_use_capitals, react_strictmode_elem, import_app_tsx |
| file reference | codestudy/hello_ts_react/index.tsx:12 |
| report_web_vitals | |
| content | reportWebVitals(): some way to profile performance apparently. You need to pass in a function for it to log performance. |
| file reference | codestudy/hello_ts_react/index.tsx:19 |
| app_test_tsx | |
| content | App.test.tst: tests for App |
| children | test_react_link |
| file reference | codestudy/hello_ts_react/App.test.tsx:0 |
| test_react_link | |
| children | render_app_component, search_for_text |
| parents | app_test_tsx |
| file reference | codestudy/hello_ts_react/App.test.tsx:5-9 |
| render_app_component | |
| parents | test_react_link |
| remarks | render is a function imported from testing/library/react |
| file reference | codestudy/hello_ts_react/App.test.tsx:6 |
| search_for_text | |
| content | looks for "learn react" in screen |
| children | expect_to_be_in_document |
| parents | test_react_link |
| file reference | codestudy/hello_ts_react/App.test.tsx:7 |
| expect_to_be_in_document | |
| content | there's a check using an expect and toBeInTheDocument |
| parents | search_for_text |
| file reference | codestudy/hello_ts_react/App.test.tsx:8 |