freeCodeCamp, CodePen and ReactJS

So, I’m up to the ReactJS exercises in the freeCodeCamp course set.

(This article assumes you’ve signed in to CodePen by-the-way…)

First things first, I needed to know how to create a “Hello World” app in CodePen using ReactJS. It’s easy. When you know how.

Here’s how.

In the HTML Section

Include the following HTML snippet in the HTML section of your pen:

<div id="app"></div>

In HTML Settings, you don’t need any special settings set. Got that?

In the CSS Section

You won’t need any custom CSS for the purposes of this exercise.

I do like to get into the habit of including “Normalize” in the CSS Base portion of CSS Settings. There’s no need for it, strictly speaking (for the purposes of this exercise).

In the JavaScript Section

This is where you need to pay a lot of attention. ReactJS combines CSS and HTML and JavaScript into one base. So, most of the work that needs doing is done here in the JavaScript section.

Because this is a “Hello World” App, we’re keeping things as simple as possible. We will only be doing the one thing – and that is to write “Hello World!”.

In the JavaScript section, you’ll need this code:

ReactDOM.render(
  <h1>Hello World!</h1>,
  document.getElementById("app")
)

JavaScript Settings

Because JavaScript is doing the heavy lifting, I deemed it important to include a heading just for setting the JavaScript settings of your pen. This is the engine room of your App, and you need to get the tuning of the engine “just right”.

JavaScript Settings: JavaScript Preprocessor

Set Babel.

JavaScript Settings: Add External Javascript

Add each of these lines, in this order, as individual resources:

  https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js
  https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js

Once you’ve done the above, the CodePen should render “Hello World” in the page frame.

What’s Going On Behind The Scenes?

Simply speaking, the JavaScript section is doing all the work. We’re loading the Babel pre-processor, which means we can write ES6 JavaScript (classes and fat arrow functions for example). And we don’t need to care about Browser compatibility!

The JavaScript libraries which we included in the “Add External JavaScript” section (and in the correct order) is doing all of the really hard work – which is to take our JavaScript and then render it into HTML and CSS (and JavaScript). It’s dead sexy really.

Babel will have pre-processed our code before it hits ReactJS and further, it will ‘downgrade’ our code into script that is broadly compatible with many different browsers in the market place. It saves the developer (you) from having to do this otherwise cumbersome job. Yay.

When Babel has ‘downgraded’ your code, and ReactJS has organised your code into HTML, CSS (and JavaScript application logic unrelated to ReactJS machinations), it will send that code out to the HTML document node which has the ID of “app”.

Better Ways

So, the example above is the simplest way to get a “Hello World” out of CodePen + ReactJS (that I’m aware of anyway).

But, there are ‘better ways’ to write the same code, albeit with more lines of code. These ways will set you up to create more complicated ReactJS CodePen projects.

So keep reading.

The ES5 Way

Here’s the next quickest way:

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

ReactDOM.render(
  <App/>,
  document.getElementById("app")
)

The ES6 Way

This is equivalent to the ES5 way above. But this uses ES6 to write the App function (nice):

const App = () => {
  return (
<h1>Hello World!</h1>
)
}

ReactDOM.render(
 <App/>,
 document.getElementById("app")
)

And, here’s how to write it using a JavaScript class (also an ES6 way):

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

ReactDOM.render(
 <App/>,
 document.getElementById("app")
)

Additional Concepts

In ReactJS, classes can include “state” and can be “stateful”. Classes are used to build “stateful components” and tend to be parent level components that control application logic.

Functions (whether written in ES5 or ES6) cannot be “stateful”. We tend to use functions for presentation only (ie. to create a presentational component). Presentational components react to changes in state (eg. menu has collapsed or expanded).

These concepts will be expanded upon in later posts.

Happy Coding!

For Your Reference

Here’s the Pen.

Advertisements