React JS 17.0.2 in one video By Thapa Technical

Complete React JS Tutorial with 5 Projects In 2021

Steps, we will cover in our Complete React JS Projects 👇

Install the Recommended version of NodeJS



Click Node JS




check the version of NodeJS node -v on cmd




What is React?




Install React JS in our system using " npx create-react-app app_name "




Go to the main directory by typing cd app_name




How to run the React Project 🤔 Oooo It's simple
just write the npm or yarn start command




Understand the folder Structure




Remove the Boiler Plate




What's New in React 17th Version? We will see it after our first component.




Vs Code Extension to make our React life Easy

1. VS Code JavaScript (ES6) snippets


2. ES7 React/Redux/GraphQL/React-Native snippets






Hello World In React JS




Our First Component in React JS


• Three things are mandatory & that are
  import React from "react"
  any one function (functional Component)
  It should always return JSX.




After React 17.0 Version, Now no need to write
import React from "react" Anymore










What is JSX? Rules to write JSX.

1. It always return single element


2. use Div or React Fragment to wrap all your JSX Code


3. ClassName in place of class


4. Need to close all non closing Tags in JSX


5. Use camelCase for attributes




Autocomplete for React JSX 😍 Very Important

1. Open the settings


2. Open Setting(JSON) file located on Top Right Corner


3. Add the following Code => "emmet.includeLanguages": {"javascript": "javascriptreact"},




What is Nested Components?

;


CSS in React JS




Props in React JS




Props Children????




JS important Methods

1. Map Method


2. Spread Operator & Many More






Events In React JS





Todo List Projects 

Here is the complete CSS file of Todo List











Weather Application Project

Here is the complete CSS file of Weather Application List

Get Complete Source Code Projects



Complete Code Resturant & Hooks