https://github.com/bekcodingaddict/reactjs-practices

https://github.com/bekcodingaddict/reactjs-practices

Last synced: 5 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/bekcodingaddict/reactjs-practices
• Owner: BekCodingAddict
• Created: 2023-12-17T12:17:14.000Z (11 months ago)
• Default Branch: master
• Last Pushed: 2024-07-13T13:02:36.000Z (4 months ago)
• Last Synced: 2024-07-13T14:22:39.729Z (4 months ago)
• Language: JavaScript
• Size: 620 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# About ReactJS

## npx 

 - [x] npx create-react-app  

## npm 

 - [x] npm install create-react-app -g - install pacages for globally

   - create-react-app  

## Component

 - [x] Components describe a part of the user interface.They are re-usable and can be nested inside othe components.

 - ### Component Types 

 - [x] Stateless Functional Component:

   - JavaScript Function:

   ~~~

   function Welcome(props){

    return 
Hello, {props.name}
;

   }

   ~~~

 - [x] Stateful Class Component

   - Class extending Component class 

   - Render method returning HTML

   ~~~

   class Welcome extends React.Component{

    render(){

      return 
Hello, {this.props.name}
;

    }

   }

   ~~~

 - [x] Functional and Class Components Comparision:

   - [x] Functional

    - Use Func components as much as possible

    - Absence of 'this' keyword'

    - Solution without using state

    - Mainly responsible for the UI

    - Stateless/Dump/Presentational

   - [x] Class

    - More feature rich

    - Maintain their own private data -state

    - Complex UI logic

    - Provide lifecycle hooks

    - Stateful/Smart/Container


## Hooks

 - [x] Hooks are  a new feature proposal that lets you use state and other React features without a class.

   - No breacking changes.

   - Completely opt-on & 100% backwards-compatible.

   - What ever we've learned so far in this series still hold good.

   - Components types- Functional and Class components.

   - Using state, life-cycle methods and 'this' binding.

   - After understanding state,event binding and lifecycle hooks in class components.

## JSX

 - JavaScript XML (JSX) - Extension to the JavaScript language syntax.

 - Write XML-like code for elements and components.

 - JSX tags have a tag name, attributes,and children.

 - JSX is not a necessity to write React application.

 - JSX makes your react code simpler and elegant.

 - JSX ultimately transpiles to pure JavaScript which is understood by the browsers.

   - [x] JSX difrences

    - class -> className

    - for -> htmlFor

    - [x] camelCase property naming convention.

      - onclick -> onClick

      - tabindex ->tabIndex

## props vs state

 - [x] props:

   - props get passed to the component

   - Function parameters

   - props are immutable

   - props - Function Components

   - this.props- Class Components

- [x] state

  - state is managed within the component

  - Variables declared in the function body

  - state can be changed

  - useState Hook - Functional Components 

  - this.state - Class Components