What is React?
I recently had a mock technical interview at Skilled to help me prepare for future technical coding interviews as I go through my job search. It helped expose some gaps in my knowledge about React and point me towards somethings I need to learn. But what I also learned from it was that I need to be clearer in my understanding of the technology I was using. Often, when I was asked a question by my interviewer, I was able to describe the mechanism or give an example of it working but my knowledge was not complete. When I answered those questions I felt like I knew the answer but was unable to put it into a concise cohesive answer. Every answer I gave felt like I should have added more information but I also felt like I should have done less talking to relay the information. I’m going to finally arrive at the point of the title and why you probably clicked on this link while simultaneously proving my previous point and need for growth by this unnecessarily long paragraph.
What is React? I know how to use it and yet I find it difficult to describe, which is a problem. I want to be able to use React in my next job but if I fail to describe it during the interview I may be eliminated from the list of eligible candidates. A greater understanding will not only help me during the interview process, it will help me understand the mechanics of React in a more complete way, making me a more competent programmer.
I’ve decided to get into the details of React in order more gain a more complete understanding. I’m going to go through a couple things at a time research them until I feel confident enough that I can teach YOU. This may turn into a series and my goal is to not only learn these concept myself but to put them into a learnable format for other programmers so we can all benefit.
Ok finally Chip, what is React?
On the React website it defines React as “A JavaScript library for building user interfaces.” What does that actually mean? Well, JavaScript is a coding language used to program the behavior of web pages (more info here). If you’ve done any front-end work you should be familiar with JavaScript, but what exactly is meant by library? In this case it means a collection of prewritten code snippets that can be used and reused to perform common JavaScript functions. Having used React this makes total sense, but if I was asked to define React before doing a bit of research my answer would have been jumbled and unclear. So, what’s next?
What’s the difference between a ‘library’ and a ‘framework’?
JavaScript libraries, like React and JQuery, contain prewritten code snippets that provide tools for building webpages for on demand use. Imagine your making a peanut butter and jelly sandwich, you only need a couple of ingredients and tools to accomplish your task. Libraries allow you to just use what you need to get the job done. This doesn’t mean that you’re limited to only making PB&Js, it just means you don’t need a cheese grater in your sandwich making application. Frameworks provide all of the tools up front, everything that you need is available from the beginning. Frameworks, like Vue JS and Angular, give your application a structure and set of rules to follow. The strength of a library is being able to get what you need when you need it, they allow for freedom in design. The strength of frameworks is that their structure increases efficiency and organization, the cost is flexibility due to the strict rules.
What is JSX?
Now that we’ve defined React, what do we call what we write in React? As you may have guessed by the subtheader it’s called JSX but what does that actually mean? Well it’s not JavaScript 10, sorry Apple. JSX stands for JavaScript XML and it’s a XML-like syntax extension to ECMAScript. It provides syntactic sugar for the React.createElement() function, giving us expressiveness of JavaScript along with HTML like template syntax.
The example given on the React site is very helpful for demonstrating this. Notice that in the example below, first we declare a variable called name and then use it inside JSX by wrapping it in curly braces. This allows us to return the element variable containing an <h1> tag to the render function.
const name = 'Josh Perez'
const element = <h1>Hello, {name}</h1>ReactDOM.render(
element,
document.getElementById('root')
)
React has some great examples on their site if it’s still a little unclear as to what is going on, check them out here.
I think this is a good place to stop for now. With a better idea of what React in and what we’re writing is called and what it can do, in its most basic sense, I think we have a good foundation for moving forward. Feel free to follow me if you’d like to stay up to date on this, I’ll be diving deeper next week so be sure to come back and check that out. Have a good one and keep coding!
