Discuss something you learned in class today or this week.

This was our final week of class and I’ve been diving deep into my capstone project. One thing that has caught my attention is figuring out how to do certain basic things but in a React way. For instance, my app has a header and a footer on each page, but using React router allows me to use a single component to render this to “each page”… The challenge here was that I wanted to mark an active page as a different color in my menu. This would be super easy with standard CSS but because I was never actually…

Discuss something you learned in class today or this week.

This week we learned how to do asynchronous API calls with thunk middleware. This is not the only option for this but is certainly a useful tool. Another popular option is Saga. The uses of thunk are described below and implementing it is actually quite easy. First, in your store.js import thunk from redux-thunk and import { createStore, applyMiddleware } from ‘redux’ and in our export default include applyMiddlware(thunk) like so: export default createStore(reducers, state, applyMiddleware(thunk)) . Next we will use the magic of dispatch in our redux/actions.js to do some asynchronous JS like an API call. …

Discuss in words something you learned in class today or this week.

Redux gives us the ability to keep all of the global state in a store as a single state tree/JS object. By using different components such as store, reducer, action, and middleware we are able to set a new state based on user interaction. It can be cumbersome to set up but gaining access to the global state is worth it.

What are “actions” in Redux?

A plain JavaScript object to keep track of the specific event taking place in the application with a ‘type’ property. This action is sent from the UI to the reducer to send a new state. …

Discuss something you learned in class today or this week.

One very useful tool I have come across is the ability to host and continuously integrate my React apps with Netlify and Github. The process is really quite simple and has become second nature after repeating it time and time again. First, make sure your project is connected to a Github repo and you have the Netlify CLI installed.

Next, we want to create a production version of our app with npm run build

Once this build is complete its time to send it over to Netlify with netlify deploy

This will bring up a series of prompts in your…

blog 404

Discuss in words something you learned in class today or this week.

Sometimes we want to hide certain routes from certain users, say if they are not logged in. To do this we will use ProtectedRoutes like so:

// Write ProtectedRoute function hereconst ProtectedRoute = ({component: Component, ...rest}) => {return (<Route{...rest}render={(props) => checkAuth()? <Component {...props} />: <Redirect to="/login" />}/>)}const Router = () => {return (<Switch><Route path="/login" component={Login} /><ProtectedRoute exact path="/" component={Home} /><ProtectedRoute path="/about" component={About} /><ProtectedRoute path="/car/:id" component={Car} /></Switch>);};

How does hoisting work in JavaScript?

A strict definition of hoisting suggests that variable and function declarations are…

Discuss in words something you learned in class today or this week.

Within a single page React app we can create routes which allow us to render any component we want with the help from React router. First, install the router…

npm i react-router-dom

Next, we will create a Router.js within our src folder and import Switch and Route from the router…

import { Switch, Route } from 'react-router'import { Home } from './Home'import { About } from './About'const Router = () => {return (<Switch>  <Route exact path="/" component={Home} />  <Route path="/about" component={About} />  <Route path="/shop/:id" component={ItemDetail}/></Switch>)}export default Router

Here, we are also…

Photo by Caspar Camille Rubin on Unsplash

Discuss in words something you learned in class today or this week.

Conditional rendering is to render something to the page if a condition is true. You can used if/else, ternary operators, or short circuit operators to do so. This is incredibly useful in conjunction with React state and is basically how we decide what the page shows when a user changes something.

What is the difference between state and props?

State is a JS object with key-value pairs and kept track of on the component level. State can be changed. Props are used to pass data between components and cannot be changed.

What is ReactDOM? What is the difference between ReactDOM and React?

ReactDOM is responsible for rendering to the page. It used to be built in to react, but…

Discuss in words something you learned in class today or this week.

We have learned many new things this week since starting to program in a new paradigm: React.js. Componentizing our code not only makes it more modular and reusable but can clean up messy code to create something more elegant as well. I am having fun with React so far and look forward to diving into it deeper and deeper.

Why/when would you use a class-based component vs a functional component?

It used to be that anytime you needed to use state then your only option was to use class-based components. Luckily, with the launch of hooks this is no longer the case. I suppose that the primary place you’d use hooks…

Photo by Diego PH on Unsplash

Can you explain the purpose of each type of HTTP Request when using a RESTful web service?

GET- The GET method requests a representation of the specified resource. Requests using GET should only retrieve data.

POST- The POST method is used to submit an entity to the specified resource, often causing a change in state or side effects on the server.

PUT- The PUT method replaces all current representations of the target resource with the request payload.

DELETE- The DELETE method deletes the specified resource.

What’s a test pyramid? How can you implement it when talking about HTTP APIs?

Write about a project you’re particularly proud of. What did you do that worked out well?

While working on my portfolio page I spent a lot of time planning out the page. From wireframes, to written copy, to creating a sitemap and some simple designs in Adobe XD, I prepared as possible before writing a single line of code. I used this planning time as the creative process and when it was time to code I was ready to get to work and didn’t need to concern myself with the details any longer. I coded this particular project faster than anything else I’ve built where I am being creative and problem-solving while coding. …

Lane Garner

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store