Fullstack Bootcamp - React with ACA

Photo by Robert Anasch on Unsplash

I’ve been keeping this blog for months now, answering questions and helping myself to understand the nuances of Javascript and web development. I’ll not delay this train any longer, here’s ACA 400 after class questions #1.

What’s something you learned in class this week.

Well, there’s a lot! The most prominent that jumps out in my mind is the use of the render() function in React. It contains what your React components add into the DOM.

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

The biggest advantage to a class-based component is its ability to have a local state. Short and sweet, if you want a component to contain its own data use a class based component. If the component doesn’t need a state, use the functional component.

What is create-react-app?

create-react-app is 1/3 of the npx command:

npx create-react-app app-name-here

This command will create a folder with the name you provide that puts together the boilerplate for a functioning React app.

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

As outlined above, the biggest is the ability to have localized state or not. The rest of the semantic differences can be read about here in the React documentation.

What is JSX?

JSX is a syntax extension to JavaScript. It allows us to produce React “elements” which can be used in our renders to the DOM.

How does React work?

Whoof… okay, this is gonna take some explaining. You want me to walk you through the documentation or…

Just kidding, I’m being snarky. I’ll try to explain in layman's terms without just regurgitating what reactjs.org says:

At its core React is state based, data driven, website development. The simplest example of a react “app” is this:

ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);

The above assumes some basic knowledge of JavaScript and HTML but here’s what’s happening.

ReactDOM library is using the function .render() to add <h1>Hello, world!</h1> to the DOM at the element with the ID of root.

This is a more or less useless example of React, you might be thinking why not just add <h1>Hello, world!</h1> directly to the DOM in an HTML file?

Well, that’s where React begins getting more involved and the abstraction becomes useful. Once we add REACTivity by binding data to the JSX syntax things start snowballing and the usefulness of React will increase your workflow by days!

How does the virtual DOM work in React?

It’s the concept that there is a DOM in memory and a DOM being displayed to the user. Whenever a change is made the “virtual” DOM keeps the real DOM up to date.

Which (if there is) node library method could you use to solve the algorithm problem you solved last night in your pre-homework?

Uhh, this question couldn’t be more vague… Why couldn’t the algorithm be put IN the question? I haven’t got the slightest idea what this question is referring to.

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

An “element” in react might look like this, they hold no reactivity of their own but can include reactivity with the {} syntax. This syntax embeds any javascript expression, or function, or variable by the same name.

const myName = 'Sean';
const myElement = <h1>Hello, world! I'm {myName}</h1>;

Components are much more verbose and useful, often containing elements and using elements to construct their functionality.

A “functional” component might look like this:

function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

and a Class component like this

class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}

If React we’re a house, think of elements as the furniture in the home, and components as the rooms. It’s a weird thought but helps me understand better!

Thanks as always,

Sean

Austin Coding Academy

--

--

--

Comics artist and web developer located in Austin, TX telling stories and making up fantasy worlds for fun.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Selector Pattern: Painless Redux Store Destructuring

My Journey in Learning Javascript(a computer language)

Make professional mobile apps with React Native and Typescript — Routing and navigation

Singly Linked Lists: Data Structures in JavaScript and ES6 (Part 1)

NodeJS, The Open Source Server-Side…

The Hidden Complexity of Software Development

Splunk: Where Command

A Guide for RESTful APIs with Node, Sequelize & Postgres

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
Sean Yager

Sean Yager

Comics artist and web developer located in Austin, TX telling stories and making up fantasy worlds for fun.

More from Medium

EmojiScript: A Quick Guide to Emojis in JavaScript

Setting up a React.js Application

React application inside Visual Studio Code

JavaScript concepts you need to know as a JavaScript programmer!

React Hooks (useState and useEffect) Concepts In-depth