/ javascript

A Slow Dance with React | Part 1: Hello World

This is the first in a series of posts about diving into React and creating a real application. Our real React app is going to calculate the average rent for a given zip code. This first post is a primer of React (what it is, how to get started with an app, etc...). In future posts; we'll actually dive in and implement our logic for the rent-calculator app. Stay tuned for more!

Hi, my name is Chris and I gulp have never used React before. I have plenty of experience with other front-end frameworks and libraries -- Ember, and Backbone to name a couple -- but I've never gotten into React. Learning a new technology can be difficult. I feel its similar to slow-dancing with a stranger. It's clumsy, and embarrassing for both of you. But after a while, you start to feel each other out, and eventually, you get comfortable.

Anyways, I decided I wanted to dance recently. And I chose React as my parter. Let's dive in. For this series I'm going to use the excellent create-react-app. It is currently the best way to get started with a real React application, while not having to manage all the configurations yourself.

Shall we dance?

After interlocking hands and getting into the dancer's pose; I took my first step forward.

πŸ’©  create-react-app rent-calculator

Creating a new React app in /Users/cpow/git/rent-calculator.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...

yarn add v0.24.6
info No lockfile found.
[1/4] πŸ”  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] πŸ”—  Linking dependencies...
[4/4] πŸ“ƒ  Building fresh packages...
success Saved lockfile.
success Saved 913 new dependencies.

Let's take stock of our current situation. Opening up our new rent-calculator directory in our favorite editor yields this directory tree. Lets take a look and break down what we have here:


The public folder

Where we store all our public files

This is where we are going to render our actual React application into the DOM. We'll come back to this shortly.

This is a web app manifest file. It describes your application for mobile phone usage essentially. Taken from the link above:

The web app manifest provides information about an application (such as name, author, icon, and description) in a JSON text file. The purpose of the manifest is to install web applications to the homescreen of a device, providing users with quicker access and a richer experience.

Very cool stuff

The src Folder

where the real dancing happensβ„’

Our first test!! create-react-app ships with Jest as its testing framework. Jest appears to be pretty awesome and we'll be digging into it later.

This is where you can change the styling of your application. Nothing major here, we may touch on this a bit later.

The App.js file currently defines our initial component called App, and renders out some pretty simple JSX:

// src/App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.

export default App;

create-react-app subclasses the Component module in React and creates a component named App. This App component implements just one function: render(). the render() function is part of the mount lifecycle of React components and is called whenever this component gets rendered, or re-rendered into the DOM.

Speaking of the DOM, lets look at another important file:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

index.js is our introduction to rendering elements into the DOM with React. By using ReactDOM imported on line 2, we render our App component into our root DOM node in our application.

Everything Else

The root DOM node is defined in index.html.

  <!-- a piece of the index.html file -->
      You need to enable JavaScript to run this app.
    <div id="root"></div>
    etc... etc...

This is where all our dependencies lie. This is actually pretty light on an first install of create-react-app. Whenever you need added functionality provided by a third-party library, you'll most likely be adding it here.

yarn is an excellent package manager for node modules. If you're coming from ruby, think of yarn as the bundler of javascript packages. If you're coming from javascript, then think of yarn as npm except, you know, good at version management.

Hello World

We are trying to see what our dance partner can do now. So let's grab her by the waist and dip.

Our first step is to modify our App.js file and change the JSX that our App component renders out. Lets modify our App.js file to look like this:

// src/App.js
import React from 'react';
import './App.css';

const { Component } = React;

class App extends Component {
  render() {
    return(<div className="App">Hello World!</div>);

Now start your server using yarn start and view localhost:3000 and you should see something like this:

I know, pretty wild stuff, right?

And we're done for now!

Believe it or not, that is all you need to get started with React.

I hope you enjoyed this primer into React and all of its moving parts. Next up, we'll be coding the first peices of our rent-calculator app with our dancing partner, React. Stay tuned!

chris power

chris power

Chris is a full stack engineer working on multiple JS, Ruby, and Elixir projects. He is also an avid snowboarder, golfer, and beer snob.

Read More