code-society-25-2

Lesson 22: Intro to React (Slides)

Pre-work

Please review the following resources before lecture:

Required

• React JS Explained In 10 Minutes (Video)
• World’s shortest UI/UX design course (Video)

Recommended

• React Router - Tutorial (Article)

Homework

• Complete the Introduction to React exercise.
• Do pre-work for lesson 23.

Introduction to React

This exercise will give you hands-on experience with the React framework and supporting tools to enhance a dynamic front-end application that communicates with a backend API.

Starting the servers

1. Copy the React template folder to your own unique folder. Make necessary code changes in your folder only.
2. Install the React web server in your copy using npm install and then run it using the npm run dev command.

Create new components

1. Modify the Home component to create new Program and ProgramList components. The needed HTML and CSS has already been provided for you.
   • The Program component should allow you to configure the title and description to display.

Create a page for adding new programs

1. Create a new page (similar to the Home page component) that allows users to provide a new program title and description in a form.

[!NOTE] You can use the React Router tutorial to learn how to handle form submissions.

This site is open source. Improve this page.