Skip to content
UW Front-end Tech Community of Practice

Chapters 1 and 2

October 4 – Chapters 01, 02

Chapter 1 Summary –

01_01 What is React?

  • React is a JavaScript library for creating user interfaces, created by Facebook and open-sourced in March 2013.
  • React has expanded beyond the web with React Native for building native mobile applications.
  • Key resources for learning React include the regularly updated React Docs and the React blog for updates and future plans.
  • React is highly popular on GitHub and used by major companies like, Netflix, and Microsoft.

01_02 Setting up Chrome tools for React

  • Install React developer tools to work on React projects in Chrome.
  • Navigate to the Chrome Web Store.
  • Search for “React developer tools” and add the extension to your browser.
  • Open a site that uses React (e.g., airbnb.com).
  • Access developer tools by using shortcuts (Cmd + Opt + J for Mac, Ctrl + Shift + J for PC).
  • A new “Components” tab will appear, listing all the components on the page.
  • This tab allows you to see the components that make up the webpage.
  • To configure, go to chrome://extensions.
  • Click “Details” next to React developer tools.
  • Allow access to file URLs to use React developer tools when working on local projects or files from the Exercise Files folder.

01_03 Setting up Firefox DevTools for React

  • Search for “React dev tools” in the Firefox add-ons ( addons.mozilla.org )
  • Find the extension on addons.mozilla.org and click “Add to Firefox” and then “Add.”
  • Once installed, you can use these tools on React websites.
  • Open developer tools by right-clicking and selecting “Inspect.”
  • A “Components” tab will provide detailed information about the elements on the page.
  • These tools allow inspection of React sites and projects in Firefox.

01_04 Working with Visual Studio Code

  • VS Code is free and can be downloaded from its website for both PC and Mac users.
  • After downloading, expand the zip file and open VS Code.
  • You can open your exercise files in VS Code by dragging the exercise files folder onto the editor.
  • Some browser-based alternatives to running React locally in VS Code are:

2. Intro to React Elements

02_01 Adding React to your project

  • In your “index.html” file, add script tags linking to React and React DOM via a CDN. (These script tags quickly add the React library to the page in the browser.)
  • React is used to create elements using JavaScript instead of traditional HTML.
  • Add a div with the ID “root” to the HTML body.
  • Add a script tag with type “text/javascript“to use the “ReactDOM.render” function.
  • “ReactDOM.render” takes two arguments: 
    • a React element 
    • the DOM element where the React element should be rendered.
      • Example: 

        ReactDOM.render( <h1>Getting Started!</h1>, document.getElementById('root') );

02_02 Creating React elements

  • The ReactDOM.render function injects the React code created with the createElement call into the “root” element of the document.
  • React elements are like small UI components that can be rendered at any time.
  • To improve code organization, create a variable to hold the React element.
const headerElement = <h1>Hello, React!</h1>;
  • Refactor the code snippet by cutting the React element creation, rendering portion and pasting it into a variable called “heading.”
return (
    <div>
      {headerElement} {/* Render the React element */}
      <p>This is a simple React application.</p>
    </div>
  );
  • The code now successfully creates a React element using its own separate variable.

02_03 Refactoring elements using JSX

  • To add child elements like list items, the third argument of React.createElement is used.
let ul = React.createElement( 'ul', { style: { color: 'blue' } }, 
React.createElement( 'li', null, 'Monday'),
React.createElement( 'li', null, 'Tuesday'),
React.createElement( 'li', null, 'Wednesday'),
 );
  • Add a  “style,” property with the value “color: blue” 
  • Include list items (li) with the content “Monday,” “Tuesday,” and “Wednesday” 
  • As the code becomes more complex with multiple createElement calls, a need for a more concise syntax arises — JSX.
  • JSX (JavaScript as XML) helps by providing an HTML-like syntax for creating UI elements.
  • JSX allows the use of tags instead of createElement calls, making the code more readable and similar to HTML.
  • Attempting to run the JSX code results in an “unexpected token” error. This can be fixed using Babel.

02_04 Incorporating Babel

  • The “unexpected token” error is explained as a result of JSX, which is not directly supported by web browsers.
  • To address this issue, a compiler tool like Babel is required to convert JSX code into browser-friendly code.
  • Include Babel via a CDN link –
    <scriptsrc=”https://unpkg.com/babel-standalone@6/babel.min.js”></script>
  • Change the script tag’s type  to “text/babel”
  • Babel will then transform JSX code into a format that functions in the browser.
  • This approach provides a quick start, more optimized methods for handling modern JavaScript syntax and JSX transformation for production purposes will be explored later in the course.

02_05 Working with JSX syntax

  • JSX is a powerful tool when working with React, allowing dynamic content injection into tags using variables.
  • These variables are then used inside list items within curly braces, representing JSX expressions.
  • JSX expressions with curly braces can include various functions, such as toUpperCase(), which transforms text to uppercase, or property access like name.length.
  • JSX provides a robust method for injecting dynamic content into applications.
Skip to toolbar