Getting Started with React and JSX
Tags: react, webdev, programming, javascript
Published: 2021-01-20 23:06:07

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

React is a library for creating front end views. It has a big ecosystem of libraries that work with it. Also, we can use it to enhance existing apps.

In this article, we’ll look at how to create simple apps with React.

Getting Started
===============

The easiest way to create a React app is to use the Create React App Node package.

We can run it by running:

```
npx create-react-app my-app
```

Then we can go to the `my-app` and run the app by running:

```
cd my-app  
npm start
```

Create React App is useful for creating a single-page app.

React apps don’t handle any backend logic or databases.

We can use `npm run build` to build the app to create the built app for production.

Creating Our First React App
============================

Once we ran Create React App as we did above, we can create our first app. To create it, we go into `App.js` and then start changing the code there.

To make writing our app easy, we’ll use JSX to do it. It’s a language that resembles HTML, but it’s actually just syntactic sugar on top of JavaScript.

Therefore, we’ll use the usual JavaScript constructs in JSX.

We’ll start by creating a Hello World app. To do this, we replace what’s there with the following in `index.js`:

```
import React from "react";  
import ReactDOM from "react-dom";

function App() {  
  return (  
    <div>  
      <h1>Hello World</h1>  
    </div>  
  );  
}

const rootElement = document.getElementById("root");  
ReactDOM.render(<App />, rootElement);
```

In the code above, we have the `App` component, which is just a function. It returns:

```
<div>  
  <h1>Hello World</h1>  
</div>
```

which is our JSX code to display Hello World. `h1` is a heading and `div` is a div element.

The code above looks like HTML, but it’s actually JSX.

What we have above is a function-based component since the component is written as a function.

In the last 2 lines, we get the element with ID `root` from `public/index.html` and put our `App` component inside it.

Another way to write the code above is to write:

```
import React from "react";  
import ReactDOM from "react-dom";

class App extends React.Component {  
  render() {  
    return (  
      <div>  
        <h1>Hello World</h1>  
      </div>  
    );  
  }  
}

const rootElement = document.getElementById("root");  
ReactDOM.render(<App />, rootElement);
```

The code above is a class-based component, which has a `render` method to render the same JSX code into HTML.

The difference between the 2 examples is that one is a function and the other is a class that extends `React.Component` .

Otherwise, they’re the same. Any component file has to include:

```
import React from "react";  
import ReactDOM from "react-dom";
```

Otherwise, we’ll get an error.

React doesn’t require JSX, it’s just much more convenient to use it. A third way to create a Hello World app is to use the `React.createElement` method.

We can use the method as follows:

```
import React from "react";  
import ReactDOM from "react-dom";

const e = React.createElement;  
const App = e("h1", {}, "Hello World");

const rootElement = document.getElementById("root");  
ReactDOM.render(App, rootElement);
```

The first argument of the `createElement` method is the tag name as a string, the second argument has the props, which are objects that we pass to the component created, and the third argument is the inner text of them element.

We won’t be using this very often since it’ll get very complex if we have to nest components and adding interaction.


Embedding Expressions in JSX
============================

We can embed JavaScript expressions between curly braces. For example, we can write:

```
import React from "react";  
import ReactDOM from "react-dom";  
function App() {  
  const greeting = "Hello World";  
  return (  
    <div>  
      <h1>{greeting}</h1>  
    </div>  
  );  
}  
const rootElement = document.getElementById("root");  
ReactDOM.render(<App />, rootElement);
```

Then we see Hello World on the screen again.

Something more useful world calling a function as follows:

```
import React from "react";  
import ReactDOM from "react-dom";  
function App() {  
  const formatName = user => {  
    return `${user.firstName} ${user.lastName}`;  
  }; 

  const user = {  
    firstName: "Jane",  
    lastName: "Smith"  
  }; 

  return (  
    <div>  
      <h1>{formatName(user)}</h1>  
    </div>  
  );  
}  
const rootElement = document.getElementById("root");  
ReactDOM.render(<App />, rootElement);
```

In the code above, we defined a `formatName` function inside the `App` component that takes a `user` object and returns `user.firstName` and `user.lastName` joined together.

Then we defined a `user` object with those properties and called the function inside the curly braces.

Whatever’s return will be displayed between the braces. In this case, it’ll be Jane Smith.

Conclusion
==========

We can create a React app with the Create React App Node package.

Then we can add components as a function, class, or with `React.createElement` .

The first 2 ways are used most often since they return JSX in the function or the `render` method of the component class respectively.

JSX is much more convenient than `createElement` for writing JavaScript code with React, especially when our app gets complex.

We can embed JavaScript expressions in between curly braces.