About Courses Programs Contact Log in Sign up

Home›REACT JS›01 - Conditionally displaying components

🎬

Video not available

01 - Conditionally displaying components

Front End DevelopmentLesson⏱ 4m38

Next chapter →☰ Syllabus ← Previous

Chapters

87 lessons

00 - Introduction

01 - Installation

02 - Creating an application

03 - Hello World

01 - Understanding the syntax

02 - JSX expressions

03 - JSX and ES6 expressions

04 - Specifying attributes in JSX

05 - Specifying child elements

06 - JSX represents objects

01 - Explanations

02 - Updating a displayed element the JS way

01 - Function Components and Class Components

02 - Props and functions

03 - Props and classes

04 - Understanding classes

05 - Wrap-up before the practical exercise

06 - Introduction to the exercise

07 - Exercise solution - Managing components

08 - Exercise solution - Managing the Props object

01 - Introduction to state management

02 - Setting up state

03 - How to update a component

04 - Lifecycle methods

06 - Going further with state

01 - Handling events

01 - Conditionally displaying components

02 - Storing elements in variables

03 - Linking state and conditional rendering

04 - Updating state and handling conditional rendering

05 - The && operator

06 - Ternary conditions

01 - Managing lists in React JS with the map() method

02 - Basic list components

04 - Extracting components with keys

01 - Controlled components

02 - Handling multiple inputs

02 - Composition and inheritance

03 - Lifting state up

04 - Binding state to input values

05 - Setting up the conversion methods

06 - Conversion

08 - Ternary condition

09 - Handling the form reset

11 - Conclusion

01 - Spread operator & object destructuring

02 - The map() and filter() methods

03 - Backticks and destructuring the Props object

04 - Adding style to a React component

05 - Conditionally applying classes

06 - Introduction to building the Todo app

01 - Introduction

02 - The State Hook

03 - The Effect Hook

04 - Effects with and without cleanup

05 - Explanations

06 - Introduction to the exercise

07 - Creating the component

08 - Linking a state to useEffect

01 - Introduction

02 - Creating the application

03 - Setting up the architecture

04 - Creating the components

05 - Setting up the state and the list of todos

06 - Handling the addition of a Todo

07 - Handling the deletion of a Todo

08 - Handling the toggle on the reminder property

09 - Handling the toggle of the form display - onClick

10 - Handling the todo counter and displaying a message if the list is empty

11 - Handling the delete button

12 - Handling the toggle on the reminder property of all todos

13 - Setting up navigation in React JS

01 - Installing a fake JSON server

02 - Configuring the JSON server

03 - Loading todos from the server

04 - Handling the deletion of a todo on the server

05 - Handling the addition of a TODO

06 - Handling the update of a TODO