Caleb Morales - Portfolio

     Routing with React is easy, but it took me a little while to get used to. I've included a code snippet of my page that handles routing, and I'll show off how I reference my router further down. On my site, when routing between 'pages', only the content section will change, the header and navigation bar will note change, so really we are just routing between which component will display. In the below code, we import Router, Switch and Route from react-router-dom. We also import ProtectedRoute, that's some Auth0 stuff that won't allow you to access a site unless you are logged in. It's not really my code, but you can learn about it here .      So our Switch contains a bunch of routes, each route has a path (the link that you'll find in the browser) and the component that will display. The path can contain a slug or id, which can then be accessed by the component! That way when you click a project it'll send that slug to the component, which will u...

      Styling in React is as simple as CSS, which is basically all it is. You can create separate CSS files to hold your CSS, or you can use in-line styling. You can even put your CSS in your JavaScript files, which can sometimes be an excellent way to further isolate your code into components. My portfolio is a relatively small project, so I opted to put my styles in a separate CSS file, but I found some nice ways to organize it.     My CSS here is organized by component, with the class name being the name of the component. I indent each different element that will be affected to ensure similar things are with similar things. Outside of the organization, the CSS isn't anything too special. Inline styles are not recommended in general, since they can make your code more difficult to read. All of this CSS makes my front page look like this:     If you want to check out the code, it's here .

      So I've mostly finished my portfolio in Blazor (there is a kink to work out with Auth0 and GitHub Pages, but it's mostly there!), and now I'm building a front-end in React. The more I've worked with React so far, the more I've liked it. Being able to isolate your code into components and see your work gradually appear without breaking the rest of your code is satisfying, and while JavaScript sometimes feels like someone spilled a programming language, it's actually very easy to code in. The most challenging aspect of code so far has been getting a list of objects from my API. I say challenging, but once I found the solution it was actually very very easy.     The API call is made easy with Axios, the heavy lifting in on line 7 and 8. We simply reach out to the endpoint and pull the data out of the response. Boom, list of projects. I found that the more complicated part of this came from when I needed to actually display those projects. The asynch...

      I've had quite a time trying to code things in TypeScript with React, somehow I thought it would have been so much simpler. This is a blog about my experience as I learn, so I won't be afraid to admit that I've had a difficult time trying to build a relatively simple program in React using TypeScript. Many things are very similar to classic JavaScript, but I've especially had a hard time trying to get data from an API. Currently, every time I make my API call I get errors relating to how a promise is unfulfilled. I am awaiting my response and getting it's data before I do anything with it, but it seems like the await doesn't actually do anything at all.     I am trying to rebuild the simple GitHub Cards app that I built while I was learning React. In React I never had any issues with promise fulfillment, since the awaits seemed to work exactly as I expected. With TypeScript, it took me a while to figure out how to pass a function down to a compon...