The final frontier… for now.
This week starts the final section of this bootcamp. It’s exciting and scary at the same time. Even though I’m almost done learning what Austin Coding Academy has to teach me, there is still no end the learning that can, and probably will, happen. If I haven’t been struggling with imposter syndrome yet, then I’m sure it’s a matter of time.
To start things off, I’ve been asked to write about something I’ve learned this week “in words”. Luckily, words are the best way to write about things. But most importantly, I’ve learned a good amount of React.js basics. It’s been more challenging to wrap my head around React than anything else I’ve learned so far. It’s familiar and unfamiliar at the same time. I see what I’m trying to do but struggling to understand how. Each project and tutorial I work on helps break it down. And I’m slowly able to do more and more with React that I didn’t think I could. The potential of the language is there. I just need to learn to reach it.
Class and functional components in React.js both accomplish the same goal. But they do it differently. Their differences start with the syntax. The class component extends and React.Component and has things like constructors, state, methods, and lifecycle methods. And even though a functional component can access all those things, it does it in a very different way. How props are passed down can be very different as well. It calls state using an imported useState function. It’s written with variables and functions to call methods. And it’s lifecycle is also called with imported functions like useEffect. Right now, functional components are best used when you have a component that doesn’t rely on its state as heavily to render its methods. A class component can manage a long list of state values a little more cleanly. But the way that React is moving, functional components are the way to go for the future of this language. When written right, there isn’t anything a class component can do that a functional component can’t.
The create-react-app is a very helpful npx package when creating React apps. First off, npx is a little different from npm in the command prompt. Npm will install a package to your project folder. But npx will execute a package instead of just installing it. React is a package that should be executed. Running npx create-react-app ‘app name’ will execute the install process and create a new project folder with everything needed to start a React application. All of the packages, sub-folders, dependencies, scripts, and basic code needed to get started will be there. It takes away all the extra work to create the basic framework so you can get started right away. It will involve deleting a couple lines of code. It creates a working page with a spinning logo and a link to Reacts’ homepage. But your ready to go in a minute or two.
React has its own syntax called JSX. JSX is a JavaScript Extension Language. Meaning that it is JavaScript, but it’s not. It adds to JavaScript and is written into a JavaScript file. But, by itself, a browser doesn’t recognize it as JavaScript. It needs to be compiled into something the browser can read before it will work. That’s why the start of every React file needs to import ‘react’. JSX itself looks like a blending of JavaScript and HTML. You create nested HTML elements in the return of the component and those elements are rendered into your app. But there are more than the HTML elements that can be put into the JSX return. With the right syntax, you can add another React component in the middle of the HTML. And the component can pass down props and methods. JSX can also access the values of the components state with a this.state written inside curly brackets. Like I said, it looks familiar and unfamiliar.
React works in a very different way compared to anything else I’ve learned so far. But it’s also not too hard of a concept to follow. In many ways, it’s a CRUD app. It creates components, reads its state, updates when something changes, and deletes components when they are no longer needed. These components can only be built in a nested structure. There is one main component, usually called app.js, that gets rendered into an HTML element on you page. App.js can have JSX and components render inside it. And they can have JSX and components render inside them. And so on. But each component can only return a single parent element. So everything must be nested. Then it can watch for a change in the state or component and rerender only the component that changed instead of the whole page. This is what makes React so fast and scalable.
How does it do that you might ask? Well, it’s done by using a virtual DOM. This is a lot like the browsers DOM but it only exists for React. What happens is that React creates a virtual copy of the DOM and watches it. When something changes the state of a component, it will update the virtual DOM but only the part that changes, it then replaces that same part in the browsers DOM. So instead or reloading the page every time something changes, it only reloads the change itself.
Element and component seem like they could be interchangeable terms. But they are not with React. A component is the class or function that can return a JSX element. Think of the component like the creator of an element. Even though a component can be part of an element, that component then creates its own element.
