Buy Now AED 170.99 + VAT

Monthly Subscription Starting at AED 99 + VAT

React Basics
  • Level Foundation
  • Duration 27 hours
  • Course by Meta
  • Offered by

About

React is a powerful JavaScript library that you can use to build user interfaces for web and mobile applications (apps). In this course, you will explore the fundamental concepts that underpin the React library and learn the basic skills required to build a simple, fast, and scalable app. By the end of this course, you will be able to: - Use reusable components to render views where data changes over time - Create more scalable and maintainable websites and apps - Use props to pass data between components - Create dynamic and interactive web pages and apps - Use forms to allow users to interact with the web page - Build an application in React You'll gain experience with the following tools and software: - React.js - JSX - React - HTML, CSS and JavaScript - VSCode You will be able to leverage the potential of this course to develop new skills, improve productivity, act effectively with data and boost your career. This is a beginner course for learners who would like to prepare themselves for a career in mobile development. To succeed in this course, you do not need prior development experience, only basic internet navigation skills and an eagerness to get started with coding.

Modules

Course Introduction

    • 2 Videos
    • 7 Readings
    • 1 Discussion
Show info about module content

1 Discussions

  • What do you hope to learn?

2 Videos

  • Introduction to the course: React Basics
  • How is React used in the real world?

7 Readings

  • Course syllabus for React Basics
  • How to be successful in this course
  • Before you learn React
  • JavaScript modules, imports - exports
  • Working with Labs in this course
  • Additional reading
  • Setting up a React project in VS Code (Optional)

React Components and Where They Live

    • 6 Videos
    • 5 Readings
    • 2 Lab
    • 3 Assignment
Show info about module content

3 Assignment

  • Self review: Your first component
  • Self review: Creating and importing components
  • Knowledge check: React components and where they live

2 Labs

  • Your first component
  • Creating and importing components

6 Videos

  • Why React?
  • React.js overview
  • Introduction to functional components
  • Creating React components
  • The React project structure
  • Importing components

5 Readings

  • Transpiling JSX
  • Solution: Your first component
  • Customizing the project
  • Solution: Creating and importing components
  • Additional resources for React components and where they live

Component Use and Styling

    • 7 Videos
    • 9 Readings
    • 2 Lab
    • 3 Assignment
Show info about module content

3 Assignment

  • Self review: Passing props
  • Self review: Multiple components
  • Module Quiz

2 Labs

  • Passing props
  • Multiple components

7 Videos

  • Principles of components: Props
  • Using props in components
  • Introducing JSX
  • Practical styling
  • Embedded JSX expressions
  • Embedding in attributes
  • Module summary

9 Readings

  • Dissecting props
  • Solution: Passing props
  • Props and children
  • Styling JSX elements
  • JSX syntax and the arrow function
  • Ternary operators and functions in JSX
  • Expressions as props
  • Solution: Multiple components
  • Additional resources

Dynamic events and how to handle them

    • 4 Videos
    • 4 Readings
    • 1 Lab
    • 3 Assignment
Show info about module content

3 Assignment

  • Knowledge check: Events and errors
  • Self review: Dynamic events
  • Knowledge check: Dynamic events and how to handle them

1 Labs

  • Dynamic events

4 Videos

  • Types of events
  • Common event handling
  • Syntax for handlers
  • User events

4 Readings

  • Eventful issues
  • Event handling and embedded expressions
  • Solution: Dynamic events
  • Additional resources

Data and Events

    • 9 Videos
    • 5 Readings
    • 1 Lab
    • 6 Assignment
Show info about module content

6 Assignment

  • Knowledge check: Data flow
  • Knowledge Check: State the concept
  • Knowledge check: Passing state
  • Self review: Managing state in React
  • Knowledge check: State or stateless
  • Module quiz: Data and state

1 Labs

  • Managing state in React

9 Videos

  • Parent-child data flow
  • Children and data
  • What are hooks?
  • What is state?
  • Observing state
  • Managing state
  • React state management
  • Stateful vs. stateless
  • Module summary

5 Readings

  • Data flow in React
  • Using hooks
  • Prop drilling
  • Solution: Managing state in React
  • Additional resources

Linking and Routing

    • 4 Videos
    • 5 Readings
    • 1 Lab
    • 3 Assignment
Show info about module content

3 Assignment

  • Self review: Creating a route
  • Knowledge check: Navigation
  • Knowledge check: Conditional updates

1 Labs

  • Creating a route

4 Videos

  • Basic Types of navigation
  • The navbar
  • Conditional rendering
  • Single view conditional updates

5 Readings

  • Navigation
  • Solution: Creating a route
  • Applying conditional rendering
  • Conditional components
  • Additional resources

Using Assets in React

    • 5 Videos
    • 5 Readings
    • 1 Discussion
    • 2 Lab
    • 3 Assignment
Show info about module content

3 Assignment

  • Self review: Displaying images
  • Self review: Song selection
  • Module quiz: navigation, updating and assets in React.js

1 Discussions

  • What challenges did you encounter when creating your song selection feature?

2 Labs

  • Displaying images
  • Song selection

5 Videos

  • What is an asset and where does it live?
  • Using embedded assets
  • Audio and video
  • Create an audio / video component
  • Module summary: navigation, updating and assets in React.js

5 Readings

  • Bundling assets
  • Solution: Displaying images
  • Media packages
  • Solution: Song selection
  • Additional resources

Graded Assessment: Calculator app

    • 2 Videos
    • 2 Readings
    • 1 Discussion
    • 1 PeerReview
    • 1 Lab
Show info about module content

1 Peer Review

  • Peer review: Build a calculator app

1 Discussions

  • Share the challenges you encountered when creating your calculator app

1 Labs

  • Build a calculator app

2 Videos

  • Course recap: React Basics
  • Exemplar: Build a calculator app

2 Readings

  • About this graded assessment: Calculator app
  • Solution: Build a calculator app

Course wrap up

    • 1 Videos
    • 1 Readings
    • 1 Discussion
Show info about module content

1 Discussions

  • What did you find most interesting in this course?

1 Videos

  • Congratulations, you completed React Basics!

1 Readings

  • Next steps

Auto Summary

Explore the fundamentals of React in this beginner-friendly course designed for aspiring mobile developers. Taught by Coursera, "React Basics" covers essential concepts and skills, including reusable components, props, and dynamic web pages. Gain hands-on experience with React.js, JSX, HTML, CSS, and JavaScript over 1620 minutes. Ideal for those with basic internet skills, this foundational course offers a scalable path to building interactive apps. Available with a Starter subscription.

Taught by Meta Staff
Instructor

Taught by Meta Staff