blog 405

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 terminal. Choose ‘create and configure new site’, choose a team, and optionally enter a site name. Next we will enter the publish directory as ./build , check our sample URL, then netlify deploy--prod , ./build again, and your site should be live.

Next we need to connect it to Github. Go to the Netlify website and locate your app. Click site settings, build and deploy, link site to git, select Github. I had to alter the build command to CI= npm run build to get it working. Then click deploy site and once the build finishes, anytime you update your Github repo, it will also update the hosted site on Netlify. Super cool!

What is Redux?

Redux works with React (and other libraries/frameworks) to give us access to a global state. It can often be quite cumbersome to prop drill many levels deep especially if you’re trying to pass numerous props. This is the beauty of global state. Though it includes quite a bit of boilerplate and takes a while to set up, Redux gives us the ability to pass certain parts of state that we specify to anywhere in our app that we specify. Luckily Redux is not the only way to do this and there are a few other popular options now, namely Context and Recoil.

What is ‘Store’ in Redux?

A store is an immutable object tree in Redux. A store is a state container that holds the application’s state. Redux can have only a single store in your application. Whenever a store is created in Redux, you need to specify the reducer.

How is state changed in Redux?

State in store is read-only so we actually have to make a new copy of state each time we wish to alter it. To change state we use a combination of actions and reducers. Basically, the state is held in the store, something is triggered in the UI to change state which sends an action informing a reducer to send a new state to the store. One benefit of this pattern is that we have access to the entire history of the state of our application.

What is the difference between a Presentational component and a Container component?

A presentational component’s (also known as a dumb component) only responsibility is to present something to the DOM. Container components (or smart components) keep track of state and care about how the app works.

What is the second argument that can optionally be passed to setState and what is its purpose?

A callback function which is invoked when setState has finished and the component has re-rendered.

What is your opinion of currently popular frameworks/libraries? List and provide your thoughts.

In my studies of React so far I really enjoy working in this way. It allows me to easily do many things that would be quite cumbersome with vanilla JS. I know that Vue and Angular are other popular options and while I know very little about them, I’m thinking it may be worth my time to dive into them a little just to get a taste for what they offer.