Code the Dream Labs Logo

Code the Dream

At Code the Dream, we envision a world in which tech innovation comes from all of us and benefits all of us.

React.js

View All Courses
Learn front-end web applications using the popular React framework based in Javascript
JavaScript
React
Vite

Build the front end of a task management app with React and publish it online as a project for your portfolio.

What you’ll learn

This is course 2 of 4 in the Web Development track: Intro to Programming → React.js → Node.js/Express → Full-Stack Practicum.

  • Weeks 1-3: React foundations. Set up a React project with Vite, build components with JSX, and manage data with states and props.
  • Weeks 4-6: Interaction and forms. Respond to user actions, build forms, and reorganize your code into reusable hooks and smaller components.
  • Weeks 7-10: Data and app structure. Load data from an API, improve performance, manage more complex state with useReducer and Context, and add page navigation with React Router.
  • Week 11: Security and deployment. Protect your app against common attacks and publish it online.
View Lesson-by-Lesson Objectives

What you’ll build

  • The front end of a task management app that lets users create, view, update, and delete tasks, and move between pages. You’ll add forms that check user input, load data from an API, and let users sort and page through results.
  • By the end of the course, your app:
    • Is styled professionally and works on phones, tablets, and computers.
    • Is accessible to users with disabilities.
    • Follows security best practices, including input validation.
    • Is live on the internet through Vercel, with a README and a link to the live demo.

This app is half of a full-stack project. In Node.js/Express, you build the back end of the same app.

Tools you’ll use

JavaScript, React, Vite, React Router, Vercel, Git & GitHub, VS Code.

Prerequisites

You must complete Intro to Programming (JavaScript) first, unless you test out by completing the Advanced class pre-work when you apply. You should be comfortable with:

  • HTML, including forms
  • CSS, including Flexbox, Grid, and responsive layouts
  • JavaScript fundamentals: functions, loops, arrays, objects, and array methods such as map and filter
  • The DOM
  • Git and GitHub, including branches and pull requests

Supplies

  • A laptop or desktop computer with at least 100GB of free disk space and 16GB of RAM. Chromebooks and similar devices do not work.
  • A webcam for live mentor sessions (preferred, not required)
  • Reliable internet
  • VS Code
  • A free GitHub account

What React Students Have to Say

“
Photo of - Mohammad Z., React Student
CTD’s scholarship has had a profound impact on my life. By awarding me the opportunity to join the React Front End Class, I was able to enhance my skills significantly. The class provided an exceptional learning experience, enabling me to gain valuable insights and practical knowledge that have greatly improved my front-end development abilities. CTD’s support has undoubtedly been transformative, opening doors to new opportunities and empowering me to excel in my chosen field.
– Mohammad Z., React Student
“
Photo of - Alejandro., React Student
Being a student with Code the Dream for the past year has been an incredible journey for me. I have grown immensely from the introductory classes to the advanced node courses and now the React course. As someone with an immigrant background, I never had access to programming resources or exposure until a mentor introduced me to CTD. I have expanded my network, strengthened my programming skills, and developed the confidence to pursue contracting positions in the near future. CTD has provided me with technical education and a supportive community. The mentors and fellow students have become like family, inspiring and motivating me every step of the way. I am incredibly grateful to Code the Dream for its transformative impact on my life.
– Alejandro., React Student