React Basics for Beginners

Set up Node.js and npm, install create-react-app, scaffold a new React app, and run npm start to launch the development server.

Create a React app from scratch by building index.js, importing React and ReactDOM, rendering a hello world element into the root div, and learning Babel, virtual dom, and Prettier.

Install jquery, popper.js, and bootstrap in your React app, then import jquery, popper.js, bootstrap.js, and bootstrap.css to enable bootstrap's classes. Verify by using a btn btn-danger to see the styling.

Learn how to create and export React components using jsx, including class components, render methods, importing and exporting, and using React.Fragment to wrap multiple elements.

Learn how to add global and component-specific css in a React app by creating css files, importing them (./src/index.css), and applying styles such as a highlight class across components.

Implement a bootstrap navbar in a React app by using the bootstrap example, add nav items and a brand, and ensure responsiveness with a toggler.

Fix error - dom property class shows replacing html class with className in React to avoid conflicts with javascript class keyword, and use /# for href values in camelCase code.

Explore nested components by building a root app that renders a navbar and a main content area using React fragments, imports, and default exports to establish a clear component hierarchy.

Learn to render dynamic content with state in React components, using this.state and setState, render expressions in braces, and apply styling with className and Bootstrap.

Handle events in React by attaching onClick, onFocus, and onBlur, calling internal methods with this.methodName, and render the customers count with React expressions and badge styling.

Learn to update a React component’s state with setState, avoid direct state mutation, and use arrow functions to bind this, so React re-renders changed values in the virtual dom.

Render a customers table in React by mapping an array stored in state, displaying id, name, and phone, with unique keys and nested address city.