What topics will be covered in the course?
Introduction to React Basics
Introduction to the React Course:
Opening words.
What is React and a bit about the history of the library.
Emphasis on working with a codebase system.
Basic React Component:
Learning what JSX is in React.
How to write a basic first component.
Building a component with static data and understanding the basics.
Building a List with Dynamic Data:
Building elements dynamically.
Using the capabilities of Array.prototype.map for dynamic building.
Importing and exporting components from a file.
Building a Table with Dynamic Data:
Structure of the table and its components in HTML.
Using a nested loop to build a table.
Using the map function in a nested way.
Using dynamic data from an imported file.
Styling with the Style Object:
Understanding the difference between HTML and JSX.
Learning to style elements on the page.
Practicing dynamic element building in a challenging way with learned styles.
Components with State and Events
Integrating CSS Files in React:
Incorporating the world of styles as an integral part of component building.
Understanding what className is and the difference between HTML and JSX.
Incorporating a comprehensive exercise of all material learned up to this point in the course.
Emphasizing CSS rules and how they integrate into our built system.
Integrating Props in Components:
What are props in React and when to use them.
Building components with props and common methods of writing.
Using components we wrote in dynamic building.
Building a Table with Props:
Building a table using props.
Creating a smart component in table construction.
Combining dynamic building with multiple components using props and styling with CSS.
Using Events and useState:
How to link onClick type events to elements.
What are smart components and why we need them.
What is the react hook of type useState and how to use it.
Creating boolean conditions within the JSX of a component.
Connecting event creation and state storage for building smart React components.
Using the onChange Event:
How to add an input to the page and use useState to store input values.
Building a dynamic list with user-input data.
In-depth explanation of arrays and the difference between value and reference.
Understanding how to work with arrays stored on the component's state.
Advanced Topics and API Usage
Building a Dynamic Table with Events:
Understanding how to integrate everything learned so far to build a table dynamically.
Using useState to store a number of inputs.
Example of using complex state with an array of objects.
Using the useEffect Hook:
What is the react hook of type useEffect and how and when to use it.
Performing server communication using fetch.
Showing methods to secure our code to avoid unnecessary errors.
Building a smart component that combines both useState and useEffect hooks.
Example of Using useEffect in Server-Side Search:
Exploring additional uses for useEffect.
Understanding how the component's lifecycle affects our code implementation.
Presenting a complex example of using useEffect.
Using Additional Inputs:
What is a checkbox input and how to use it.
What is a radio input and how to use it.
What are datetime and datetime-local inputs and when to use them.
Building a Table from API with Result Filtering:
Making an API request to fetch data about a table.
Building the table dynamically.
Learning how to perform searches through smart result filtering.
Discussing code architecture.
Advanced Topics and Code Architecture
Using Advanced Filters:
Building a table displaying information about flights.
Expanding the use of the table with a smart row component.
Using inputs to build filters for the table, using checkbox, datetime, and text inputs.
Bulma Library for Advanced Styling:
Learning to embed ready-made styles.
Using the bulma package to add color and styles to React projects built together.
Embedding styles in an existing component and going through the documentation of the library we will use.
Sorting in JavaScript:
Improving an existing table component and adding sorting capabilities to it.
In-depth understanding of how sorts work on arrays with numbers, strings, and objects.
Seeing how to deal with special sorting when our field is not a straightforward comparison.
Communication Channels Between Components:
Learning how a child component can communicate with a parent component.
Implementing bulma styling on several components.
Building a versatile component that allows us to embed tabs in the application.
Seeing examples of using props of type function.
Conclusion