Posts

Showing posts from July, 2024

Typescript basics part 1

Image
 What I learned today:  Refreshing some Typescript basics since I haven't touched it in awhile :) TypeScript is a superset of JavaScript that adds static typing to the language. It takes typescript code and transcompiles to JavaScript. Here I set the type of variable 'num' to number. If I try to assign a string, it gives me an error. If I tr to compile this, It will compile the ts file into a js file and return this error: We can create a tsconfig.json file by using 'tsc --init'. There are a number of useful options in tsconfig specifically 'rootdir' and 'outdir'. With this we can configure where our source typescript files are and where our javascript files will compile to. Here we can see that now when we compile using 'tsc' command, all the typescript files will be pulled from the './src' directory and all the compiled javascript files will go to the './dist' directory. We can assign any type to a variable by doing: let y

Using Child routes with React Router

Image
  Modern way to do React Router: (Note I am using React-router-dom 6.10) Using Child routes can greatly enhance the organization, maintainability, and functionality of your routing configuration. Here's why and how to use child routes. 1) Nested Layouts: Child routes let you set up nested layouts. For example, if you have a main layout like HomeLayout that includes shared elements (like a header, footer, or navigation bar), you can use child routes to nest different pages within this layout. In this example, HomeLayout will render for all the child routes ( Landing , Register , Login ).  2)   index property:   Child routes let you set a default route for a layout, which is great for defining a landing page for a section of your app. In the example above, Landing will be the default if the user goes to the root path ('/'). Just make sure you add <Outlet /> to the parent  element  <HomeLayout />  to display all the child routes like in the example below. 3)