https://github.com/nagallegos/react-tutorial

This is a tutorial for myself to learn how to use react
https://github.com/nagallegos/react-tutorial

Last synced: 5 days ago
JSON representation

This is a tutorial for myself to learn how to use react

• Host: GitHub
• URL: https://github.com/nagallegos/react-tutorial
• Owner: nagallegos
• Created: 2023-05-23T02:32:46.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-05-23T19:37:44.000Z (over 1 year ago)
• Last Synced: 2025-01-01T17:42:58.626Z (19 days ago)
• Language: TypeScript
• Size: 27.3 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React-Tutorial

This repo will be used for teaching myself how to use react.  

I will be following along with the following video initially:  

[React Tutorial for Beginners](https://www.youtube.com/watch?v=SqcY0GlETPk)

## BABEL

[babeljs.io](https://babeljs.io/repl) is a useful tool to see how JSX is being converted to JavaScript code.

## Terminology & Useful Information

1. **JSX**: JavaScript XML. JSX is a form of markup that allows us to write HTML in React by converting HTML tags into React elements

2. **HMR**: Hot Module Replacement. Vite monitors file for changes. Automatically refreshes the browser upon making a change.

3. **VITE**: Vite is a local development server written by Evan You and used by default by the Vue project templates. It has support for TypeScript and JSX.

4. **Expression**: Specifically statements between curly braces are JavaScript expressions.

5. **DOM**: Document Object Model

6. When an application starts, REACT takes the component tree and build a JavaScript Virtual DOM

7. React is only a library and NOT a framework (like Angular or Vue). It is good at building user interfaces

8. It is typically good practice to put all components in a folder called components.

9. **Bootstrap**: Useful CSS framework for front-end development.

10. **Props**: Properties; input passed to a component similar to function args. Should treat as immutable. Will cause a re-rendering.

11. **State**: Data managed by a component similar to a local variable. Can treat as mutable. Will cause a re-rendering.

12. 4 Pillars of OOP:

    1. Abstraction

    2. Encapsulation

    3. inheritance

    4. polymorphism

13. Abstraction: hiding all of the relevent data of an object to reduce complexity

14. Encapsulation: hides internal state of an object to prevent unauthorized access to data

15. Inheritance: one class derives from another and has access to all public variables and methods from the parents

16. Polymorphism: overloading methods (static: early binding) and overriding methods (dynamic: late binding). allows for flexibility and generalized code