codestudy/hello_ts_react

hello_ts_react

dz / codestudy / hello_ts_react

Summary

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