React.js in 3.5 Hours | Full Beginners Tutorial

React.js in 3.5 Hours | Full Beginners Tutorial

Learn React js in 3.5 hours with this full tutorial for beginners! React is an open-source, front end, JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications

Learn React js in 3.5 hours with this full tutorial for beginners!

Table of Contents:

  • 0:00 - Introduction
  • 9:02 - What is the DOM?
  • 25:00 - React vs ReactDOM
  • 30:10 - Setting up React
  • 38:47 - Babel & JSX
  • 48:35 - JSX Interpolation
  • 51:59 - React Components
  • 56:34 - Create React App
  • 1:08:52 - Structuring React components
  • 1:13:42 - Building the CountButton component
  • 1:21:09 - useState hook & React state management
  • 1:33:50 - React functional component lifecycle
  • 1:36:37 - Reusing components
  • 1:38:20 - Props
  • 1:44:59 - Props vs State
  • 1:46:04 - Styling & style props
  • 1:55:10 - External style sheets
  • 2:03:45 - Building a search bar
  • 2:07:02 - Handling inputs in React
  • 2:10:23 - onUpdate input event
  • 2:19:00 - Building a clear input button
  • 2:23:00 - Conditional rendering
  • 2:29:14 - Rendering a list of items & the map function
  • 2:34:39 - The “key” prop
  • 2:37:33 - Using the filter function to filter our list
  • 2:42:01 - Making the SearchBar more reusable
  • 2:48:25 - useEffect hook
  • 2:58:08 - Simulating loading data with useEffect
  • 3:04:51 - Adding a loading indicator
  • 3:10:17 - Loading data from an external API
  • 3:18:50 - The “children” prop
  • 3:24:55 - Closing remarks & outro

Links: Vs Code - https://code.visualstudio.com/ React Script Tags - https://reactjs.org/docs/add-react-to-a-website.html#step-2-add-the-script-tags Babel Playground - https://babeljs.io/repl Babel script tag - https://babeljs.io/setup#installation (click on "In the browser" and scroll down to "usage" section) Create React App - https://github.com/facebook/create-react-app#creating-an-app Mac Terminal Tutorial - https://macpaw.com/how-to/use-terminal-on-mac Windows Terminal Tutorial - https://techtipvault.com/windows/command-prompt-windows-10-cmd-guide/ Fake Store API - https://fakestoreapi.com/docs

react reactjs javascript web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

ReactJS Web App Development Services

We provide top-notch ReactJS development services to global clients. Hire expert ReactJS developers from top React JS development company, Skenix Infotech.

ReactJS: The Javascript Developer’s Guide

This article will walk you through the concepts you would need to know to step into the world of widely used ReactJS.

Best ReactJS Development Company - Hire React JS Developers USA

Hire ReactJS developers from a Top ReactJS Development Company in USA to developing User Interfaces on ReactJS framework.

Hire Dedicated React Native Developer

Have you ever thought of having your own app that runs smoothly over multiple platforms? React Native is an open-source cross-platform mobile application framework which is a great option to create mobile apps for both Android and iOS. **[Hire...