DeveloperHandbook.com

How to get started quickly with React

Published


This post explores 3 separate ways to get a React application up and running quickly.

TL;DR

To get start quickly with React, you have three choices;

How to get started with React using CodeSandbox

CodeSandbox is one of the most useful tools on the web today. CodeSandbox enables you to forget all about the complexities of setting up a development environment and enables you to just start coding. CodeSandbox is truly a breath of fresh air and a pleasure to work with.

You can create a new CodeSandbox by following this link; New React CodeSandbox

New React CodeSandbox

No configuration is needed here, you can make changes to the code and see those changes immediately in the preview on the right.

Pros of CodeSandbox

Cons of CodeSandbox

How to get started with React using Create-React-App

Create-React-App is the de facto standard for new developers getting started with React. Create-React-App is best initialised using the CLI, so Node.js and some basic knowledge of how to use the terminal is required.

Create-React-App comes with MANY features out of the box, including;

To create a new Create-React-App, run the following commands in your terminal;

npx create-react-app my-app
cd my-app
npm start

Now you can browse to http://localhost:3000 and see the site. Open the code in your favourite editor and you will see that any changes you make are immediately displayed in the browser (it updates every time you save!).

Create React App

Pros of Create-React-App

Cons of Create-React-App

How to get started with React using Parcel.js

Parcel.js is the new kid on the block, and is a Webpack competitor. Parcel.js takes your code, analyses it and builds it automatically, no configuration needed. I have a more comprehensive Parcel.js React tutorial, but this is what you need to know;

Pros of Parcel.js

Cons of Parcel.js

More depth: What the heck is JSX anyway?

This post has mentioned JSX several times and offered no explanation as to what that is, so let’s just tidy that up.

When JSX first burst onto the screen, it was possibly one of the most controversial technologies in the history of web development (I am barely even exaggerating!).

Since the dawn of time, us developers have known that the ultimate web development sin was to mix concerns. HTML, CSS, and JavaScript should all live in their own separate files and be completely disconnected from each other. This has been reinforced by countless books, YouTube videos and training workshops.

JSX not only blurs the lines, but it straight up requires you to mix your concerns into one single file.

Take the following example;

import React from "react"
import ReactDOM from "react-dom"

function App() {
  return (
    <div className="App" style={{ backgroundColor: "yellow" }}>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  )
}

const rootElement = document.getElementById("root")
ReactDOM.render(<App />, rootElement)

Yes, this is a JavaScript file. Specifically it is a JavaScript file that contains JSX (sometimes these files have a .jsx file extension).

Here we have a mix of JavaScript, HTML, and inline CSS all in the same place. We could also import CSS and have it included directly in our JavaScript bundles (although you probably would want to extract it as part of your build pipeline).

Let’s be clear, this code does not work in the browser (…without a lot of legwork! See my post on Medium, You might not need a build toolchain for more details). To understand why, we have to understand what happens to JSX when built/transpiled.

Take the following snippet (some bits have been removed for brevity).

"use strict"

var _react = require("react")
var _react2 = _interopRequireDefault(_react)
var _reactDom = require("react-dom")

function App() {
  return _react2.default.createElement(
    "div",
    { className: "App", style: { backgroundColor: "yellow" } },
    _react2.default.createElement("h1", null, "Hello CodeSandbox"),
    _react2.default.createElement(
      "h2",
      null,
      "Start editing to see some magic happen!",
    ),
  )
}

var rootElement = document.getElementById("root")
_reactDom2.default.render(_react2.default.createElement(App, null), rootElement)

This is what our React code looks like when it has been run through our compiler.

React provides a function called createElement that takes the type of element, its attributes, content, and children. At runtime React evaluates all this code and eventually the DOM is built from it.

In a nutshell, JSX saves us the considerable pain of having to write and maintain code like this and provides a higher-level API that most developers are very comfortable with and that significantly reduces the learning curve.

Summary

Thankfully there are several ways, with varying degrees of difficultly, to get started with React quickly. CodeSandbox is the quickest and easiest choice, as it “just works” right in the browser. Create React App is a fantastic starting point with a rich feature set out of the box. Rolling your own project from scratch using a build tool like Parcel.js is also very powerful, whilst requiring more setup.