React As a Framework Part 1: JSX and Components

The necessary jump that every software developer who’s in the process of learning is the jump/progression from Vanilla Javascript to JSX. The code snippet below is an example snippet of JSX code. Very different than your typical and bland Vanilla Javascript, but worry not! This article will give you an introduction to JSX!

import React, { Component } from "react";
import Article from "./Article"
import Comment from "./Comment"class App extends Component {
  render() {
    return (
      <div>
        <Article />
        <Comment />
      </div>
    )
  }
}export default App

JSX stand for Javascript XML and its purpose is to make it easier to write and add HTML code in React. React, in turn, compiles this code and transforms it into standard Javascript that manipulates the DOM, therefore giving us the ability to create dynamic HTML. Thus, JSX is more akin to writing HTML into Javascript versus your standard DOM manipulation where you write Javascript code into HTML. Furthermore, JSX snippets are usually separated into components and once these components are combined, you can then have a fully-functional web application!

So what is a Component?

We all know that your typical function has a snippet of code, and is executed when it is called. Therefore, like functions, components contain functions, each with snippets of code that are rendered whenever the component itself is called. In fact, the entire code snippet above is an example of a class component!! Looking at the above snippet, it seems like there is many things going on, but the most important things to keep in mind as we move forward is

1: The above component is being defined with a name of “App” like so:

class App extends Component

And 2: When we call the App component within our code, the code and functions within would run. And exactly like functions, they can be abstracted to then be called in various different situations and times.

What Makes Up a Component?

Consider a simpler rendition of the first snippet of code:

import React, { Component } from "react";class App extends Component {
  render() {
    return (
      <div>
        This is inner text for HTML div tag.
      </div>
    )
  }
}export default App

We will find that there are standard lines of code within each class component that’s created. If you’ll notice, both of the classes (the first one and the above one) are being defined as ‘App’

class App extends Component //alternate: extends React.Component

As you look at the first line, you’ll notice a strange bit of code. What this is doing is extending React’s component class by giving it access to various built in methods and attributes.

import React, { Component } from "react";

We’ll then analyze the next piece of code which will run when we call on this component.

render() {
    return (
      <div>
        This is inner text for HTML div tag.
      </div>
    )
  }

The first thing being called is the render() method. And if you want to know something cool about all components is that render() is the only method required in all class components. Inside the curly braces is what will be rendered on the webpage!! Additionally, we are explicitly stating what we want returned, which in this example is the <div> element and its inner text. We are letting React know that when this class component is called that we want to add what is rendered to the DOM. And one amazing quality about React is that it takes care of all of this without us having to code further!

Finally, if you look at the bottom of the component, you will notice the following line of code:

export default App

Just like we imported the component class from react in the first line, with the above, we are allowing other files to be able to import our App class. For example, if you call on this component within other files, you’ll be able to render its content and export the entire class.

How Do You Call and Render a Component?

With DOM manipulation using vanilla Javascript, you wrote your code in an index.js file. This in turn required you to use a <script> source within your HTML template.

By default, React also runs code from index.js, but the code will look like this instead:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";ReactDOM.render(<App />, document.getElementById("root"));

As you’ll notice there are four lines of code importing things. By importing React and ReactDOM, we are enabling all the various methods that React uses to recognize JSX. You’ll then notice that a CSS file is being imported; this will be used to style our web page the way we want it! Then you’ll see that the App component is being imported. In this example, since we’ve only created our App component it will be considered the “top-level” component of our web application. The last line is doing just that:

ReactDOM.render(<App />, document.getElementById("root"));

When the render() method is being called on ReactDOM, we are specifying what will be rendered and where. In the first argument, we are calling on the App component. With the second argument we are saying where it will be rendered, which in this case will be within the ‘root’ element in your HTML template! Finally, as you start up your React server, you’ll notice that your webpage will have rendered whatever you have inside your App class!

render() {
    return (
      <div>
        This is inner text for HTML div tag.
      </div>
    )
  }

When executed, you will see that React took this code and manipulated the DOM for us so that it automatically appears on you webpage!.

Conclusion

You just learned the basics of React, JSX and Components! Pat yourself on the back because in the next article we will be diving deeper into this topic!