WDD 430: Web Full-Stack Development

React: A JavaScript Library

Overview

React is a declarative JavaScript library developed by Facebook to help developers build user interfaces. It lets you build user interfaces out of individual pieces called components. Components form the building blocks of React applications. React is maintained by Facebook and has a very strong community of support and resources.

Prepare

The DOM (Document Object Model) is a representation of the HTML structure of a web page and any manipulation of that HTML. Updating the DOM directly can be inefficient and error-prone. For example, this script adds a paragraph to an article element with the id of direct-news.

const newsArticle = document.getElementById('direct-news');
const newParagraph = document.createElement('p');
const text = "Breaking news: Imperative programming!";
const headerContent = document.createTextNode(text);
newParagraph.appendChild(headerContent);  
  newsArticle.appendChild(newParagraph);

This approach is an example of imperative programming where steps are written for how the UI should be updated. In contrast, React uses a declarative approach, where you describe what the UI should look like, and React takes care of updating the DOM efficiently.

React is a component-based library that helps you build UIs by composing small, reusable parts. To be ready for Next.js, you should be comfortable with the core React building blocks below.

JSX: JavaScript XML

JSX is a syntax extension for JavaScript that lets you write HTML-like markup inside JavaScript files. It looks like HTML but produces JavaScript objects that React uses to build the DOM.

Example JSX:

const greeting = <h1>Hello, {name}!</h1>;

This JSX compiles to:

const greeting = React.createElement('h1', null, 'Hello, ', name, '!');

There are some key JSX syntax rules to remember:

• Return a single parent element (or use the empty tag or Fragment <>..</> if you do not want to add an extra wrapper element)
• Close all tags (including self-closing tags (void elements) like <img />)
• Many HTML and SVG attributes are written in camelCase. For example, className is used instead of class
• Embed JavaScript expressions inside curly braces {'{}'}

Babel

Babel is a tool that transforms JSX into regular JavaScript that browsers can understand. It also allows you to use modern JavaScript features that may not be supported in all browsers. Next.js has built-in support for Babel, so you can use JSX and modern JavaScript without any additional configuration.

To add Babel to a project, you would typically install it via npm and configure it with a .babelrc file or a babel.config.js file. Or you can copy and paste the following script to complete the learning activity below:

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

React Foundations Used in Next.js

Do not worry if this is the first time you are seeing these foundational concepts. They will become clearer as you work through the course activities and assignments.

• Components: Functions that return UI. Learn how to compose and reuse them.
• Props: Data passed into components. Learn how to define and use props.
• State: Data that changes over time. Learn how state triggers re-rendering.
• Hooks: Functions like useState and useEffect that add state and side effects.
• Rendering: How React turns component output into the DOM, and why updates are efficient.

Core JavaScript Concepts

React relies on several core JavaScript concepts. A solid understanding of these will make learning React much easier. Review the following essential concepts: Core JavaScript Concepts

Activity Instructions

In this activity, you will contrast directly manipulating the DOM with plain JavaScript versus using React components. This example will help you understand the benefits of using React for building user interfaces. The activity uses two React scripts from an external website called unpkg.com to keep setup simple. react.development.js is the core React library and react-dom.development.js is the library for rendering React components to the DOM.

Set Up

1. Create a small practice folder (for example, wdd430-react-dom-practice) and add a new file named dom.html.
2. In your dom.html add the basic, valid HTML markup structure.
3. In the <body> of the document, add an <article> element with an id of direct-news.
4. Add another <article> element with an id of react-news. This is where the content will be rendered for the React example.

Direct DOM Manipulation

1. Using a <script> tag, add the JavaScript code shown at the start of the Prepare section above to manipulate the DOM in dom.html directly.
2. Verify that the new paragraph is added to the article and renders.

Using React

1. Add these two React scripts from unpkg.com to the <head> section of your document.

   <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
   <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
   

   The first script is the core React library, and the second script is the library for rendering React components to the DOM.
2. Now add the Babel script from unpkg.com to the <head> section of your document.

   <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

3. In the <body> of your document, add a new <script> tag with a type of text/jsx. This tells the browser to use Babel to transpile the JSX code.
4. Inside this script tag, write a React component that renders a paragraph with the same text "Breaking news: React is awesome!". Use JSX syntax to create the component.
5. Use ReactDOM.createRoot() and root.render() to render your React component into the article element with the id of react-news.
6. Open the file in a web browser and verify that the new paragraph is added to the article using React.

<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

<body>
  <article id="direct-news"></article>
  <article id="react-news"></article>
  
  <!-- Direct DOM Manipulation -->
  <script>
    const newsArticle = document.getElementById('direct-news');
    const newParagraph = document.createElement('p');
    const text = "Breaking news: Imperative programming!";
    const headerContent = document.createTextNode(text);
    newParagraph.appendChild(headerContent);  
    newsArticle.appendChild(newParagraph);
  </script>

  <!-- React DOM Manipulation -->
  <script type="text/jsx">
    const domNode = document.getElementById('react-news');
    const root = ReactDOM.createRoot(domNode);
    root.render(<p>Breaking news: React is awesome!</p>);
  </script>
</body>

Submission

After completing all the learning activities for the week, you will return to Canvas to submit the W01 Learning Activities quiz.