Get running with React!

Published in

Matt’s Lambda Minutes

6 min readJan 9, 2019

React is a very popular framework that many developers utilize on a daily basis. Facebook developed the framework to help combat issues they were having manipulating data and the scalability of their web pages.

It’s been a great solution and popular websites like Postmates, Instagram and Netflix are all using it. This post will hopefully, get you one steps closer to becoming the next great React developer.

For this post, we’ll just be looking to get started with a basic CDN so that we can begin rendering our first React Components.

React Component? What the heck is that? Don’t fret my friend! We’ll cover those and then dive right into how we’ll set up our environment to start coding!

What’s a Component?

There are many definitions for a react component flying around the web, but React pro Tyler McGinnis puts it best,

“a function or class which optionally accepts input and returns a react element.”

Perhaps a bit complicated but for now just know that a component is a collection of reusable Javascript and CSS. Components allow us to scale up applications in no time, while clearly understanding how we pass data through each one.

When we look at any major web application, regardless if they actually us React or not, components are all over their pages.

Let’s take Medium for example, and breakdown all the components on their homepage:

Look at all the components on the Medium homepage!

We haven’t even captured the full page but there are conceivably up to 12 different components. And if we look closely, we can distinguish patterns amongst the components.

We can see article components being styled in different card components that are making up the entire articles banner component. A mouthful, but the power of reusability is starting to emerge.

Once we start breaking our UI into different components it allows us to scale and modify our apps easily!

Getting Started With React

Now that we understand that components will be the backbone to render our UI in React, let’s figure out how we can physically do that!

Step 1: Obtain CDNs.

In order to get started, we need to add ReactJs to our Dev environment. In this example, we’ll be doing that by importing two CDNs: React and the ReactDOM.
We need both because the React gives us access to the whole library of React and the ReactDOM provides DOM specific methods that will allow us to render our content.
Copy and paste the CDNs below into an index.html file. We’ll just be working in our index.html today, so be sure to add an extra script tag we can work in.

React - <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>ReactDom - <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

Step 2: Target our Root Div (Where we want our App to Render):

Now that we have access to React let’s start coding! Our first order of business is to find a place to render our content.
Let’s add a <div> to our HTML with the id target so we know that’s exactly where we need to render.
At this point our index.html should look like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial- scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>First React App</title>
</head><body>
  <div id="target"></div><!--React-->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js">
</script><!--ReactDOM-->
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script>
 <!--Our React Code goes here-->
</script></body></html>

Step 3: Use JSX Syntax to create App Component:

Before we can place components into our page we need to do two things:

First, create an App Component that our future components can render in
Second, render our App in our target <div>.
In order to do this, we need to build an App function. Then we’ll use the specific ReactDOM.render()method to target and render our app. The code looks like this:

// Creating our App function const App = () => {
  return(
    <div>
    </div>
  )}// Rendering our App in our Target DivReactDOM.render(<App/>, document.getElementById("target"))

Go ahead and type something in your App div and make sure everything is working! Wait a minute… it’s not working? Oh! That’s because we need to add Babel!

Step 4: Add Babel

Above we wrote HTML in our Javascript… this is not allowed in vanilla Javascript. However, there is a solution: JSX. JSX is an HTML like language that allows us to input HTML into our Javascript. Be wary when using JSX as there are some nuances about what HTML tags are capable of being copied right over. (Here’s an intro if you want to learn more)

In order to use JSX we need to download Babel and then tell our Javascript we’re using it. We can use CDNs to do that:

<!-- Added Babel Package --><script crossorigin src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script><!-- Alerted our JS we're using babel syntax -->
<script type='text/babel'>
  <!--Insert our JSX here -->
</script>

Now add this to your project and test out typing your App <div> again!

Step 5: Build a Component to render in our App

Now that we have our environment all set up let’s build a functional component that we can render in our App.

We must declare a function that returns an HTML element.
We must use JSX syntax to code our HTML element.

In our case lets just make a <h1> that renders our name and a message.

const MyHeader = () => {
  return (
    <h1>My name is Matt and I love to code!</h1>
 )
}

Now, in order to render this on our page, we need to input into our App div. We do this like so:

// Creating our App functionconst App = () => {
  return(
    <div>
      <MyHeader />
    </div>
  )}// Rendering our App in our Target DivReactDOM.render(<App/>, document.getElementById("target"))

Give it a try, I hope everything is working great! When we’re all finished our completed project will look like this:

<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
   <title>First React App</title>
 </head>
 <body>
   <div id="target"></div>   <!-- Our React and Babel CDNS -->   <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>   <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>   <script crossorigin src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script><!-- Our Custom React Code -->
  <script type='text/babel'>
   // Creating our App function
   const App = () => {
    return(
      <div>
       <MyHeader />
      </div>
    )
   }
  // Creating our MyHeader Component
  const MyHeader = () => {
   return (
     <h1>My name is Matt and I love to code!</h1>
  )
 }
 // Rendering our App in our Target Div
 ReactDOM.render(<App/>, document.getElementById("target"))
 </script>
 </body>
</html>

Bonus: A Bit of reactivity

We’ll later see that React can be super reactive and great for passing data between components. This occurs by passing props and state.

In our example above, let’s create two props, name and message, and get them to render in our Header.

First, we must make our text within <MyHeader/> dynamic.
Then, we must make sure our <MyHeader/> function can receive props.
Then we must assign our props values within our App div.

Within our <MyHeader/> let’s edit it so it’s prepared to receive both props.name and props.message.

const MyHeader = props => {
  return (
    <h1>My name is {props.name} and {props.message}!</h1>
 )
}

Viola! It’s as easy as passing the props to the function and then rendering them in the correct spots. But you might notice our output has nothign display in the {props.name} and {props.message} location… and that’s not what we want.

In order to customize the output, we need to assign our props when we declare <MyHeader/> in our App div.

// Creating our App functionconst App = () => {
  return(
    <div>
      <MyHeader name="Matt" message="I love to code"/>
    </div>
  )}// Rendering our App in our Target DivReactDOM.render(<App/>, document.getElementById("target"))

Holy smokes would you look at that, how cool! We’re now coding React like the pros!

Wrap Up

There you have it folks - a quick guide to getting up and running with React. Here’s a breakdown of all you need to remember:

Download React (CDNs are a great option when you’re getting started)
Include Babel if you’re using a CDN.
Create a root/target <div> where your application can render.
Create a <App /> component where you can render all the awesome components you make.
Start building components and render them in your <App /> component 😁

If you have any questions, please don’t hesitate to reach out! Comments, DMs, or Twitter I’ll be here to assist if you need! As always, Happy Coding!