React Basics by Coursera
Course Highlights
- Use reusable components to render views where data changes over time
- Organize React projects to 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 app. Build an application in React
Skills you will learn!
Curriculum
47 Topics
Introduction to the course: React Basics
How is React used in the real world?
Why React?
React.js overview
Introduction to functional components
Creating React components
The React project structure
Importing components
Principles of components: Props
Using props in components
Introducing JSX
Practical styling
Embedded JSX expressions
Embedding in attributes
Module summary
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)
Transpiling JSX
Solution: Your first component
Customizing the project
Solution: Creating and importing components
Additional resources for React components and where they live
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
Self review: Your first component
Self review: Creating and importing components
Knowledge check: React components and where they live
Self review: Passing props
Self review: Multiple components
Module Quiz
What do you hope to learn?
Your first component
Creating and importing components
Passing props
Multiple components
33 Topics
Types of events
Common event handling
Syntax for handlers
User events
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
Eventful issues
Event handling and embedded expressions
Solution: Dynamic events
Additional resources
Data flow in React
Using hooks
Prop drilling
Solution: Managing state in React
Additional resources
Knowledge check: Events and errors
Self review: Dynamic events
Knowledge check: Dynamic events and how to handle them
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
Dynamic events
Managing state in React
29 Topics
Basic Types of navigation
The navbar
Conditional rendering
Single view conditional updates
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
Navigation
Solution: Creating a route
Applying conditional rendering
Conditional components
Additional resources
Bundling assets
Solution: Displaying images
Media packages
Solution: Song selection
Additional resources
Self review: Creating a route
Knowledge check: Navigation
Knowledge check: Conditional updates
Self review: Displaying images
Self review: Song selection
Module quiz: navigation updating and assets in React.js
What challenges did you encounter when creating your song selection feature?
Creating a route
Displaying images
Song selection
10 Topics
Course recap: React Basics
Exemplar: Build a calculator app
Congratulations you completed React Basics!
About this graded assessment: Calculator app
Solution: Build a calculator app
Next steps
Peer review: Build a calculator app
Share the challenges you encountered when creating your calculator app
What did you find most interesting in this course?
Build a calculator app
React Basics
Related React JS Courses
Thank You!
Your review has been submitted successfully.