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";