React Crash Cours For Busy Developers With React Hooks[2023]

Open Visual Studio Code, create and open a new folder for your React app, then verify npm and Node versions, create the app, and start it with npm run start.

Explore the project file structure, including node_modules, the public folder with HTML, CSS, and assets, the crc folder, and src files like app.css, App.js, index.js, plus package.json, package-lock.json, and gitignore.

Open a new terminal and run npm install to add the needed packages for your React project. Copy and paste the bootstrap installation command to install Bootstrap in your app.

Explore how React components enable reusable UI blocks like headers, sidebars, and posts to minify code and reuse components across the project.

Learn to style React components by creating an assets folder, adding a main.css and header.css under a components folder, and importing them in header and index to render red text.

Apply inline styles to an HTML element by using the style attribute, set the color to red, save, and preview the result in the browser.

Create a functional React component and pass data via props from App.js to a child user card, using a user data object with name, age, and job.

Learn how to use state in a React component with the useState hook, initialize count to zero, and update it via a button to increment or decrement.

Discover how React hooks like useState and useEffect manage state and effects in components, with useState defining a state and its initial value and a function to update it.

Use effect is a React life cycle function that updates state after actions. In auto counter example, useState starts at zero and useEffect with an empty dependency array runs once.

Demonstrate toggling dark and light themes in a React app using useState and useEffect, persisting the theme in local storage via a button click.

Learn to map an array of items in React by creating a data source, importing it, and rendering each element with props and keys in a grid of components.