Guide To React For Newbies

What is React?

  • Popular JavaScript library brought to you by Facebook
  • Allows one to build web applications and websites much more quickly, efficiently through the paradigm of reusable components

Note: You can now watch this entire tutorial on our YouTube channel via this playlist, “Intro To React” which includes 4 basic intro videos and 12 guided videos on how to make your own Movie Search app. Check it out!

Why not JQuery or just vanilla JS?

JQuery is also a popular JavaScript library; it differs from React in that it is not used to create components. JQuery helps you write less JavaScript that is cross-browser friendly and efficient.

You can use JQuery with React, however given diminishing support for browsers like Internet Explorer, you may not need JQuery given modern vanilla JavaScript has many more functions and features that do the same things much faster than JQuery.

As for why to use React over just plain vanilla JavaScript building a website; the answer is that React saves you a lot of time and overhead– without it you would be responsible for writing a lot more code to keep track of updates to the webpage manually; especially each time something updated or changed.

For example, if you’ve ever worked with a WordPress site, you may notice lots of JQuery functions everywhere manually updating pieces of HTML on event changes; HTML that may no longer exist either after an “update”. It becomes a pain to hunt and find every snippet of JQuery and HTML mapped together over time. React solves this problem by tying HTML and JavaScript together directly into a component file, which can then be dropped in place of HTML onto a webpage. If you no longer need the component functionality, you can toggle it off from within the application instead of manually hunting around for HTML and separate JavaScript/JQuery functions through hundreds of different files and scripts.

A Simple Intro To React Code Exercise

In this tutorial series you’ll build two different apps. The first app is a simple “Hello World” to get started.

The second app is a Movie Search application that will help you understand more of the Component based architecture in React. You’ll learn how to create HTML with React functions, then JSX, and then tie your HTML and custom JavaScript together in a component file that can be inserted wherever you like on a webpage.

Both apps are written in EcmaScript 6, the latest specification of JavaScript (released 2015 and every year thereafter sometimes called ESNext). You will also see the term ES5 used frequently; ES5 refers to EcmaScript 5, or basically the current supported version of JavaScript which has been available in all browsers since 2009.

Need an intro to ES6? Be sure to check out JavaScriptLA’s playlist on ES6 via this link: JavaScriptLA Guide To ES6

You will need some basic understanding of NPM / Node.js to work with these projects.  If you don’t want to use NPM, there will be instructions on how to add the scripts for React and ES6 transpiling manually as well for your website (especially in situations where you can’t use NPM). That said, you can always build locally with NPM and a tool like Webpack, Gulp/Grunt, Rollup, then drop the output ES5 script file into a website that you may only have front-end access to.

Getting Started

In this simple exercise, you’ll build a simple file that outputs “Hello World” using React.

You’ll need the latest version of Node.js, which you can get at [https://nodejs.org]. If unsure, choose the LTS version (Long Term Supported) over the version with the newest features. Often new features end up breaking other NPM packages that are not yet updated for the new changes.

Note: If touch command not available, be sure to download it or use a command prompt that supports the command — aka if you’re on Windows, download Git Bash to get Linux commands enabled on your prompt. If on Linux, use your Linux package manager (apt-get, yum) to download touch*.

It should be noted as a best practice, to never use brand new features in production as there could be untested security issues, bugs or incompatibilities that could break your website. That said, if you know what you are doing and unit test properly, you can skip this best practice suggestion.

The Easy Way (Use NPX)

The easy way is the preferred way to start a new React project. This way you can focus on creating an application with React first, then just drop the output file into a larger project if you wish (or leave it standalone). If you are interested in the manual way (because you want to understand what’s going on or have a bigger node project) — there will be a follow up post you can refer to here (and link will be provided soon).

Open the command prompt to a directory of your choice and type:

npx create-react-app hello-world
cd hello-world
yarn start

Note: Sometimes you’ll see developers use Yarn as opposed to NPM. yarn start and yarn build are pretty much interchangeable for NPM commands, while yarn add <package name> is a drop in for npm install <package name>. Yarn is touted to be more efficient than NPM and removes redundancies, so check it out!

You should see many packages being downloaded and installed to your project folder, then after you cd into the project and yarn start, more packages will be loaded and your default browser will open up a webpage with a spiraling React logo. If you see the logo, you are good to go.

Be sure to open up a separate tab or command prompt to this same directory to be able to run the instructions given below while your first tab or command prompt continues to run the built in server that watches your files and refreshes on changes of code.

Note: If you didn’t use create-react-app and you started manually, you won’t see the React logo, rather just your port will be running from http://localhost:{PORT_NUMBER_YOU_CONFIGURED}. This is normal, so feel free to keep going thru the tutorial and modifying directions as needed to keep up. You’ll need to create all the files shown below on your own, but you can copy and paste many of the examples or also run npx create-react-app in a separate directory, then resource those files created as needed to work manually here.

Hello World!

Go to your src folder and let’s edit the App.js file.

Replace this:

src/App.js

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

with this:

src/App.js

function App(){
    return (
        <div>
            Hello World!
        </div>
    )
}

Essentially the function App is the starting point for your React application; it’s what gets loaded into the index.js file if you go and look at the import section there. The App function is called a Functional Component in React language. Its only job is to return some HTML modified by some JavaScript and the use of props.

We’ll explore what all these terms mean later, but for now the main idea is whatever you want to return to your application comes from this App function.

You can import other functional components into your App like a header component or a footer component; both which live in their own separate .js file. If you are struggling with the ES6 syntax, I highly recommend you brush up on your ES6 with JavaScriptLA’s playlist series: JavaScriptLA Guide To ES6.

Long story short though, you export code from other .js files as code components to be used using <ComponentName /> HTML looking syntax (called JSX) to place in anywhere with your resulting App.js. Think of components as placeholders for HTML and JavaScript tied together. We’ll explore all that soon in the movie-search project with this tutorial. Components must always have a closing symbol / if they are singular, or you can also end a component by ending it like HTML like so: <ComponentName>..some content...</ComponentName>.

Under the hood, create-react-app will pull together all the component files and concatenate them together to build the final App output that gets returned from your App function like so:

src/App.js

import Header from './header'
import Footer from './footer'

function App(){
    return (
        <>
            <Header />
                <div>Hello World</div>
            <Footer />
        </>
    )
}

Note: the <></> syntax is not valid HTML, but in React this is okay, it’s called a Fragment operator. In React, all components must be wrapped in a parent div, otherwise React will throw an error. A fragment is a quick way to wrap your components together. Alternatively, you can just return one HTML div / section only as a component

You may notice an error on your webpage, saying something like header.js and footer.js cannot be found. That’s okay, ignore the error for now. Go ahead and create two files called header.js and footer.js and make sure they are in your src folder. You can use the following code to drop into your header.js and footer.js files respectively.

src/header.js

import React from "react"

function Header(){
    return (
        <header>
          This is the header
        </header>
    )
}
export default Header

src/footer.js

import React from "react" 

function Footer(){
    return (
        <footer>
          This is the footer
        </footer>
    )
}
export default Footer

Note: you need to import React from “react” to get the React library so that you can return HTML (technically JSX). Not doing so is a JavaScript error, as JavaScript doesn’t know how to return HTML, it can only return JavaScript syntax. Through the React library, React is able to find any JSX syntax, convert it into React JavaScript functions, and then replace the return value as correct JavaScript syntax your browser will understand. Ultimately, when you write <footer>Some content</footer>, you’re actually writing React.createElement('footer', props, ...children), where props would be null (don't have any here), and children would be the text 'Some content'.

However, writing out this as JavaScript would be annoying each time we want to create elements, so instead Facebook created JSX as a shortcut to allow us to write HTML instead that gets swapped out for these more mundane functions under the hood. Long story short, you don’t need to write out all the JavaScript, you can use JSX, but realize you always need to import React to be able to return HTML syntax inside your JavaScript — or you’ll get an error.

After saving both these files, you should notice your page working again (hit refresh if for some reason this fails). If all good you should see:

This is the header
Hello World!
This is the footer

If you want, you can rearrange the code like so, and you should see:

src/App.js

function App(){
    return (
        <Footer />
           Hello World!
        <Header />
    )
}
This is the footer
Hello World
This is the header

As you can tell React makes it easy to rearrange and reuse components as often as you like. Think of React components like Lego blocks, you just write your HTML somewhere else separately, then edit that file whenever you need to, and it will get updated wherever you used the <ComponentName /> tag. Pretty awesome right?

Finally, you might be wondering how the App gets loaded into your HTML webpage.

Take a look at the index.js file.

You should see the following imports at the top:

src/index.js

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

These import statements tell our index.js file to load React, ReactDOM, our index.css as well as our App.js file. It’s through these import statements that React is able to load up our own App.js content, process it with the React library, then use ReactDOM to inject our code along with css to a target element we select on our HTML page.

src/index.js

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

This code here basically to load our <App /> in React Strict Mode to a target element on our HTML index.html page (or whatever div you choose on some website), with an id of root.

You can change root if you want to something else, just make sure you change the div on the index.html page so you can see your App content. You might be wondering where index.html is. Let’s check the public folder. If you look inside, you’ll see the index.html file, that if you scroll through has a div with id root. That’s where React will drop your React <App /> code into.

You also need to make sure React is loaded into this index.html webpage, but since you used create-react-app to install this application, the NPM package already took care of that for you.

If you are doing this manually instead, you’ll need to make sure that whatever bundle file you created (if you used Webpack to create a bundle.js file), is added to the final index.html file so your scripts can be loaded in and target the root element.

Alright, hope this tutorial was helpful for getting started with React!   Be sure to also check out our video playlist on How to get started with React (4 parts) and A Simple Movie Search App (12 parts) with React.