This is a simple repo with Typescript + Parcel + React + ReactDOM
- uConnect
- clone
- cd into directory
- command:
yarn - command to start:
yarn start
- Whenever you write
<html>or<ReactCOmponent />- use
.tsxextension. import * as React from 'react'
- use
- Create a complex website layout
- create Footer.tsx
- create Header.tsx
- create Sidebar.tsx
- Import all those in the App.tsx
- Combine all components.
- There are two types of components
- Class Based Component or Statefull component
- rules
- it must be extended from
React.Component - it must have a method called
render()
- it must be extended from
- Notes
- You can still make a class components without a state in it.
- rules
- Functional Components or Stateless Components
- When you write a JSX or TSX inside a normal function, it becomes Functional Component.
- Why we call it stateless? Because it lacks
statelike Class Components
- When we write component we can decide what type of component should we write by just identifying whether this component needs a state or not.
- Class Based Component or Statefull component
-
Complete the registration form
-
Create another form which should take inputs:
- first name
- last name
- father name
- address (textarea)
- gender ( radio button )
- interest
['cricket', 'volleyball', 'books']=> checkbox - University
['KIU', "QU", "AKU" ]
User should be able to sumbit and see informatio on the left side of the page.
1. Props
2. Functions as Props
3. !important: Life Cycle Hooks
4. What is parent component and what is child Component
- Life Cycle Hooks Continue
- SPA (single page application ) SPW -> Single Page Website
- Pages -> Router
- Create a new react project from scratch
- create pages for each endpoint from here (https://jsonplaceholder.typicode.com/)
- fetch and display results in each page