Hello, my name is Sydney, and I'm a HEXOnerd, but I didn't spend four years in university studying computer science or software engineering; HEXONET decided to take a chance on me as a bootcamp grad. As you may know, coding bootcamps are becoming more and more popular; we spend weeks instead of years learning the core skills of coding. I attended BrainStation's Full Time Web Development program for ten weeks last summer before I was hired at HEXONET.

In bootcamp we learned how to code a brand new website from scratch: of course we learned HTML and CSS first, then JavaScript and jQuery, but after those topics we focused on the React framework. It made starting a website really simple:

npm install create-react-app a-new-app
cd a-new-app
npm start

This command starts you off with a file structure and some sample code. You have your first CSS file, your App.js file, your index.html, even your favicon.ico, and you have all the node modules you need to test, run, and build your code. One of the projects I built with this implementation of React at BrainStation was a little online store complete with a shopping cart and log-in.

Later On, In Real Life...

Here at HEXONET, I'm in my very first job as a coder. Our Control Panel is written in AngularJS and HEXONET.net is a mix of AngularJS and some jQuery so, as I was warned in bootcamp, I had to make myself familiar with a new framework.

HEXONET prides itself on being a tech-first company and Lucas Vall, VP of Product Development (and my boss), decided that would carry over to my job of maintaining our website, and because it was arguably the most popular JavaScript framework in the industry at that moment, I would incorporate React into our website.

Now I was in trouble, because HEXONET did not need a whole new website. I was asked only to re-code HEXONET.net/whois from it's original jQuery into React.

The method I had learned to create a React website didn't suit the situation, so I got right onto Google and tried to figure out how to make a single React page.

So This Is How It Worked

First off: I wasn't going to be able to use create-react-app. It turns out it starts out with:

npm install react

Simple enough. I also needed to install react-dom.

Starting wasn't so bad either. I remembered how to add React into the html:

whois.html

<div id="main"></div>

whois.js

ReactDOM.render(<Whois />, document.getElementById("main"));

Transpiling

One thing create-react-app abstracted me from was transpiling. It comes with Babel already in there and hooked up. HEXONET.net uses Grunt as a task-runner, so I got Grunt to transpile my React code for me. It only required one node module, and it used the technology we already had.

npm install grunt-babel

Gruntfile.js

module.exports = function(grunt) {
  grunt.initConfig({
    "babel": {
      options: {
        sourceMap: false,
        presets: ['@babel/preset-env', '@babel/preset-react']
      },
      dist: {
        files: {
          "path/to/react-components/whois.js": "path/to/whois.js",
        }
      }
    }
  });
grunt.loadNpmTasks('grunt-babel');
};

Trial And Error

I went to my personal Github account to take a look at the React syntax again.

whois.js

import React, { Component } from 'react';

class Whois extends Component {
  state={
      query: ""
  };
  render () {
    return <span>{this.state.query}</span>
  };
};

I was surprised when it didn't work, because I'd honestly just copied and pasted most of it from one of my fully-functional React projects. After much trial and error I found that I needed to skip the import, make the react and react-dom modules available to the client-side by adding them to our distribution folder, and add the following to the html:

whois.html

<script src="react/umd/react.production.min.js"></script>
<script src="react-dom/umd/react-dom.production.min.js"></script>

I'd actually recommend using react.development.js and react-dom.development.js while you're developing, as they produce very helpful console errors. Remember to change back when you're done, though!

Additionally, my React syntax had to change a bit.

whois.js

class Whois extends React.Component {
  state={
    query: ""
  };
  render () {
    return <span>{this.state.query}</span>
  };
};

What Is React Without State?

Frustratingly, my state still wasn't working. In this form of React state has to be defined differently. I also found that when I was trying to use the function this.setState() that "setState" was not defined, and I found that I needed to bind "this" to all the functions that used it.

whois.js

constructor(props) {
  super(props);
  this.state = {
    query: ""
  };
  this.myfunction = this.myfunction.bind(this);
};

This was the last fix. From then on, it was React as usual; I was able to use state and props, lifecycle functions, and JSX.

As of today I've written 4 more pages in React (3 are yet to be deployed).

I'll be eternally grateful to my fellow HEXOnerds for taking a chance on me and helping me transition from bootcamp to real life. A special thank you to BrainStation for educating me in the first place. I look forward to writing more React for HEXONET, and maybe trying out Vue.js next!

Check out my first React pages at HEXONET.net/whois and HEXONET.net/lookup/check!