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
location knowledge/hello_ts_react.dz:7

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
location knowledge/hello_ts_react.dz:11

app_tsx_imports
content imports for App.tsx
parents app_tsx
file reference codestudy/hello_ts_react/App.tsx:1-3
location knowledge/hello_ts_react.dz:16

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
location knowledge/hello_ts_react.dz:21

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)
location knowledge/hello_ts_react.dz:26

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)
location knowledge/hello_ts_react.dz:30

index_tsx
content index.tsx file
children import_app_tsx, create_root, root_render
remarks kind of looks like boilerplate
file reference codestudy/hello_ts_react/index.tsx:0
location knowledge/hello_ts_react.dz:35

import_app_tsx
content imports the App created in App.tsx
children app_elem
parents top_level_jsx_code, index_tsx
remarks This must mean that index.tsx is the top-level node that gets created.
file reference codestudy/hello_ts_react/index.tsx:4
location knowledge/hello_ts_react.dz:40

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
location knowledge/hello_ts_react.dz:49

create_root
content create a root element via ReactDOM.createRoot
parents index_tsx
file reference codestudy/hello_ts_react/index.tsx:7-9
location knowledge/hello_ts_react.dz:54

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
location knowledge/hello_ts_react.dz:59

app_elem
content App element component
parents import_app_tsx, components_use_capitals, react_strictmode_elem
file reference codestudy/hello_ts_react/index.tsx:12
location knowledge/hello_ts_react.dz:69

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
location knowledge/hello_ts_react.dz:77

app_test_tsx
content App.test.tst: tests for App
children test_react_link
file reference codestudy/hello_ts_react/App.test.tsx:0
location knowledge/hello_ts_react.dz:85

test_react_link
children search_for_text, render_app_component
parents app_test_tsx
file reference codestudy/hello_ts_react/App.test.tsx:5-9
location knowledge/hello_ts_react.dz:89

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
location knowledge/hello_ts_react.dz:93

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
location knowledge/hello_ts_react.dz:98

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