MERN Stack Development with React , Redux , Node 2021

Explore React, an open source JavaScript library for building user interfaces and single page applications. See how components and a root component with index.js design a portfolio page.

Explore how components serve as the core building blocks of React, enabling reusable interfaces across a single-page application such as the homepage, item details, and checkout in an e-commerce layout.

Explore JSX, the JavaScript and XML syntax, and learn how to render content with React components in a single-page application, contrasting traditional DOM manipulation with JSX rendering.

Explore ES6 (ECMAScript 2015), a major upgrade to JavaScript that enhances simplicity and readability, introducing features like const, arrow functions, spread operator, and template literals for React development.

Explore the let keyword in JavaScript, compare let and var, and learn how block scope in a for loop limits access after the loop, with practical console demonstrations.

Learn how to declare constants with the const keyword in JavaScript and prevent reassignment after declaration, as shown by an attempted change and resulting console errors.

Explore the difference between traditional functions and arrow functions in JavaScript, learn their syntax, parameter handling, and when to use arrow functions in React applications.

Master the for-of loop to iterate arrays and strings in JavaScript, compare it with the traditional for loop, and print values including languages such as JavaScript, Python, Ruby, and C++.

Learn how to use template literals in JavaScript to interpolate variables with ${...}, avoid string concatenation, and work with backticks for cleaner, readable output.

Explore how spread operator simplifies adding elements to arrays in javascript, showing how to prepend and append values to the start and end without push or unshift, with practical examples.

Create a new React application with create-react-app and print hello world. Start the development server, view at localhost 3000, and observe automatic reloading as you edit src files.

Explore the React project structure: node_modules for npm-installed libraries, public for static assets and index.html, and src for components and styles, plus package.json and .gitignore.

Learn how to debug a React app by tracing the execution order from public/index.html to src/index.js and root components, and avoid changing core files to prevent errors.

Explore React components as the building blocks, including class components (stateful) and functional components (statelets), with Hello World examples and the render method to display content.

Master building a React class component that renders hello world, including import and export statements, extending React.Component, and implementing the render method.

Learn to implement a React functional component in MERN stack by converting a class component example to a functional one, returning hello world JSX and exporting for a parent component.

Build a parent and a child using functional React components, export and import them, and reuse the child to demonstrate a reusable component approach.

Learn how to build a stateful class component in React by defining this.state in the constructor, rendering state variables like player and country, and using them in JSX.

Declare and manage state in a React class component using a constructor and this.state, then read values and update them with setState by passing a key-value object.

Explore props in class components by wiring a parent and child and passing data from parent to child via props, with keys like language and JavaScript.

Explore how to use props in functional components by passing data from a parent to a child, including multiple props, and reading them without this keyword.

Learn event handling in React class components, including click, input change, and mouse over events, with alerts demonstrating onClick, onChange, and onMouseOver in a React app.

Learn to handle events in React class components, using arrow-function event handlers, and explore onClick and onChange event handling, contrasting with functional components.

Apply inline styling in React using the style prop with double curly braces to set color and background color. Explore combining multiple style properties and transitioning to local styles.

Master local CSS in React by creating separate stylesheets per component, importing them, and styling with class names and dot notation to control color and background.

Explore dynamic styling in React using class components and state to change text color and background color via button clicks, applying inline styles with the style prop and this.setState.

Explore building a counter application named counterprogram in a React class component, with a number state initialized to zero and two buttons to increment or decrement the value.

Discover how class components use lifecycle methods, focusing on componentWillMount and componentDidMount, which run before and after rendering to modify state and manage effects.