WTF!? Creating your first React App (Part 2/5)

How to launch your first (useless) React App

So I’m going to assume you’ve…

• Built a foundational (basic) understanding of what JavaScript & React JS are
• Spent some solid time learning about how React (and related technologies) works
• Decided enough learning, start building

If you aren’t exactly sure what React is, and why you’re creating things with it — go to the starting point of this series.

Otherwise, just incase you’re questioning whether to start building or not, I’ll leave this nugget of quoted wisdom to sideline any doubt.

“All glory comes from daring to begin.” — Eugene F Ware

Boom. Now you’re ready.

The sandbox

The goal of this article is to give guidance towards setting up a coding sandbox for you to play around in, and learn how to build the next Airbnb.

This is essentially a sandpit in which you can build dysfunctional sandcastles that wouldn’t survive any green-army-men attacks or hosepipe floods, but would enable you to one day build the Minas Tirith of sandcastles.

Create-react-app

Facebook has created a Node module create-react-app to generate a React application sandbox to kickstart your learning. This is the quickest way to get started and the steps are explained well in this Code Academy article:

Creating a React App

Laying foundations

Some good news: Both tools described below (Babel & Webpack) are included in the create-react-app sandbox. But before you completely disregard them, you will need to extend the functionality of both tools as your App develops, best understand them.

Compatibility

Not all browsers will support JSX (React’s HTML-like syntax extension), yet. To make sure your App will conquer the world you need to convert it into vanilla JavaScript. Luckily there is a powerful JS compiler, Babel, which does this for you.

A compiler takes a high-level input (JSX) and converts it into a low-level output (Vanilla JavaScript). If you put the phrase “making an omelette” through a compiler the output would be a step-by-step description towards making an omelette.

The following article explains more on Babel in React:

React Setup, Part II: Babel

Bundling

Before you get too caught up in React, it’s important not to forget that any functional React application will contain a lot more than just JavaScript.

Most functional React applications will contain html, images(.jpg, .png), styling (.css, .scss), vectors(.svg) and many more dependencies in addition to JavaScript(.js)

In order for all these dependencies to be bundled together into your super-slick App, you can convert them into static assets using a bundler like Webpack. The Code Academy React series continues, and explains Webpack in further detail in these two articles:

React Setup, Part III: Webpack

React Setup, Part IV: HTMLWebpackPlugin

Build and run

Create-react-app has been set-up, along with the already included Babel compiler and Webpack bundler. All that’s left is launching the App so you can set your eyes on your masterpiece.

3..2..1.. run

$ npm start

Behold your first single-page React App

Ok it sucks.

But you’ve still made a start, and that’s significant. Every time you..

• Make a tweak
• Add something
• Break something
• Break everything
• Fix something

.. is a step closer to your game-changing React App.

The deep end

As a solution developer on some much more established (read PHP) and widely used (read WordPress) languages and frameworks, some of the first things I realised (and I’m sure you will) when continuing along my React learning journey is that:

• Not every problem you have will be solved with a Google search
• The documentation/guidelines are slim and technical
• The React community is small, but passionate and helpful
• You will not build the next unicorn App overnight

Most of readers have probably not even got this far (I’m pretty sure most people bailed at the first mention of either Node, Babel or Webpack). This means you’re either crazy, or willing to put in the work to differentiate yourself as a developer.

The greener grass

Despite the challenges, the benefits of a JavaScript library like React are clear even from an early stage. If you want to build an effective, efficient and modern single-page application, it’s worth the investment.

The remaining articles in this WTF?! series focus on specific areas/functions within a React App:

• Part 3: WTF?! Routing in a React App (Coming soon)
• Part 4: WTF!? Styling in a React App (Coming soon)
• Part 5: WTF!? Redux in a React App (Coming soon)