Über-beginner Introduction to React (pt.1)
So you’re finally deciding to dive into React? Awesome! Though, if were like me then you probably noticed the plethora of examples and tutorials out there aren’t really aimed at absolute beginners. So my goal with these articles is to go over the bare basics of React… enough to give you the confidence and the skills to start your venture into the wonderful world of React. By the end of these series of articles you should understand:
- Class Components
- Function Components
- State
- Props
- JSX
However; this article in particular is going to focus on the following:
- Importing React
- Rendering strings to the browser
- Rendering JSX to the browser
- Executing JavaScript inside JSX
- Creating your first reusable React component
That’s it! Like I said, very basic. Let’s get going.
Note: I am going to be using https://codesandbox.io as my IDE for these examples. The react template they provide is based off the Create React App (CRA) package. I recommend this package for your own React work as well.
Let’s start from here. Pretty simple, we’ve only got 2 things going on.
First, we are importing the two React packages which will be needed to do the basic React thing, which is render something to the screen using jsx.
Second, we are using plain old JavaScript to get a reference to an element in our HTML. The element in this case is the root element, which you can find under the public/index.html file of the sandbox (or CRA template).
This is pretty unimaginative though, so let’s write something to the screen!
With this one line, we’ve written our first React app!
ReactDOM.render("hello", rootElement);We can do even better than that though.
Interesting… we just wrote HTML in our JavaScript? Yep! This is JSX, and it’s a template language which React can utilize to help keep your JavaScript and HTML in one component, together. This may sound odd, as you’d typically want to keep them separated so you can work on one without affecting the other. However; with modern web development the idea of writing smaller components is the new trend. If we write a small little piece of reusable HTML, we can now package its accompanying JavaScript right there with it and keep them together as one unit of work. Trust me, it makes things a lot easier when you find yourself writing your 50th component, and not having to dig through hundreds of lines of HTML to find it.
Let’s expand on this JSX concept a little further. Not only can we write what looks like HTML in our JavaScript, but we can also render JavaScript objects that return JSX. Look at the following example.
So now we’ve taken that inline JSX, and moved it to a constant variable outside of the render call. But can we take it a step further? What if we wanted to put this inside a full-fledged JavaScript object?
Pretty awesome, right? Armed with the knowledge of the ability for React to render any object, as long as it returns JSX, you can imagine the possibilities. You can have objects that make API calls, put the results in JSX, return that, and render it with React. You can have objects that import third party JavaScript libraries to generate charting data or 3D models or complete games, wrap them in JSX (somehow), and return that, and poof! You’ve just converted what would normally be a pain to reuse across different views of your app into a reusable React component.
Let’s see what else we can do knowing that we can write normal JavaScript objects (so long as they return JSX).
Here we’ve added an embedded function inside of our component called sum, which simply adds two variables together and returns the result. Then, we whipped up a quick <div> in our JSX, and placed a call to our sum function inside it. We can do this with JSX because like I said before, JSX gives you the ability to write HTML and JavaScript together. The syntax to reference literal JavaScript code inside the JSX must be wrapped with curcly braces { }'s. If we forgot to use the wrapping curly braces then our component would simply return the string sum(40, 2) and render it to the screen. Placing the curly braces around it tells the renderer to execute this block of code using JavaScript and put the result in this exact location in the markup.
Up until now we’ve only been rendering one component’s JSX output… but just like with a component’s JSX, where we could return as much as we wanted, we can do the same inside the ReactDOM.render(...) function.
Ok that’s actually pretty cool. Sure we only wrote 42 to the screen a handful of times, but the fact that we can render multiple React components together? You could create a bunch of different components that each display their own content, and place them all under the same parent <div> if you wanted.
Honestly, it may not seem like much, but we’ve gone over quite a fair bit. I think this is a good breaking point that leads into the next article of Function Components and Class Components. I hope this was a light bulb moment to some of you and something new with the basics of React clicked in your brain.
See you later!
