blog 401

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 in modern React code is if you are using someone else’s component.. but even then its probably advisable to use class-based components now that we have hooks!

What is create-react-app?

An npm package that helps us to quickly create a React project. This is not our only option and The React team primarily recommends these solutions:

• If you’re learning React or creating a new single-page app, use Create React App.
• If you’re building a server-rendered website with Node.js, try Next.js.
• If you’re building a static content-oriented website, try Gatsby.
• If you’re building a component library or integrating with an existing codebase, try More Flexible Toolchains.

What are the differences between a class component and a functional component?

Class-based components used to be the only way to use hooks, but now that we have hooks we can use class with functional components. So the answer to this question at this point is: class-based components have a bunch of extra stuff you have to type and you have to worry about binding this, blah blah blah. Don’t use class-based components, use functional components. 😉

What is JSX?

JSX stands for JavaScript XML and is a way to write HTML like elements (really its XML…) right into our JS. Once you get the hang of React, JSX is a magic tool that allows us to render things dynamically all over our apps.

How does React work? How does the virtual DOM work in React?

We create components that render all of the parts of the page and then react injects them into a single div in our HTML. React utilizes a virtual DOM that listens for changes on the page and then re-renders only those parts.

What’s the difference between an element and a component in React?

An element represents a DOM node and is used within a component to render what you want to see on the screen.