Advertisement
  1. Code
  2. React
Code

Using JSX and React

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Getting Starting with React.
Data Persistence and Sessions With React
Final product image
What You'll Be Creating

JSX is similar to a mix of XML and HTML. You use JSX within React code to easily create components for your apps. JSX transforms into JavaScript when React compiles the code.

The beauty of React is that you can create reusable code and easily structure your app from a component-based mindset. Finally, the gap between mocking up wireframes of semantically formed ideas and implementing them has never been closer.

Your First Taste of JSX

Here is an example of JSX being used to render HTML:

To create a component, just use a local variable that starts with an upper-case letter, e.g.:

Note: There are reserved words in JSX, as it is essentially JavaScript after all—so keywords such as class and for are discouraged as attribute names. Instead, React components expect the React property names such as className and htmlFor, for example.

Nesting Tags

Specify children inside your JSX as so:

Testing JSX

Use the Babel REPL to test out JSX.

Sub-Components and Namespaces

Form creation is easy with JSX and sub-components, for example:

To make this work, you must create the sub-components as attributes of the main component:

Expressions

To use some JavaScript to create a result for use in an attribute value, React just needs you to wrap it in {} curly braces like so:

You can also just pass a boolean value for form attributes such as disabled, checked and so on. These values can also be hardcoded if you like by just writing plain HTML.

Spread Attributes

When you want to set multiple attributes, ensure you do this on declaration of your component and never after. Later declaration becomes a dangerous anti-pattern that means you could possibly not have the property data until much later in execution.

Add multiple properties to your component as so, using ES6’s new ... spread operator.

Comments in JSX

You can use both the // and /* ... */ multi-line style comments inside your JSX. For example:

Common Pitfalls With JSX

There are a few things that can confuse some people with JSX, for example when adding attributes to native HTML elements that do not exist in the HTML specification.

React will not render any attributes on native HTML elements that are not in the spec unless you add a data- prefix like so:

Also, the rendering of HTML within dynamic content can get confusing due to escaping and the XSS protection that React has built in. For this reason, React provides the dangerouslySetInnerHTML.

An Example Chat Application

You may have seen the app Gitter. It’s a real-time web chat application that’s mainly aimed at developers. Many people are using it to discuss their projects on GitHub, due to its easy integration with GitHub and being able to create a channel for your repository.

This type of application can easily be created with React by implementing the WebRTC API to create a p2p chat in the browser. For this we will be using the PeerJs and socket.io modules for Node.

To give you a clear idea of the architecture of the application, here is a basic low-level UML diagram:

file

ChatServer receives signal messages with PeerJS, and each client will use it as a proxy for taking care of the NAT traversal.

We will start the app from the ground up to give you a good feel of how to create a React application. First create a new directory for your application, and inside it make a package.json.

This package.json file is used by npm in order to easily configure your application. We specify our dependencies: express, a web framework that we will use to serve our app; peer, the peerjs server we will use for signalling; socket.io which will be used for polling and the webRTC implementation. react-bootstrap and bootstrap are packages for using Twitter’s CSS framework to style our app.

We will also need some additional packages, and for that we will use bower.

Create a bower.json and add the following:

With this configuration, we bring down react, jQuery, bootstrap, eventEmitter for firing events and the peerJS Client library for wrapping the WebRTC.

Finally, specify where to install this by setting the .bowerrc file:

From here, just sit back and install your dependencies via:

Once this command has finished, you will see a new directory node_modules and src/lib. These contain the modules ready for use.

Now create an app.js in the main directory alongside your package.json, etc. This will be the main entry point of your application.

This will simply create an Express server, making the src/ files we just got with bower now accessible via HTTP. Then a socket.io instance was created to listen on the expressServer object. This is used for polling and facilitating the next step for the PeerServer, which will actually do the WebRTC chat part.

To configure a PeerServer, all you need to do is specify the port and path the server will run on, and then start configuring events with the .on method. We are using a separate file named Events.js to specify our app’s events.

Here we use the events.CONNECT event to specify when a user has connected to our app. This will be used by the states of our view components to update their displays in real time.

To do this, we need to create the Server for our peer-to-peer connections to proxy through.

Create a file in src/Server.js and add the following:

This is the main guts of the application. Here we configure the ChatServer object with all of its functions.

First we use socket.io to establish signalling of a new user connected via the events.CONNECT as so:

Then, to connect to the PeerServer, we use the following:

We then listen for events via the on method:

We also have our JSX inside components in the components/chat directory. Take your time to look through all of them in the repository. I will be focusing on the ChatBox component for now:

This class takes usage of the ChatServer we created before, utilising it as a proxy for the ChatBox component.

The components and libraries are finally all rendered on the page with index.html and served via node express.

To start the app, run npm start and point your browser to http://localhost:3001 to take a look at the chat.

Going Live on Heroku

Serving from the cloud is really easy with Heroku. Sign up for a free account and then you can install the heroku toolbelt on to your system. Read more about getting Heroku set up at the Heroku Dev Center.

Now that you have Heroku available, log in and create a new project like so:

Here you will get a random name from Heroku and your app URL—in our example it is http://sharp-rain-871.herokuapp.com/. Heroku also creates a git repo for this app.

Now it’s as simple as pushing your code to heroku:

Once the push is finished, you will be able to start your web service with the following:

Now just visit the URL provided, or as a shortcut use the open command as so:

Conclusions

You’ve learned how to create JSX components and interface them with React, with a detailed example of the chat application. Take some time to go through the code and see how React and the components/chat directory are working.

Combined with the deployment to Heroku, you can start hacking and creating your own React apps for the cloud!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.