????????????Get early access to this entire course now on Net Ninja Pro:
https://netninja.dev/p/qwik-crash-course-first-look
???????????? Access the course files on GitHub:
https://github.com/iamshaunjp/Qwik-Crash-Course-1st-Look
???????????? TypeScript Tutorial:
On Net Ninja Pro –
On YouTube –
????️???????? Image Link:
https://stock.adobe.com/uk/search/images?k=mario&search_type=default-view-results&asset_id=388785498
???????????? Qwik docs (getting started) –
???????????? VS Code –
Okay so now we've got a general idea of What's what in this application I want To talk more about routes and Page Components and how we set those up in Quick apps and it's a little bit like How this works in other meta Frameworks Like next JS but there is a small Difference which we'll see soon enough So each route in quick apps needs its Own component in the routes folder and That component will be rendered for that Particular route for example the index Component is for the root route the home Page and that gets rendered for just Forward slash and these files have TSX Extensions which is like jsx but it uses Typescript instead of JavaScript and for Those who aren't sure what jsx or TSX Files are for they basically allow us to Write HTML like templates in JavaScript Or typescript files now if you want to You can use jsx instead of TSX but quick Works better when you stick to TSX so We'll use that Anyway if you want to add a new route we Just need a new folder and a new file For that route and this is where it Differs a little bit from something like Next JS because in next if you want a New route you just make a new component Right here in the routes directory and Whatever the name of that component file Is a route path will be generated to Match it but that's not the way it works
In quick applications instead each route Needs its own folder with the exception Of this Home Route just like this flower Folder right here has its own folder and Component inside it so if we want an About route for example I would make an About folder first of all and then Inside that folder I would then make a New component file called index.tsx so All the file names four components Should be index.tsx when it comes to Routes anyway but they're all inside Their own folder and the folder name Dictates the route that's generated for That page opponent does that make sense So in this case it would be forward Slash about And as well as the component inside this Folder later we could also add maybe a Style sheet for this page so it's all Contained in its own folder but we'll Talk about Styles a little bit later on For now let's flesh out a new component For this route so we need to export the Component as we make it so say export Default and then we use the component Function from Quake to make the Components if you click on this then It's going to Auto Import front quick at The top so this component function right Here accepts as an argument another Function which can then return a Template for the components and that Template is going to go inside
Parentheses so if you've ever used react Before then you should be able to see That this is very similar in its Approach a function which returns a Template but also notice that the Component function up here ends with a Dollar sign in quick and you're going to See this quite a lot for components for Event listeners and for other things as Well and this is something quick uses to Define lazy loading boundaries where it Can split the code into chunks and then Just send them to the browser on demand When they're needed so whenever you see One of these dollar signs you should be Thinking are this is where quick might Split the code into separate chunks so That it can lazy load those chunks in The browser on demand later on only when It's needed so anyway let's now make a Template for this component all right Then so first of all I'm going to do an Article tag like so and then inside that We'll do an H2 that H2 will say about And below that we're going to do a few Paragraph tags with some Lauren ipsum Inside it so let me just duplicate this A few times like so alright so I also Want to create a contact route so let's Create a new folder over here new folder Contact like so and in fact what I'm Going to do is grab all of this and copy It so we can paste it inside a new file Called
Index.tsx remember all the files here Are called index TSX it's the folder Name that it takes the route okay not The file name so I'm going to paste this In and this will be contact this time And let's get rid of some of these P Tags so it's a little bit different at Least like so Now I'm going to do two more things the First thing I'm going to do is delete This flower folder because we don't Actually need that anymore so let's get Rid of that and the second thing I want To do is just go into one of the Components the about one for example and I'm going to come up here and I'm going To console.log Hello Now the reason I'm doing this is to show You that this can all run on the server To begin with and then when it reaches The browser it doesn't need to run again Remember we said that resume ability is Whereby this is all rendered on the Server and all the information is Serialized into the HTML page so that When it reaches the browser we don't Need to run the JavaScript right away Again to make up that component tree we Cover State and all that kind of jazz so This then will run in the browser Straight away if we're requesting this About page from the server all right So then let's give this a little test
Over here I'm going to go to forward Slash about like so and press enter And yep it doesn't look like we're Running the service so npm start and Press enter And then hopefully now we should see That this works if we go to forward Slash about yeah we can see the about Page if we go to forward slash Contact we should see the contact page Now what I'm going to do is go to the About page again Just to demo that we don't get that Console log over here but if we open up The server we can see we do get it right Here okay So if we go back to the contact page and Then forward again you can see again no Hello over here but we do get hello Again over here because this is all Running on the server all right so I Hope that makes it clear As to how we can create different routes We are going to go deeper into this Later on when we start talking about Route parameters and all that kind of Stuff but hopefully that makes it clear How we make these different routes now And how quick City generates those URLs Or paths so next up we're going to talk About how we can start adding styles to Our different components
