Construa um Player de MP3 ReactJS/Javascript com 7 Componentes

Leve suas habilidades em ReactJS para o próximo nível programando uma aplicação divertida do zero

Classificação: 3.7 de 59 avaliações 5.5 horas totais 27 palestras Todos os níveis

Leve suas habilidades em ReactJS para o próximo nível programando uma aplicação divertida do zero

Desenvolvedores que estão familiarizados com Javascript e ReactJS básico agora podem aprimorar suas habilidades construindo 7 componentes e explorando vários métodos do ciclo de vida. Neste curso, criaremos uma aplicação cativante que reproduz MP3s a partir de um objeto JSON simples. Neste curso, começaremos utilizando o pacote ES6 NodeJS chamado Create-React-App como base para nosso player. Com nosso aplicativo, incorporaremos as seguintes funcionalidades: - Componente principal do player - Botões de MP3 - Botão de reprodução personalizado - Botão de pausa personalizado - Botão de mudo personalizado - Controle deslizante de volume personalizado - Marquise de título animada - Botões de gênero para filtrar os botões de MP3 por gêneros específicos, incluindo (rock, hip hop, country e mais) - Selecionar e reproduzir um MP3 aleatório quando o player é iniciado pela primeira vez Ao longo deste curso, você aprenderá o seguinte: - Como construir componentes ReactJS usando a sintaxe ES6 - Como definir estados da maneira ES6 - Como passar estados como props de componentes pai para componentes filho - Como se familiarizar mais com os métodos do ciclo de vida render, shouldComponentUpdate, componentWillMount, componentDidMount, componentWillReceiveProps - Como acessar métodos e propriedades da tag de áudio HTML5 - Como estilizar com animações CSS3 - Como usar a função map do ReactJS para percorrer nós de objetos JSON - Como vincular corretamente métodos de componentes dentro do instrutor - Como criar referências do ReactJS conhecidas simplesmente como refs - Como usar o atributo dangerouslySetInnerHTML e quando é apropriado usá-lo - Construir um controle de intervalo HTML5 para nosso controle deslizante de volume - Como criar rotas e vinculá-las a caminhos usando o pacote BrowserRouter NPM

O que você aprenderá

- Construir uma aplicação completa do ReactJS do zero - Obter uma melhor compreensão dos métodos do ciclo de vida do ReactJS - Como executar uma aplicação do ReactJS usando o pacote NodeJS chamado create-react-app - Como mapear um feed JSON em um estado do ReactJS - Construir aplicativos ReactJS usando o padrão ES6 - Acessar e manipular o controle de intervalo HTML5 - Animações CSS3 - Praticar mais a passagem de dados entre props, states, refs e métodos personalizados - Quando usar dangerouslySetInnerHTML - Aprender os poderosos, mas confusos, métodos do ciclo de vida, incluindo shouldComponentUpdate, componentWillMount, componentWillReceiveProps e mais - Roteamento do ReactJS