A Beginner's Guide to Getting Started with React

Table of Contents

Introduction
Basic Core Concepts
Getting Started
Resources

Introduction

React is a free and popular front-end JavaScript library for building user interfaces maintained by Meta (Facebook) and a community of developers and companies. With its component-based architecture, you can create reusable UI elements across your website or application.

React uses Declarative programming instead of Imperative programming.

So what does that mean?

In Declarative programming, you write what you want to happen (or the desired outcome) without needing to specify how it's done. We tell React what we want it to do, and React will take care of how it's done.

// Declarative example
const App = () => {
  return <h1>Hello, World!</h1>;
};

In Imperative programming, we need to provide explicit step-by-step instructions on what we want the desired outcome to be.

// Imperative example (not using React)
const element = document.createElement('h1');
element.textContent = 'Hello, World!';
document.body.appendChild(element);

In short, with JavaScript, we normally manually manipulate the DOM to change or update it. With React, it handles updating the actual DOM for us.

Basic Core Concepts

Virtual DOM

The Virtual DOM (Document Object Model) is a lightweight, in-memory representation of the actual DOM in a web browser. React uses the Virtual DOM to optimize and update the browser's actual DOM.

When the React application is initially rendered, React creates a Virtual DOM based on the structure of the application's UI.
If the state of the application changes (user interactions, data changes, etc.), React re-renders the edited components by comparing the changes to the changed Virtual DOM and the previous one and updates based on the differences.
To prevent slow performance and minimize resource use in the application, React will calculate the minimal amount of updates and batch them as they are applied to the actual DOM.

Components

Components are "reusable UI elements for your app".

They are essentially a JavaScript function but they return JSX and the component name always begins with a capital letter. You can use either class components or function components.

Keeping components separated in their file is a common practice used when working with React. This makes it easier to organize when you have a lot of components in your app or need to combine multiple components.

Example

// App file structure
/components 
../Form.jsx
../Button.jsx
../Navbar.jsx
../Footer.jsx

// In main app component
import Navbar from "./components/Navbar.jsx"
import Footer from "./components/Footer.jsx"
import Form from "./components/Form.jsx"

function App(){
  return (
    <div>
      <Navbar />
      <Form />
      <Footer />
    </div>
  )
}

JSX (JavaScript XML)

JSX, or JavaScript XML, is "a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file". React components use JSX.

Instead of having a separate JavaScript and HTML file for a web page, JSX allows us to write the logic with the markup in the same file. We are also able to use JavaScript inside the JSX markup using curly braces.

HTML

<body>
  <form id="exampleForm"></form>
  <script src="./script.js"></script>
</body>

JavaScript

const form = document.getElementById("exampleForm");
form.addEventListener("submit", handleSubmit);
function handleSubmit(){};

JSX

function Form(){
  // JavaScript logic
  function handleSubmit(){};

  // return JSX
  return (
    <div>
      {/* we use the curly braces to add the function in the form element (NOTE: this is the syntax for comments in JSX */}
      <form onSubmit={handleSubmit}></form>
    </div>
  )
}

JSX 3 Rules:

Return a single root element within the component (if you have multiple elements, wrap them in a single parent element)

// GOOD EXAMPLE
function App(){
  return (
    <div>
      <h1>Hi!</hi>
      <p></p>
    </div>
  )
}

// BAD EXAMPLE
function App(){
  return (
      <h1>Hi!</hi>
      <p></p>
  )
}

Close all tags: JSX requires all tags to be explicitly closed, including self-closing tags.

// YES
function App(){
  return (
    <img src="" alt="" />
  )
}

// NO
function App(){
  return (
    <img src="" alt="">
  )
}

camelCase most of the time

To prevent the use of reserved words, HTML and SVG attributes are written in camelCase in React.

class becomes className.

JSX turns into JavaScript and these attribute names become keys of JavaScript objects. camelCasing attributes allow for valid JavaScript variable names. JavaScript variables can't use reserved keywords like class, contain dashes (stroke-width), etc.

Props (Properties)

Props or properties are used to pass data to components. They are read-only JavaScript objects and are passed to components like arguments or parameters in a function. You can pass any JavaScript value through them and look similar to HTML attributes in how they are passed to the component.

// Component with prop
function Person(props){
  let name = props.name;
  let age = props.age;
}

// Passing data to Component
function App(){
  return (
    <div>
      <Person name={"Jake"} age={19} />
    </div>
  )
}

A popular way to read props value is by using the JavaScript destructing assignment.

function Person({name, age}){
}

State

State is used to manage data that changes over time within a component. It is handled within the component and differs from props which have its values passed from the parent component. When state changes, React automatically re-renders the component to the updated data.

Getting Started

An easy to get started is using React's create-react-app to create a template React application that is set up for you and immediately begin coding.

You will need to have Node 14.0.0 or a later version installed on your machine and a package manager like npm, yarn, etc. to run create-react-app.