2

soy nuevo en el mundo de react. Estoy siguiendo un tutorial para crear para crear una barra de progreso. con lo que tengo deberia de mostrar algun resultado en la pagina web, sin embargo se me ve la pagina entera en blanco y no se por que.

esto es como esta estructurado mi carpeta:
1.containers
2.node_modules
3.public
4.src
   4.1App.css
   4.2App.js
   4.3App.test.js
   4.4index.css
   4,5index.js
   4.6logo.svg
   4.7reportWebVitals.js
   4.8setupTests.js
   4.9gitignore
   4.10package-lock.json
   4.11package.json
   4.12RE
   
   los archivos que he modificado son index.js y app.js.

como no sabia que estaba pasando tambien me he metido al modo inspeccionar de chrome y me he metido al codigo, para ver si estaba ejecutandose o no, me ha salido algo como "You need to enable JavaScript to run this app." asi que me he metido en la configuracion de chrome para ver si tenia el javascript apagado pero no era asi.

app.js

import React from 'react';
import styled from 'styled-components';
import ProgressBar from 'index';

const AppWrapper = styled.div`
    display: flex;
    justify-content:center;
    `;

const ProgressBarContainer = styled.div`
    width:100px;
    margin-top:20px;
    `;

export default class App extends React.Component {
    constructor(props){
        super(props);

    }
    render(){
        return(
            <AppWrapper>
                <ProgressBarContainer>
                    <ProgressBar />
                </ProgressBarContainer>

            </AppWrapper>
        )
    }
}


index.js 

import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';

const Track = styled.div`
width: 100%;
height:20px;
background-color: #222;
border-radius: 10px;
box-shadow: inset 0 0 5px #000
`;

export default class ProgressBar extends React.Component{
    render(){
        return (
            <Track>
            </Track>
        );
    }
}

2
  • <AppWrapper>Hola mundo</AppWrapper>// Verifica si esto se muestra en tu app. el 30 sep. 2021 a las 23:55
  • no, si sustituyo en app.js lo que viene dentro de appwrapper por lo que me has dicho tu, se sigue sin ver nada el 1 oct. 2021 a las 0:13

1 respuesta 1

1

Por lo que se en la estructura de tu proyecto, usaste create-react-app y modificaste el archivo index.js. Por lo regular ese archivo no se modifica (al menos para un proyecto sencillo) ya que es donde react hace el render de tu componente principal en ese archivo.

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

Si remplazaste este codigo, es por eso que se mira todo en blanco, ya que en este bloque de codigo, React selecciona el elemento con el id root y muestra el componente App en ese elemento. Y de acuerdo a tu codigo, tu componente ProgressBar esta en el index.js. Lo que sugiero es dejar el archivo index.js como estaba, crear en un archivo diferente para tu componente ProgessBar despues importarlo a tu otro componente App y ese se importa en el archivo index.js.

1
  • muchas gracias, desconocia esa informacion, ya que en el tutorial lo estaban haciendo en index.js. de todas formas, leccion aprendida, muchas gracias el 1 oct. 2021 a las 17:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.