Estructura y Estilos del Buscador

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

Contenido del curso

¿Qué es React JS?

Crear una Aplicación con React JS

Configurar un entorno de trabajo profesional

Llevar un diseño de HTML y CSS a React

Uso de una API de desarrollo (Fake API)

Usar React Tools

Tomar examen

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 :)

Daniel Pereira Perez

Oscar Barajas Tavares

Team Platzi•

Daniel Vicente Vergara Suarez

Guillermo Loza Hernandez

Marco Alejandro Rodriguez Ferrer

Britney Hadassa Ascencio Henriquez

Axel Castillo

Laura Camila Pregonero

Alejandro González Reyes

Christian Armando Consuelo Mayén

Ricardo Celis

teacher•

Karen Paola Diaz Duarte

Carlos Alfonso Garcia Rivera

Pablo César Escobar

Enrique Devars

Daniel Lopez

Andrés Campuzano Garzón

Ginnio Sarabia

Alessandri Fonseca

Enrique Tecayehuatl

Fredy Ramirez

Cristian Córdova

Santiago Harkes

Cristian Fabian Tovar

Jose Daniel Molina

Javier Romero

Massimo Di Berardino

Roberto Villate Morales

Carlos Antonio Espin Constante

Kristhian Medina

Joel Eduardo Sánchez Herrera

Diego Silva

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