Author: Frank Anderson

Last Updated: 27 January 2024

📊 Table of Contents

❓What’s React?

Today, it’s common to use a JavaScript framework to simplify creating re-usable building blocks and handling user interactions. A common framework developers use is called React.

React was developed at Facebook and released as open source in 2013. It’s easy to get started using it because React makes use of familiar HTML elements to output, has a huge community so it’s easy to get help, and is scalable so you can use it on applications both large and small.

The official documentation can be found here:

Quick Start

💬 Past Presentations

Intro to Frontend Dev Presentation

Created in Fall 2022; presented by Allen Lin and Sam Phillipo

Spring 2021 In-Depth Frontend Dev Presentation

Created in Spring 2021; presented by Chris Myers

✳️ Getting Set Up

1. Make sure you have a recent version of Node.js and npm installed.

   • You can check your current version by running node -v and npm -v, respectively, in your terminal.

2. In your terminal (Terminal on Mac, Command Line on Windows), navigate to your project folder using cd and type: npm create vite@latest my-app-name -- --template react-ts.

3. Follow the instructions in the terminal to finish the installation and launch your project for the first time. This includes navigating into the created my-app-name project folder and installing dependencies by running npm install.

   <aside> <img src="/icons/command-line_orange.svg" alt="/icons/command-line_orange.svg" width="40px" /> Terminal Basics:

   • Directory is another name for folder 📂
   • ls lets you list all the files in a directory
   • cd lets you change directory </aside>

4. You can launch your project at any time by running npm run dev from within your project folder and navigating to localhost:5173 in your web browser. As you save changes to your React components, this page will update automatically. This is called hot reload.

   • You can shut down this development server any time by pressing ctrl+c.

For more details, see Vite’s official documentation.

⌨️ JSX and TSX

React pages are written in JSX (or TSX) which are extensions of JavaScript (or TypeScript) that make it easier to write React code.

JavaScript, like Racket and Python, does not have static types, so many programmers prefer TypeScript as provides features which make programming more deliberate and convenient through type safety.

We’ve written pages on both JavaScript and TypeScript if you’d like to learn more about the languages themselves. The rest of this tutorial will assume you are familiar with them.