React and JSX: my reminders

In my latest blog I described my quest how to get started with React. In the end I purchased the ‘React for beginners’ videos and simply started watching.

Make notes while watching videos

As there is one thing I definitely learned long ago at college, it is to make notes. While listening to a lecturer or a video, everything seems very clear and understandable. This is probably due to the context: A good lecture is setup in a way that it is easy to follow and new things are introduced using great examples. During a lecture it seems both dull and a waste of time to make notes.

But a few days later, those notes and the things you think you heard during the lecture are the only thing remaining. Concepts that were very clear at the time of the lecture become quite difficult. I think it is because you miss the context of the lecture there.

The bottom line here is that I made notes when the React ‘templating language’ JSX was introduced. As a reminder for myself I wrote all special JSX syntax at the back of my notebook and since then I have been taking a look at it more often than I would think.

Introduction to JSX

Let’s start with a little introduction to JSX and I’ll end this post with my shortlist of things to remember about it.

In the past we learned to ‘separate concerns’ and write all markup (HTML), styling (CSS) and client-side interaction (Javascript) in separate files. React however, breaks with this tradition. Since it is based on components (a component is a self contained package of code that does one specific thing), the markup and interaction are all inside the same file. Some argue that also the styling should be inline, others disagree.

To write markup in Javascript, React uses JSX. From the official React page it is defined as

JSX is a JavaScript syntax extension that looks similar to XML. You can use a simple JSX syntactic transform with React.

You definitely don’t need to use JSX, but after reading starting with React without JSX, it seems much easier to just embrace JSX as it makes life easier!

Some example code please

As an example I made a component that renders a form. Submission of the form is outside the scope of this article, we only focus on the markup here:

var MyForm = React.createClass({
  render: function() {
    var myValue = this.props.myValue;
    return ( < div className = "container" > { /* This is a really simple form */ } < form >
      < p > A simple login form! < /p> < label > Username: < /label>< input type = "text"
      ref = "textId"
      defaultValue = {
        myValue
      }
      />  < br / >
      < label > Password: < /label>< input type = "password" / > < /form> < /div >
    )
  }
});

JSX reminder list

  • Use className instead of class to define a class on some HTML. You can’t use class since it is a preserved keyword in Javascript.
  • Self closing HTML tags (such as inputs) should be properly closed: <input type=”text” name=”test” />. Although this was no longer needed in HTML5, it is unfortunately in React.
  • Use defaultValue instead of value to define an initial value on an input tag. Again because value is a preserved keyword in Javasript.
  • A piece of JSX should only return one element. JSX is a bit like XML with its tree like structure. If you like to return two <div> elements, wrap them in a single parent <div> and you are good to go.
  • If your JSX is on multiple lines you need brackets around the JSX.
  • When writing a form from which you like to use the actual input in another function use ‘ref’ attributes to be able to reference these inputs later on. In the other function you can use this.refs.id when your JSX looks like <input type=”text” ref=”id”/>
  • Print Javascript variables in JSX using curly brackets: var a = 13.5; Print this variable in JSX with {a}.
  • Comments within JSX are also possible. Use curly brackets around the commneted part: { /* This is commented text */ }

Concluding remark

I hope this shortlist with reminders for JSX will be as helpful to you as it is for me!


Mijn Twitter profiel Mijn Facebook profiel
Pim Hooghiemstra Webdeveloper and founder of PLint-sites. Loves to build complex webapplications using Vue and Laravel! Latest post
Laravel-mix and the spread operator

Leave a Reply

Your email address will not be published. Required fields are marked *