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>
);
}
}