Estructura y Estilos del Buscador

Clase 17 de 29 • Curso Práctico de React JS 2019

Daniel Pereira Perez

student•

Una buena practica es no usar texto plano al HTML/JSX, es mejor pasarlo como variable para poder modificarlo con facilidad en el futuro.

Search.jsx

import React from 'react'

const main_title_text = '¿Que quieres ver hoy?'
const main_input_placeholder = 'Buscar...'

export default () => (
    <section className='main'>
        <h2 className="main__title">{main_title_text}</h2>
        <input type="text" className='input' placeholder={main_input_placeholder} />
    </section>
)

Oscar Barajas Tavares

Team Platzi•

Muy buena recomendación, también nos sirve pensar de esta forma cuando manejamos varios idiomas.

Daniel Vicente Vergara Suarez

student•

Super, gracias, a mi me presentó error por el camelcase Así quedó

Search.jsx

import React from 'react';
import '../assets/styles/components/Search.scss';

const MainTitleText = '¿Que quieres ver hoy?';
const MainInputPlaceholder = 'Buscar...';
const Search = () => (
  <section className='main'>
    <h2 className='main__title'>{MainTitleText}</h2>
    <input
      className='buscador'
      type='text'
      placeholder={MainInputPlaceholder}
    />
  </section>
);

export default Search;

Guillermo Loza Hernandez

student•

Recursos html:

<section class="main">
    <h2 class="main__title">¿Qué quieres ver hoy?</h2>
    <input type="text" class="input" placeholder="Buscar...">
  </section>

Recursos css:

.main {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 300px;
  border-radius: 0px 0px 40px 40px;
}

.main__title {
  color: white;
  font-size: 25px;
}

.input {
  background-color: rgba(255, 255, 255, 0.1);
  border: 2px solid white;
  border-radius: 25px;
  color: white;
  font-family: "Muli", sans-serif;
  font-size: 16px;
  height: 50px;
  margin-bottom: 20px;
  outline: none;
  padding: 0px 20px;
  width: 70%;
}

:D Suerte!

Marco Alejandro Rodriguez Ferrer

student•

::placeholder {
  color: white;
}

Faltó el placeholder! Detalle pequeño pero valioso

Britney Hadassa Ascencio Henriquez

student•

thanks

Axel Castillo

student•

Si hiciste todo correcto y ya tiene tu barra de búsqueda te habrás dado cuenta que el input no tiene el estilo Sass, ve a style.css (origen de donde estamos migrando los estilos) y llévate el estilo de .input Con este código dentro de Search.scss tendrás ya el estilo de la barra! :D

  .input {
    background-color: rgba(255,255,255,0.1);
    border: 2px solid white;
    border-radius: 25px;
    color: white;
    font-family: 'Muli', sans-serif;
    font-size: 16px;
    height: 50px;
    margin-bottom: 20px;
    outline: none;
    padding: 0px 20px;
    width: 70%;
  }

Laura Camila Pregonero

student•

Hola Todos, este e mi código! ......................

...............

...................................

........................................

Alejandro González Reyes

student•

Realmente es sencillo cuando cuentas previamente con la maquetación del sitio y el estudio previo de que elementos dentro del mismo son considerados como componentes.

Christian Armando Consuelo Mayén

student•

Cuando tomes más práctica vas a poder ir maquetando al mismo tiempo que creas los componentes. =D ¡Sigue aprendiendo!

Ricardo Celis

teacher•

Puedes obtener los archivos del curso en el siguiente enlace: https://github.com/platzi/escuela-js/tree/feature/react

Karen Paola Diaz Duarte

student•

Ahora entiendo porque los programadores quieren tener 2 pantallas. Gracias!! Muy practico.

Practica:

Carlos Alfonso Garcia Rivera

student•

yo cuando puedo conecto la tv como segundo monitor 😅

Pablo César Escobar

student•

Desde Visual Code, cuando necesites seleccionar varias palabras con el mismo nombre, desde Windows puedes presionar Ctrl+Shift+L

Enrique Devars

teacher•

En Linux se puede hacer con Ctrl + D.

Daniel Lopez

student•

es chevere que no se pierda tiempo explicando cosas como el diseño o la maquetacion.

Andrés Campuzano Garzón

student•

Totalmente, se supone que al estar aprendiendo React ya se debe de saber estilos.

Ginnio Sarabia

student•

Es lo genial de hacer toda la ruta, los puntos se conectan.

Alessandri Fonseca

student•

me gusta mucho la estructura del proyecto, muy organizado

Enrique Tecayehuatl

student•

Y se puede organizar mejor

Fredy Ramirez

student•

Si lees esto por favor No te RINDAS y **NUNCA PARES DE APRENDER **

Cristian Córdova

student•

ME ENCANTA!!

Santiago Harkes

student•

Pequeño problema por aquí: Con el primer componente <Header />, el mismo se renderiza bien y aparece el correspondiente HTML al inspeccionar.

Pero al agregar el segundo componente, <Search /> no se renderiza ninguno de los dos y el HTML aparece vacío. Qué podría pasar? Gracias!

Cristian Fabian Tovar

student•

Tengo el mismo problema, ya lo pudiste solucionar?

Cristian Fabian Tovar

student•

el problema era que una de las componentes tenía { } y en React hay que usar ( ).

Jose Daniel Molina

student•

Es muy sencillo pasar a componentes un archivo HTML puro. Me encanta React

Javier Romero

student•

una pregunta compañeros porqué Gndx utiliza siempre const en todos los componentes y no utiliza class + render() o porque no utiliza function hooks?

Massimo Di Berardino

student•

Hola Javi, es porque, si mal no recuerdo, todos o casi todos los componentes de este curso no manejan demasiada lógica y solo renderizar el componente y listo. Por otro lado puedes usar cualquiera de los dos, es cuestión de las convenciones que tenga el equipo de desarrollo, pero ambas maneras son validas

Javier Romero

student•

muchas gracias massimokris ya me quedó claro :)

Ivan Francisco Barco Perez

student•

tengo problemas con la carga del componente scss, basicamente me da error de compilacion aqui el codigo

este es la app.jsx

import React from 'react';
import Header from '../components/Header.jsx';
import '../assets/styles/components/App.scss';

const App = () => (
  <div className="App">
    <Header />
  </div>
);

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './container/App';

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

app.scss

body {
  margin: 0;
  font-family: 'Muli', sans-serif;
  background: #8f57fd;
}

* {
  box-sizing: border-box;
}

header.jsx

import React from 'react';
import '../assets/styles/components/Header.scss'

const Header = () => (
  <header className="header">
    <img className="header__img" src="../assets/logo-platzi-video-BW2.png" alt="Platzi Video" />
    <div className="header__menu">
      <div className="header__menu--profile">
        <img src="../assets/user-icon.png" alt="" />
        <p>Perfil</p>
      </div>
      <ul>
        <li><a href="/">Cuenta</a></li>
        <li><a href="/">Cerrar Sesión</a></li>
      </ul>
    </div>
  </header>
);
export default Header;

y header.scss


.header {
  align-items: center;
  background: #8f57fd;
  color: white;
  display: flex;
  height: 100px;
  justify-content: space-between;
  top: 0px;
  width: 100%;
}

.header__img {
  margin-left: 30px;
  width: 200px;
}

.header__menu {
	margin-right: 30px;
}

.header__menu ul {
  display: none;
  list-style: none;
  margin: 0px 0px 0px -14px;
  padding: 0px;
  position: absolute;
  width: 100px;
  text-align: right;
}

.header__menu:hover ul, ul:hover {
	display: block;
}

.header__menu li {
  margin: 10px 0px;
}

.header__menu li a {
  color: white;
  text-decoration: none;
}

.header__menu li a:hover {
  text-decoration: underline;
}

.header__menu--profile {
  align-items: center;
  display: flex;
  cursor: pointer;
}

.header__menu--profile img {
  margin-right: 8px;
  width: 40px;
}

error que me aparece en consola tiene que ver con las lineas de scss

$ npm run start

> react-base@1.0.0 start D:\programacion\react\cursopracticoreact\escuela-js
> webpack-dev-server --open --mode development

i ´¢ówds´¢ú: Project is running at http://localhost:8080/
i ´¢ówds´¢ú: webpack output is served from /
i ´¢ówds´¢ú: Content not from webpack is served from D:\programacion\react\cursopracticoreact\escuela-js
i ´¢ówdm´¢ú: wait until bundle finished: /
├ù ´¢ówdm´¢ú: Hash: 6d2994d32ca85b5a1b8d
Version: webpack 4.44.2
Time: 1247ms
Built at: 10/12/2020 11:06:31 AM
       Asset       Size  Chunks             Chunk Names
./index.html  208 bytes          [emitted]
   bundle.js   1.31 MiB    main  [emitted]  main
Entrypoint main = bundle.js
[0] multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js 40 bytes {main} [built]
[./node_modules/ansi-html/index.js] D:/programacion/react/CursoPracticoReact/escuela-js/node_modules/ansi-html/index.js 4.16 KiB {main} [built]
[./node_modules/react-dom/index.js] 1.33 KiB {main} [built]
[./node_modules/react/index.js] 190 bytes {main} [built]
[./node_modules/strip-ansi/index.js] D:/programacion/react/CursoPracticoReact/escuela-js/node_modules/strip-ansi/index.js 161 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./src/container/App.jsx] 298 bytes {main} [built]
[./src/index.js] 190 bytes {main} [built]
    + 32 hidden modules

ERROR in ./src/container/App.jsx
Module not found: Error: Can't resolve '../assets/styles/components/App.scss' in 'D:\programacion\react\cursopracticoreact\escuela-js\src\container'
 @ ./src/container/App.jsx 3:0-46
 @ ./src/index.js

ERROR in ./src/assets/styles/components/Header.scss 2:0
Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
> .header {
|   align-items: center;
|   background: #8f57fd;
 @ ./src/components/Header.jsx 2:0-49
 @ ./src/container/App.jsx
 @ ./src/index.js
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = ./index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./public/index.html] 191 bytes {0} [built]
i ´¢ówdm´¢ú: Failed to compile.

espero si alguien me puede ayudar, ser lo agradeceria.

José Antonio Torres

student•

Segun reviso el problema esta en el import del archivo app.scss.

En el texto que describes el archivo se llama app.scss pero al momento de invocar ese archivo en app.js lo estas llamando como:

import'../assets/styles/components/App.scss';

Luis Lira

student•

Dice que no puede hacer resolve del archivo .scss, ¿podrías pasar tu configuración de Webpack? También revisa que los nombre sean correctos, JavaScript es case sensitive :)

Roberto Villate Morales

student•

Alguien sabe como seleccionar los varios Class al mismo tiempo? gracias.

Carlos Antonio Espin Constante

student•

Hola!, En windows lo haces seleccionando la palabra (En este caso class), y luego control + d. Aquel comando irá seleccionando todas las palabras que sean iguales cada vez que presiones el comando.

Roberto Villate Morales

student•

Gracias por la ayuda!!

Kristhian Medina

student•

se crea en search

Joel Eduardo Sánchez Herrera

student•

Al principio pense que era tedioso tener que volver a hacer todo, me vengo enterando que solo tengo que copiar

Diego Silva

student•

Les recomendo creare Alias en Webpack, para los path. Les dejo un ejemplo;

module.exports: {
...
resolve: {
    alias: {
      components: path.resolve(__dirname, 'src/components/'),
      assets: path.resolve(__dirname, 'src/assets/'),
      pages: path.resolve(__dirname, 'src/pages/'),
    },
  },
...
}

Estructura y Estilos del Buscador

¿Qué es React JS?

Aprende qué es React.js

DOM, Virtual DOM y React DOM

Crear una Aplicación con React JS

Create React App y Tipos de Componentes

JSX: JavaScript + HTML

Props: Comunicación entre Componentes

¿Qué son los métodos del ciclo vida?

State - Events

Instalación y configuración de entorno

Agregando compatibilidad con todos los navegadores usando Babel

Configurar un entorno de trabajo profesional

Webpack: Empaquetando nuestros módulos

Webpack Dev Server: Reporte de errores y Cambios en tiempo real

Estilos con SASS

Configuración final: ESLint y Git Ignore

Arquitectura de componentes para Platzi Video

Llevar un diseño de HTML y CSS a React

Estructura del Header

Estilos del Header

Estructura y Estilos del Buscador

Estructura y Estilos de Carousel y Carousel Item

Estructura y Estilos del Footer

Añadiendo imágenes con Webpack

Imports, Variables y Fuentes de Google en Sass

Uso de una API de desarrollo (Fake API)

Creando una Fake API

React Hooks: useEffect y useState

Lectura React Hooks

Conectando la información de la API

Custom Hooks

PropTypes

Usar React Tools

Debuggeando React con React DevTools

Prepárate para lo que sigue