Building Dynamic Web Applications: An Introduction to React

What's React

• JS UI Library 2013
• Very popular
• Small API
• To start being productive you just need a handful of things:
  • Components
  • JSX
  • Styling
  • State
  • Props
  • Effects

Why React?

Benefits

• Based on components
• Reusable, helps developers to be much more productive.
• This makes it so much easier to maintain, scale and update.
• Also it’s easier to establish common patterns.
• Improved performance, reduces the need for frequent DOM manipulation, so it’s more efficient and faster to render UIs.
• Very wide community support around it, so it’s easy to find help, examples and support.
• Cross-platform development, with React Native.

Components

What’s a component?

• JS Functions that return Markup
• From a simple button to an entire page
  • Usually won’t see large components
  • Nested components within components
  • Take advantage of the reusability

Nested Components

• Nested components within components.
• Start with a Capital letter: <Title />
• Export/Import files for easier use.
• Organise components for easier navigation:
  • ComponentFolder: - Component.js - Component.css - ComponentTest.js
  • They’ll be easy to find and make changes and also your tests will be localised with the component they belong to

JSX

What is it?

• JSX is a syntax extension for JS that allows developers to write HTML-like code within their JavaScript code.
• JSX is not a requirement for using React, but it's a common practice among developers because it simplifies the process of creating and managing UI components.
• Defines the structure and appearance of a component's output, making it easy to visualise the final rendered result.
• Why use it?
  • Resembles HTML syntax, dev who are familiar with JS and HTML can easily write and read it.
  • Improves readability: combining the markup and logic together can make it more readable and easier to maintain.
  • Again, productivity. Allows developers to create reusable components and compose them together.
• How does it work?
  • JSX transforms into React.createElement JS function to create a DOM element with a transpiler like Babel.

Differences with HTML

• Stricter
• Tags must be closed
• Self-closing tags
• Attributes use camelCase (onClick)
• ClassName instead of class
• Curly braces?
• Comments {/* */}

Styling

• ClassName attribute = class
• Separate CSS files
• Also inline

Embedding JS Expressions

• Allows devs to embed JS expressions in markup using curly braces.
• Allows dynamic rendering of content based on variables or states (we’ll see this in a little bit).
• Conditional data, displaying different data depending on what’s returned for example from an API call. This is what we saw in the ternary.
• Lists of data, this is one of the handiest functionalities in my opinion. We saw this with the .map function. So you’d have just a component and it will create a new element for every event.

State

How to manage it

• State will give memory to our application. It’s a snapshot of our application at a point in time, this data will change what’s displayed and the app's behaviour.
• Hooks: if you see the use at the beginning of a word (in this case useState) it will refer to hooks that allow us certain behaviours in React.
• Setter functions, to update state instead of updating variables directly we use setState.

Props

• Props refer to properties, this is one I personally just started getting now. Components can be thought of as functions, so we can pass arguments and return an element, that you’ll see on the screen.
• Props allow components to receive data from their parent component.
• Important to remember that they are read-only so if we want to update anything we’d need to update the state.

Handling Events

Events are key to creating interactive web applications. These JS functions in React they’re handled through the event handlers. They receive an event as their first argument.

Synchronising with UseEffect

• Effects in React refer to the side effects that occur due to rendering, updating, or un-mounting components.
• Side effects can include data fetching, subscriptions, manual DOM manipulation, and anything that indirectly affects the component's output.
• React provides a built-in Hook called useEffect to help manage these side effects cleanly, efficiently, and declaratively.
• What events does the UI react to?
  • Rendering the code
  • Triggering event handlers
• When?
  • First rendering completion
  • Component updated
  • Component being removed

Example with Data from a real API