Learning React

Learning React is hard.

On one hand the code looks like HTML.  But it’s not straight HTML, it’s got other code decorators injected into it. As a result the browswer can’t read the files as it can read straight (vanilla) javascript.

An intermediate compiler/transpiler is needed to convert JSX (the HTML looking javascript) into JS that the browser can render.  This is what Babel is used for.

The first few times I tried to teach myself React, I got really hung up on JSX. I had a hard time keeping straight what it was used for, and it’s appearance being so similar to HTML kept confusing me. In reality it’s not HTML with some javascript thrown in, it’s JavaScript with HTML tags thrown right in.

In normal JavaScript you would have to encapsulate any HTML you wanted to send to the Document/Browser Window in string tags, which starts to look pretty messy. JSX allows you to not only write straight HTML markup in your JavaScript, but also create your own HTML tags, called Components via the React library. Now that I understand it’s purpose, it makes a whole lot more sense. If it’s confusing to you, stick with it.

Basic Starting Code

To start working with React, simply include two javascript libraries, one for React itself and one for ReactDOM to render what we are creating onto the browser window (the DOM).

You’ll need to include either a 3rd javascript library, or work with your tooling scripts to allow Babel to transpile your React code (JSX) into vanilla JS.

You can use these files locally by downloading them from here: https://facebook.github.io/react/docs/installation.html

<!DOCTYPE html>
<html>
<head>
    <title>Learning React</title>
    <script src="./js/react.min.js"></script>
    <script src="./js/react-dom.min.js"></script>
    <script src="../../js/browser.min.js"></script>
</head>
<body>

    
</body>
</html>

Don’t Let the Tooling Derail you

It can take time to wrap your head around the tooling options that are available.  What is “tooling?” Tooling is the set up of your local system to automatically compile your code, compact your JSX into vanilla JS to be use by your local or remote file server, a “linter” that will automatically check your syntax as you go, and so forth.

When set up correctly the right tooling can make your job very easy, but until you understand the purpose and function of each piece of tooling, it feels like a lot of extra code just to write some javascript.   Since javascript is supposed to be the language of the web, setting up a local React dev environment with the right tooling feels like a big step back in time.

But … they tell me it will be worth it!

Basic React Building Blocks

“Hello World”

Hello World is the traditional first step in learning any new coding language or framework. What’s the simplest way to get text on the screen.  In react it is a two step process. The first step is to simply create a “target” for your text by creating a single div with a name in your index.html file.

 

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

 

Next you tell ReactDOM to display “Hello World” to that target. If you’re writing this as a single file, simply create a script tag and mark it up as text/babel like this:

 

This is why we included the 3rd Javascript file above, so that the text/babel script will be correctly transpiled into javascript.

Now we “render” some text to our target using code that appears similar to HTML…but it’s actually JSX. The library used to render the JSX is ReactDOM, our 2nd included library above. We haven’t actually written any React yet, this is just the set up so that our React code has a way to be rendered and a target to go to. The render method takes two paramenters. The first one is basic HTML, and the 2nd is the target, which we’ve already created before.

 

ReactDOM.render(

Hello World!

, document.getElementById('app'))

Now if you open this index file in a local browser, assuming you’ve got proper script paths to react, reactDOM and babel, you should see your Hello, World! text on the page.

(A nice html server is

httpster

, that you can install with npm).

Here is the full index.html file up to this point:

<!DOCTYPE html>
<html>
<head>
    <title>Learning React</title>
    <script src="./js/react.min.js"></script>
    <script src="./js/react-dom.min.js"></script>
    <script src="../../js/browser.min.js"></script>
</head>
<body>
</body> </html>