docentedev

Instalacion IONIC

• Abrir CMD de windows como Administrador y ingresar lo siguiente npm install -g ionic
• Presionar Enter para instalar, esperar que finalize la instalación
• Ingresar ionic login e ingresar las credenciales de su cuenta que creo https://dashboard.ionicframework.com

docentedev

// 01
// funcion

function a(n1, n2) {
  return n1 + n2;
}

// funcion flecha refactorizada
const a = (n1, n2) => {
  return n1 + n2;

docentedev

• Node JS link Motor de javascript del lado del servidor
• Visual Studio Code link Editor para desarrollar aplicaciones
• Create React App link Herramienta por linea de comandos para crear proyectos React
• Yarn link Herramienta para gestinar las dependencias de un proyecto React
• Google Chrome link Navegador Web

docentedev

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import './App.css';

import { PrivateRoute } from './components/private-route/PrivateRoute';

import Home from './containers/home/Home';
import Login from './containers/login/Login';
import PrivateHome from './containers/private-home/PrivateHome'

docentedev

import React from 'react';
import { Redirect, Route } from 'react-router-dom';
import { isLogin } from '../../utils/session';

export const PrivateRoute = ({ component: Component, ...rest}) => (
    <Route
        {...rest}
        render={props => 
            isLogin() ? (
                <Component {...props} />

docentedev

const ls = localStorage;
const SESSION_KEY = 'session';
const userData = {
    username: 'claudio',
    email: 'claudio.dcv@gmail.com',
};

export const login = () => {
    ls.setItem(SESSION_KEY, JSON.stringify(userData));
};

docentedev

import React, { useState } from 'react';
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
} from 'reactstrap';

docentedev

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Provider } from 'react-redux';

import { PrivateRoute } from './components/private-route/PrivateRoute';
import store from './store';

import './App.css';
import Home from './containers/home/Home';
import Login from './containers/login/Login';

docentedev

• PROYECTO
  • vistas publicas
    • home // POST // Card
    • detalle // POST
    • login
    • registro
  • vistas privada
    • home // POST // Tabla
    • detalle / MODAL // POST
• creacion // POST

docentedev

import React, { useState, useEffect } from 'react';
import './App.css';
import axios from 'axios';

function App() {
  const [receta, setReceta] = useState('');
  const [ing, setIng] = useState('');
  const [ingDe, setIngDe] = useState('');
  const [l, setL] = useState([]);