SLASSCOM Bootcamp Curriculum
Contributed by the IT industry as a guidance to educational institutes.
This project is maintained by SLASSCOM
Home > Web Application Development > React: Web Framework
Topic: React - Web Framework
- Lesson: Introduction to React, JSX and Rendering Elements
- Lesson: Components and Props
- Lesson: State and Lifecycle
- Lesson: Handling Events & Conditional Rendering
- Lesson: Lists, Keys & Forms
- Assessment: Assessment
Lesson 1
Introduction to React, JSX and Rendering Elements
- Self Learning Duration
- 90 mins
- Lecture Duration
- 120 mins lectures
- Lab Tutorial Duration
- N/A
Self learning content
- Follow Introduction to the React
- Watch React JS Crash Course
- [Optional] Follow React Tutorial
Lecture content
Teach following React concepts with live coding or code samples.
- Introduction to web frameworks and React
- JSX
- Rendering Elements
Lab and tutorials
N/A
Lesson 2
Components and Props
- Self Learning Duration
- 90 mins
- Lecture Duration
- 120 mins
- Lab Tutorial Duration
- N/A
Self learning content
N/A
Lecture content
Teach following React concepts with live coding or code samples.
Lab and tutorials
N/A
Lesson 3
State and Lifecycle
- Self Learning Duration
- 90 mins
- Lecture Duration
- 120 mins
- Lab Tutorial Duration
- N/A
Self learning content
N/A
Lecture content
Teach following React concepts with live coding or code samples.
Lab and tutorials
N/A
Lesson 4
Handling Events & Conditional Rendering
- Self Learning Duration
- 90 mins
- Lecture Duration
- 120 mins
- Lab Tutorial Duration
- N/A
Self learning content
N/A
Lecture content
Teach following React concepts with live coding or code samples.
Lab and tutorials
N/A
Lesson 5
Lists, Keys & Forms
- Self Learning Duration
- 90 mins
- Lecture Duration
- 120 mins
- Lab Tutorial Duration
- 300 mins
Self learning content
N/A
Lecture content
Teach following React concepts with live coding or code samples.
Lab and tutorials
- Tutorial: Intro to React with tic-tac-toe using the online IDE
- Follow Thinking in React
- Follow How to get started with React — a modern project-based guide for beginners
Assessment 1
Create a simple TODO application using the react framework. Follow this wireframe
scope
- User should be able add todo item
- User should be able to enter in the title
- User should be able to enter description
- User should be able to select priority (low, medium and high)
- If the title is empty, disable the “Add to ToDo List “ button.
- Once user submit, the title and description should be cleared
- User should should be able to view the Todo items
- It should have priority, description and title
- User should be able delete the item
Expected outcome
- Use proper state management (state and props)
- Create reusable components
- Use javascript functions - map()
- Create responsive UI
- Use stylings using react
Instructions
- Check given wireframe
- You can use any css framework or npm package.
- You can add additional features apart from the given scope.
Delivery
- Use https://codesandbox.io/ to create project
- Once you complete, send us the link