Code icon

REACT - INTRODUCTION

Links


    //INTRODUCTION <
    What is react: React es una librería de JavaScript declarativa, eficiente y flexible para construir interfaces de usuario. Permite componer IUs complejas de pequeñas y aisladas piezas de código llamadas “componentes”.

    Independent Reusable User interfaces. Like Lego Blocks. 
    Root component


    learn by doing - woodworking analogy
    You need to write react code to become a good react developer
    Space learning and repetition are key

    Learn in the course: 
    Components - JSX - Styling - Props - State - Event Handling - Lifecycle methods - API HTTP - Forms
    
    What will we build: 
    Apps list - Meme Generator


    //INTRODUCTION <
    JSX: Wrapper around Javascript using UI
    Components: Functional: Basic   Classbased Component: State or lifecycle methods
    Style:  h4 style={{}} - cannot write properties as css, style={{color: '#ddd', fontsize: '0.75rem'}}
    props: pass data dwon the component tree
    component
    conditional rendering through state or propos to modify what is shown
    forms: 



    // Why react 
    - Faster because of the virtual dom
    - Reusable web components
    - Mantained by Facebook
    - Hirable


    //NODE JS
    Install node js
    cmd -> node --version

    npm init: creates package.json manifest file, list dependencies
    npm install <package name> --save   // Installs package locally and add to package.json
    npm install <package name> -g Install package Globaly (access anywhre
    npm install <package name> --save-dev Use it only in development



    //CDN
    
    <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>


    //TERMINAL
    PWD: Full pathname to curren working directory CHDIR
    LS:  list of directores DIR
    MKDIR: Create a directory/folder
    CD
    CD..
    CLEAR
    Arrow up/down  Previous commands


    //CDN

    Install Chrome extension React developer tools
    Crear proyecto / carpeta y abrir cmd

    Instalar react: npx create-react-app my-app

    cmd > cd C:\xampp\htdocs\Coding\Others\React\cd my-app1
    cd my-app
    npm start (this opens the browser to localhost:3000/)

    You can go to in your browser > http://localhost:3000/


    //EXTENSIONS VSCODE
    ES7 React Redux


    //IMPORT
    import React from "react";
    import ReactDom from "react-dom";
    //CSS
    import "./index.css";
    
    // import { books } from "./books.js";
    // import Book7 from "./book";
    import { greeting } from "./testing/testing.js";


    EXPORT:
    export let greeting = "hello World";