Introduction to React and JSX

React is a JavaScript library. It lets you compose complex user interfaces from small, isolated and reusable pieces of code called components.

To give you a basic example of what it looks like:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

 

A basic unit of JSX is called a JSX element.

Here’s an example of a JSX element:

<h1>Hello, world!</h1>

You might think it is just regular HTML, but that’s not really the case, it is actually a syntax extension to JavaScript, introduced by Facebook.

JSX elements are treated as JavaScript expressions. They can go anywhere that JavaScript expressions can go.

That means that a JSX element can be saved in a variable, passed to a function, stored in an object or array…etc.

Here’s an example of what that looks like:

const element = <h1>Hello, world!</h1>;

JSX elements can have attributes, just like HTML elements can, using HTML-like syntax:

const element = <h1 id="title">Hello, world!</h1>;

While React doesn’t actually require using JSX, a lot of people find it really visually useful, as it describes what the UI should look like. And in my opinion, it is a sight for sore eyes! Finally something that looks familiar!

JSX breaks up your code into units called “components”, defined as classes or functions (classes provide more features).

To define a React component class, you need to extend React.Component:

class Welcome extends React.Component {
  render() {
    return <h1>Hello Stranger</h1>;
  }
}

 

Somewhere in your HTML file, you’ll have a div with an id of “root”, inside of which everything will be managed by ReactDOM.

You then just need to render (make it appear onscreen) your element as such:

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

ReactDOM.render()takes a JSX expression, creates a corresponding tree of DOM nodes, and adds that tree to the DOM.

 

JSX elements can also have event listeners:

<img onClick={myFunc} />

The event listener attribute’s value should be a function that’s been defined elsewhere in the code.

Another cool thing to know is that JSX can sometimes also be used with if statements and for loops (as long as it’s not injected in between JSX tags):

if (coinToss() === 'heads') {
  img = (
    <img src={pics.kitty} />
  );
} else {
  img = ( 
    <img src={pics.doggy} />
  );
}
}

 

Since JSX is not a natural part of JavaScript, it requires the use of a transpiler, such as Babel, to translate it into regular JavaScript.

Important things to remember:

  • Attributes with a “-” in their names will have to use camelCase instead: “interactive-media” therefore becomes “interactiveMedia”
  • Tags that can remained unclosed in HTML need to be closed in JSX (for example <br/> and <img/>)
  • As JSX gets translated into JavaScript, some words cannot be used as they are already reserved: for example class will have to be className and for becomes htmlFor
  • When using JavaScript in JSX, always place it within curly braces:
const element = <h1>{2 + 3}</h1>;
  • Component names always start with a capital letter
  • The render() method is the only required method in a class component.
  • If a JSX expression takes up more than one line, then you must wrap the multi-line JSX expression in parentheses.
  • A JSX expression must have exactly one outermost element. If you notice that a JSX expression has multiple outer elements, just wrap the JSX expression in a <div></div>

 

I would advise you to read this article, which explains really well what JSX is.

One thought on “Introduction to React and JSX

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s