https://github.com/brianobot/react-first-course

First Course Learning the Fundamental of React with Code with Mosh
https://github.com/brianobot/react-first-course

learning-by-doing react-components react-tutorial reactjs

Last synced: 9 months ago
JSON representation

First Course Learning the Fundamental of React with Code with Mosh

• Host: GitHub
• URL: https://github.com/brianobot/react-first-course
• Owner: brianobot
• Created: 2023-07-14T14:38:46.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2023-07-24T18:46:43.000Z (over 2 years ago)
• Last Synced: 2025-01-21T07:12:56.725Z (11 months ago)
• Topics: learning-by-doing, react-components, react-tutorial, reactjs
• Language: TypeScript
• Homepage:
• Size: 47.9 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# React-First-Course

First Course Learning the Fundamental of React with Code with Mosh

### Introduction (Revision) of the Working Principal of Web Pages

Web pages are generally wriiten in HTML, when the web page is loaded in a browser,the browser takes this html code

and produces a tree like structure called the DOM (Document Object Model), this can then be manipulated by javascript

in response to the user actions.

For example, we can use javascript to hide a button when it is clicked, 

this is vanilla javascript (plain  javascript code without any 3rd party code)

### React Intro

In React, the webpage is built using components, the components are the basic building block used by the user,

essentially, all reacts apps are made up of components in a tree structure with the App component being the root.

### Settng Up Development Environment

>>> npm create vite@latest

Follow and fill the prompt appropriately

>>> cd 

Project name must match name selected above

>>> npm i 

to Install project dependencies

>>> npm run dev

To Run the local development server

### Good to Know!

- node_modules: Contain library files needed by dependecies 

- public: Contain assets that would be exposed by your application (e.g Videos, Pictures etc)

- src : Contain the source code for your application

### Javscript Tips

- Object Deconstruction: This allows us to select certain attributes from within an object to be used an independent variables

    in other scopes of the program

    Example :

    

        const regularPerson {

            firstName: "Brian",

            lastName: "Obot"

        }

        let { firstname } = regularPerson 

        console.log(firstname) // Brian

        // Just for reference the name of the deconstructed variable doesn;t have to match

        // the attribute name, just the attribute position matters

        Further more functions that expect objects can be deconstructed at the arguments level to obtain

        just the attributes needed, 

- Object Literal Enhancement: This is the opposite of Object deconstruction, it allows variables to be grabbed from the 

    global scope and construction objects using these variables

    Example : 

        const name = "Tallac";

        const elevation = 9738;

        const funHike = { name, elevation };

        console.log(funHike); // {name: "Tallac", elevation: 9738}