Solid JS Tutorial #2 - Making a New Solid App

Key Takeaways

all right then so let's create a brand new solid application so I've gone to solidjs.com and if you go to guides and then getting started you're going to end up on this page right here and if we scroll down we can see how we can set up a brand new solid application now you can use JavaScript or typescript if you wish it's entirely up to you I'm going to be using JavaScript purely because I want to keep the barrier to the series quite low and I don't want to assume everyone already knows typescript but if you prefer to use typescript that's fair enough I'm going to use this Command right here typescript users you can use this one but essentially we want to copy up to this bit right here because we're going to name our application something else so we're going to be using D git to basically grab a solid JS template a starter template so copy that little command there go to wherever you want to create this project in a terminal and then paste this in we're going to call this ninja hyphen merch doesn't matter what you call it to be honest press enter and this is going to start to install a brand new solid JS project for us alright so once it's done that we can CD into that new folder ninja merch so CD ninja hyphen merch like so and we want to install all the dependencies now and we do that by typing npm install and pressing enter that's going to install all the project dependencies for us and then once we've done that I'm going to open it up in vs code by tapping code space and then full stop press enter and it's going to open up this starter project for us right here so let me just zoom in a little bit so we can see everything a bit clearer all right so let me just take a couple of minutes now to walk you through this data application and then we'll fire it up and preview it in a browser so first of all we have the node modules folder for all of the project dependencies it's pretty standard then we have the source folder which is where you'll be writing about 99 or more of your code it's in this folder you're going to make all of your components any style sheets and probably any other helper files as well any assets like images can go inside the assets folder if you want to use them in components later down the line so to begin with in this Source folder the starter project already has a few files which will run quickly through so the app.jsx file is a solid JS component and in fact it's the root component meaning it's going to sit at the very top of the component tree now at the minute inside this file we've got some imports at the top we have a component function and a a jsx template returned from that function and this template ultimately gets compiled and injected into the Dom so we can view it in a browser also notice that we export the component function and that's how we can import the component into other files later on if we need them now we're going to talk more about this file and components in general in the next lesson for now let's move on so we also have the app.module.css file which is a CSS module and that's used to apply styles that can be scoped to the app components so if we open the app component up again we can see that we actually import that CSS module and they're used to style this component the template all right so the index.css file is a global style sheet for the entire application so any Global Styles go in here the index.jsx file is the file that essentially kick-starts the whole application and it does that using the render function right here that we import from solid so we grab an element from the HTML page which coincidentally is over here outside of the source folder this is the HTML page that gets sent to the browser and if we open it up we can see that there's actually pretty much no content in it at all except this div right here with an ID of root and it's got no content in it because solid.js uses the render function we just saw to ultimately inject our templates into this div so if we go back to the index.jsx file we grab that root element from the HTML page right here and then down at the bottom of the file we use that render method to render the app component into that root element and remember the app component is that component we saw a minute ago app.jsx so we're taking that component template and we're injecting it into this root element into the HTML page we're also importing the app component up here so that we can use it in this file and we import the global index CSS file too otherwise they wouldn't take effect so after this file we also have an SVG logo that gets used in the app component we don't really need that so delete it if you want to and that's pretty much it for the source folder so far outside of that we have the HTML file we also have the git ignore file a JS config file which contains some compiler options our package files a readme and a Veet config file so that's pretty much it for the starter project overview hopefully now you've got at least a basic idea of what these different things are next up let's try and run this in the browser so to run the project open up a brand new terminal make sure you're in the root directorate ninja merch in my case then we're going to run npm run Dev and press enter so this is going to spin up a local Dev server for us which we can view at this address now and if we view that in the browser we can see we actually get an error over here and it says logo is not defined and that's to do with me actually deleting that logo file I also deleted the import inside the app.jsx file but I don't think I deleted it where we use it in the template so it's trying to use this thing right here in the source but we don't have it so let's get rid of it right here as well and save that and now in the browser we can see that works so all of this content here this is basically all of the content that was coming from that app.jsx file all of the template okay so in the next lesson we're going to talk a little bit more about components and how we can use components to build up an application