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 | root_render, create_root, import_app_tsx |
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 | react_strictmode_elem, import_app_tsx, components_use_capitals |
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 |