
A quick look at the DataTable component that we will be building.
Overview of the calendar component that we will be building in this course. The part 1 and 2 is available free on youtube. The major enhancements will be available here on udemy.
Lets use the React API to create simple element.
Lets create nested element.
A quick intro to Babel and JSX.
Understand the difference between built in HTML element vs custom component.
Lets learn hown to embed expressions in JSX
Lets see how to use more than one element in the render.
In this section we will introduce you to component and take a dig at functional component in React.
In this episode we will have look at how to nest components within one another.
In this tutorial we will learn how to create variable within the component and also see how to use this concept to pass inline styles.
In this section we will implement the delete project feature.
In this episode, we will implement the feature to mark a Project as completed.
Install create-react-app
A quick overview of files created by create-react-app.
In this episode we will render the form labels dynamically.
In this episode we will complete the dynamic component creation by rendering the form elements dynamically.
In this session we will add support for radio buttons, check boxes and select elements. We will also create a table of data to pass initial values to the Dynamic Form Component. This can be useful in "EDIT/UPDATE" scenarios.
In this tutorial we will learn how to implement simple drag and drop feature in React without using any third party library.
An overview of what we will be building.
This is the updated tutorial.
Treat this offer as a "One Time Investment" to all future updates.
This course will take you from React Novice to React intermediate (advanced, or Expert level, with practice). We will covering some fundamentals in the beginning but move on to applications and the cool stuff.
In this course we will also code a reusable DataTable component from scratch, implement drag and drop without using any third-party library, create JSON based dynamic forms and much more.
You will learn many fundamental aspects of React Component design and also learn how to take this approach to build any UI component that you wish. Once you successfully complete the course you will have learned how to build a pretty advanced React component that contains the following features.
[ x ] React fundamentals
[ x ] Component in depth
[ x ] Hooks
[ x ] Understanding Virtual DOM and diffing
[ x ] Context API
[ x ] Learn to build dynamic form component using JSON.
[ x ] Customizing components using props
[ x ] Learn to add drag and drop feature without using third party library.
[ x ] Bind data to a table layout
[ x ] Searching on any columns
[ x ] Pagination, with custom pagination view
[ x ] Drag and reorder table columns
[ x ] In-place editing
[ x ] Custom cell renderer
[ x ] Attach the dynamic form to the DataTable.
[ x ] React Common Patterns
[ x ] State Management
[ x ] Server Side Rendering(SSR) and more
Planned overall agenda for the course:
Section 1 -
Fundamentals of React
Introduction
Fundamentals of React
JSX in depth
Component based design
Fragment
Functional Component
Stateful Component
Event Handling
Conditional
State Management
Life Cycle
Error Handling
Section 2 -
Advanced React
Type checking with PropTypes
Refs and the DOM
Uncontrolled Components
Higher Order Components (HOC)
Render Props
Performance Optimization
Context API
Portals
Integrating with other JavaScript
Section 3 - Building a simple CRUD app with React
Section 4 - New React Features
Section 5 - Context API Demo
Section 6 - Building a simple Modal Component
Section 7 - Building a Tagging Component
Section 8 - Building a Calendar Component
Section 9 - Building a DataTable Component
Section 10 - React Drag and Drop Tutorial
We will minimize the use of third party libraries/frameworks and will only include them when absolutely required.
NOTE: Most of the components developed in this training, is kept simple so that even a beginner could understand. To make it work in production scenarios, this has to be thoroughly tested and adapted as needed.
Enjoy Programming!!
(Everyone can code!)