Three Days Into Learning React: Here’s What Sunk In
A quick overview of basic features and concepts in React
As a coding bootcamp student, I am constantly having information drilled into my head in a very restricted amount of time. Subsequently, I’m always trying to utilize efficient ways of not only retaining information, but effectively using that new found knowledge to level up my coding skills.
So I figured I’d go over a topic that’s fresh in my mind, and hopefully that’ll help it to stick a bit better. The most recent tool being drilled into my head this week is the popular frontend framework React. So let’s get into what React is, some concepts I’ve learned about it in the last three days, and what I’m excited to explore in the coming days after.
What is React?
If you’re familiar with writing vanilla Javascript, you’re probably aware of how complex creating the frontend of a web application can get. And while creating a user interface in vanilla Javascript is great, it can be rather cumbersome and time consuming the more complex your application becomes.
So, of course, various members of the tech community responded to this by creating frameworks to structure and organize the design of web applications. React being one of the most popular.
In a nut shell, React is a Javascript library created by Facebook, and is used as a framework for building user interfaces. React allows you to organize and structure your code using components (we’ll get to what these are in a bit) usually made up of pieces of JSX code. When these components are combined, they ultimately make up a full web application.
A Few Cool Features React Includes
Declarative Writing Structure: express how you want your application to look in a simple and straightforward manner, and React will take care of the heavy lifting (handling data changes and updates) under the hood.
Virtual DOM: keeps a virtual representation of the UI in memory, and syncs it with the actual DOM when changes are made. This allows for faster, more efficient content rendering.
Webpack: a module bundler that packages all your code, including any required dependency code, into a single transferable bundle. It’s not exactly included with React, but is very useful when making your React web apps.
JSX?
Well, let’s just say if HTML and Javascript had a baby, it’d look like JSX. It’s sort of like writing out HTML elements that are able to directly take in Javascript and other dynamic content. JSX actually stands for Javascript XML and is a syntax extension of JavaScript that allows for a more declarative style of programming.
This style of programming allows for a more expressive and, in a lot of cases, less time consuming way to write our Javascript code. Let’s take a look at the syntax:
In this example, you can see that we’re able to use a React property directly in the HTML div tag, as long as they’re put in curly braces. Compare this to using just Javascript with React:
I think most would agree that the JSX way of implementing this component is much cleaner. But how is React able to use this very modern JSX code on older JS engines? That’s where Babel comes in.
What’s Babel?
Babel is what some would refer to as a transpiler. It basically converts modern Javascript and custom code like JSX into a backward compatible version of Javascript that can be run by older Javascript engines.
Essentially, it’d convert the first example of our JSX implemented component into our second Javascript implemented component. If you want to play around with JSX conversion, Babel has its own REPL you can use. Here’s another side by side look at how Babel conversion works:
Okay, now that we’ve gotten the JSX and Babel talk out the way, let’s get into some of the meat and potatoes of React. Namely components and props.
What Are Components Exactly?
In the React documentation, you’ll see that React is described as a component-based library. And when it comes down to it, just about everything in a React application is formed within a component. But what are they even?
Components allow you split the user interface into independent, reusable pieces, which give you the ability to think about each piece in isolation. Components take in input data and renders the data using a render() function that return what should be display in the DOM.
Assuming that was the first time you’ve heard about components, that was probably a lot to take in. Let check out this wireframe to get a better understanding of how these components would come together in a web application. Each colored box represents a different component.
Notice how there are components inside of other components. This is because in React we’re able to form each section of our UI out of these isolated pieces of code.
Not only that, but notice how some components have the same color coding. This is because components are also reusable pieces of code, providing us an overall more efficient and organized way of building out our web apps as well.
Alrighty then, let’s start breaking down our React code from earlier!
Our component example is pretty simple. It’s of a React component called HelloMessage, and renders our return value to the DOM, our return value being a div that says “Hello <insert name>”. In our case, the name that will be displayed is “Taylor”.
We then call our HelloMessage component in this notation <HelloMessage /> to be rendered through ReactDOM, and tell the ReactDOM to place it within the DOM element who’s ID is equal ‘hello-example’ .
This is also a class implementation of a component, but you can also implement this as a function. Here’s a cool blog comparing the two.
And Props Are..?
I see you’ve noticed that to access the name associated with our HelloMessage call, “Taylor”, we need to write this.props.name . Props stand for properties, and are basically attributes associated with our components.
With props, we’re able to pass in all types of data like strings, objects, and that even includes functions. As a result, our components become more dynamic and reusable without having to hardcode our data for every component.
Conclusion
Although it’s only been a few days, and the concepts I’ve gone over in this blog don’t even scratch the surface of React as a whole, I can already tell that React is going to be an incredibly powerful tool in my coding arsenal.
With concepts like event handling, forms, lifecycle methods waiting to be tackled, I must say I’ve got my work cut out for me over these next few weeks. But I’ve got it admit it’s pretty exciting.
