Vanilla JS vs REACT JS

If you're reading this, you are probably familiar with Vanilla JavaScript. You use no outside resources, just plain old JavaScript along with HTML and CSS to get the job done. What if I told you there was a different way to get the job done while using JS principles? Well there is, it's called REACT. REACT is a library that is an extension of JavaScript. There are many differences between the two but I would like like to focus on 3 for the rest of the article.

• Functions vs Components
• Parameters/Arguments vs Props
• What they Return

Functions VS Components

How do we declare a function in JavaScript? It's pretty simple.

function example(exampleParameter) {
  //example code
  return exampleParameter
}

Function Example

There a few parts to this declaration. We use the string "function" to tell the program that we are about to declare a function. Next is the function name "example". After that comes "(exampleParameter)" syntax to declare any parameters the function may have. Lastly we have the code block inside the curly brackets "{}" with a return statement.

How does this differ from a REACT component?

A REACT component has a very similar structure to a function. The main differences being that a component name is Capitalized, takes in props instead of arguments, and it returns JSX. The name is Capitalized so that the engine can tell the difference between a function and component.

function ExampleComponent({ props }) {
  return (
    <p>{props.variable1}, {props.variable2}</p>
  )
}

export default ExampleComponent;

Component Example

Parameters/Arguments vs Props

You might have noticed in the Component Example that where a function declares parameters, a component declares a props variable.

So how are they similar? They are similar in the sense that they both allocate a space where data can be passed in.

Their difference lies in the way they are passed in. With Vanilla JS you simply have to call the function and pass in the arguments. With a REACT component, the approach is different.

//App.js
import ExampleComponent from "./ExampleComponent"

function App() {
  const variable1 = "Hello";
  const variable2 = 7;

  return (
    <ExampleComponent props={variable1, variable2} />
  )

Passing Props To Component

In the example above we are passing variables into a props object. This object will hold all the props we are trying to pass to ExampleComponent component.

Now how do we get access to these props inside the ExampleComponent component? The answer lies in an earlier example:

function ExampleComponent({ props })

The component allocates space for props inside the parenthesis, which are also enclosed in curly brackets for destructuring purposes. Keep in mind that the name of the passed in prop(s) (Passing Props To Component) has to be identical to the declared prop(s) (Component Example).

Return

Another thing you might have noticed comparing the function and component example is the fact that they return different things. A function can return a lot of things, but to sum it all up, it returns a value. A component on the other hand returns JSX.

What's JSX?

JSX or JavaScript XML is an extension of JavaScript that allows you to write HTML like code. This code can be written directly into JavaScript, where it is translated back into Vanilla JavaScript by a tool like Babel before being executed.

A couple things to know about JSX:

• It allows you to mix JS expressions with JSX
• All JSX code must be engulfed by a some opening and closing tag

In the Component Example we have an example of both these!

<p>{props.variable1}, {props.variable2}</p>

The p tags at the beginning and end of the code are examples of opening and closing tags. It's done this way to allow the JS engine to clearly and easily organize all the JSX when it comes times to bring it all together.

Inside of the tags are two examples JS expressions being mixed with JSX. {props.variable1}, {props.variable2} are JS expressions holding a value. This value is then plugged into the JSX output and Voila. All thanks to curly brackets that allow this mix to happen.

Conclusion

There are a lot of other differences between the two. For instance what's up with "import" and "export default"?! Why is ComponentExample able to be returned in App.js? There are a lot of mysteries left to unravel but one thing is for sure, REACT can be a powerful tool. If you're interested in finding out more, I recommend you check out one of the links.

Importing and Exporting Components
Free React Course
REACT Website