Skip to content

Latest commit

 

History

History
84 lines (58 loc) · 2.5 KB

overview.md

File metadata and controls

84 lines (58 loc) · 2.5 KB

Title

Getting started with React

Role(s)

  • student
  • developer

Level

  • Beginner

Product(s)

  • React.js
  • Azure Static Web Apps
  • Visual Studio Code

Prerequisites

  • HTML/CSS
  • JavaScript
  • Git
  • npm
  • Some experience with React

Summary

React.js is the most popular front-end JavaScript framework. Through JSX, a combination of HTML and JavaScript, developers are able to create views in a natural fashion. Developers can also create components for reusable blocks across their applications. This learning path will introduce you to React, and the core skills you need as a developer to use this powerful framework.

Learning objectives

  1. Understand React
  2. Install React and create your first project
  3. Create custom reusable components
  4. Manage state and events

Chunk your content into subtasks

Identify the subtasks of module title

Subtask What part of the introduction scenario does this subtask satisfy? How will you assess it: Exercise or Knowledge check? Which learning objective(s) does this help meet? Does the subtask have enough learning content to justify an entire unit? If not, which other subtask will you combine it with?
Understand React Understand React Exercise Understand React Install React and create your first project
Install react and create your first component Install react and create your first component Exercise Install react and create your first component Understand React
Create custom reusable components Create custom reusable components Exercise Create custom reusable components Yes
Managing state and events Managing state and events Exercise Managing state and events Yes

Outline the modules

  1. Getting started with React

    • What is React?
    • Introducing JSX
    • Creating your first project
    • Hello, world
    • Working with dynamic data
    • Adding style

  2. Working with components and data

    • Introducing props and components
    • Adding props to a component
    • Adding logic to JSX
    • Working with complex data
    • Map function
    • Displaying lists

  3. State and events

    • State concepts
    • Adding state to a project
    • Working with events
    • Updating state in React
    • Adding events to a component
    • Understanding hooks
    • Using hooks in a project

Notes

Note any additional information that may be beneficial to this content such as links, reference material, etc.