Apostila react redux 2020, Exercícios de Programação Javascript

Baixe Apostila react redux 2020 e outras Exercícios em PDF para Programação Javascript, somente na Docsity!

Curso React/Redux

Leonardo Leitão

Versão 1.0, 22/05/

Índice

Sumário

Apostila do curso de React/Redux da Cod3r.

https://www.cod3r.com.br

1. Introdução

1.1. Visão Geral do Curso

1.2. Assine o Nosso Canal

 Olá amigos, convido vocês a conhecer o canal da COD3R no Youtube.

Visite o canal: https://www.youtube.com/aulasdeprogramacao

1.3. Repositório do Curso

 Os arquivos do curso estão disponíveis no GitHub.

Repositório do curso: https://github.com/cod3rcursos/curso-react-redux

1.4. Configuração do Ambiente

Listagem 5 - Criar arquivo webpack.config.js

exercicios_webpack/webpack.config.js

const webpack = require('webpack')

module.exports = { entry: './ex/index.js', output: { path: __dirname + '/public', filename: './bundle.js' }, devServer: { port: 8080 , contentBase: './public' } }

2.3. Criando o index.html



Criar uma pasta chamada ex que contém o arquivos index.js e também criar uma pasta chamada public que contém o arquivo index.html, nestas pastas poderão ser criadas, sobrescritas, alteradas e apagadas os arquivos a qualquer momento durante as aulas.

Listagem 6 - Criar arquivo index.html

exercicios_webpack/public/index.html

< html > < head > < meta charset="UTF-8"> < title >Exercícios de Webpack

< body > < script src="bundle.js">

2.4. Testando a Configuração

Listagem 7 - Alterar arquivo index.js

exercicios_webpack/ex/index.js (na linha 1)

console.log('Webpack')

Listagem 8 - Alterar arquivo package.json

exercicios_webpack/package.json (aprox. linha 7)

"test": "echo "Error: no test specified" && exit 1"

por:

"dev": "webpack-dev-server --progress --colors --inline --hot"

 Quando o build terminar vai mostrar a mensagem:^ webpack: Bundle is now VALID.



Verificar o funcionamento: abra o navegador e digite http://localhost:8080 e na ferramentas de desenvolvedor (Inspecionar) na opção console vai mostrar a palavra Webpack.

Listagem 9 - Executar a aplicação

Abra o terminal e dentro da pasta exercicios_webpack

npm run dev

2.5. Usando o Sistema de Módulos do CommonsJS

Listagem 10 - Criar arquivo logger.js

exercicios_webpack/ex/logger.js

function info(text) { console.log(INFO: ${text}) }

module.exports = { info }

2.7. Usando EcmaScript 2015 sem Babel

Listagem 16 - sobrescrever arquivo index.js

exercicios_webpack/ex/index.js

class Pessoa { constructor(nome) { this .nome = nome }

toString() { return Pessoa: ${ **this** .nome} } }

const pessoa = new Pessoa('Guilherme') console.log(pessoa.toString())

 Para abrir o terminal no Visual studio Code use o atalho^ ctrl + '

Listagem 17 - Executar Webpack no terminal

exercicios_webpack$

./node_modules/.bin/webpack

 Agora no arquivo^ bundle.js^ que agora contém a classe^ Pessoa.

Listagem 18 - Alterar arquivo index.js

exercicios_webpack/ex/index.js

const pessoa = new Pessoa('Guilherme') console.log(pessoa.toString())

 Mover a classe Pessoa para o novo arquivo^ ex/pessoa.js

Listagem 19 - Alterar arquivo pessoa.js

exercicios_webpack/ex/pessoa.js

export default class Pessoa { constructor(nome) { this .nome = nome }

toString() { return Pessoa: ${ **this** .nome} } }

Listagem 20 - Alterar arquivo index.js

exercicios_webpack/ex/index.js (na linha 1)

import Pessoa from './pessoa'

const pessoa = new Pessoa('Guilherme') console.log(pessoa.toString())

2.8. Usando o Sistema de Módulos do ES2015 (Babel)

Listagem 24 - Sobrescrever arquivo index.js

exercicios_webpack/ex/index.js

const produto = { nome: 'Caneta Bic Preta', preco: 1.90 , desconto: 0. }

function clone(objeto) { return { ...objeto } }

const novoProduto = clone(produto) novoProduto.nome = 'Caneta Bic Azul'

console.log(produto, novoProduto)

Listagem 25 - Alterar arquivo webpack.config.js

exercicios_webpack/webpack.config.js (aprox. linha 19)

const webpack = require('webpack')

module.exports = { entry: './ex/index.js', output: { path: __dirname + '/public', filename: './bundle.js' }, devServer: { port: 8080 , contentBase: './public' }, module: { loaders: [{ test: /.js?$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['es2015'], plugins: ['transform-object-rest-spread'] } }] } }



Abra o terminal e dentro da pasta do projeto exercicios_webpack execute o seguinte comando:

Listagem 26 - Instalando as dependências

npm i --save-dev [email protected].

Listagem 27 - Executar a aplicação

npm run dev

2.10. Adicionando o Preset do React

Abra o terminal e dentro da pasta do projeto exercicios_webpack execute o seguinte comando:

Listagem 28 - Instalando as dependências

npm i --save-dev [email protected].

Listagem 29 - Executar a aplicação

npm run dev

Listagem 30 - Sobrescrever arquivo index.js

exercicios_webpack/ex/index.js

import 'react'

export default props => ( Olá )

console.log('Funcionou!')

2.11. Adicionando o Loader para CSS

 Criar arquivo^ css^ em^ ex/estilo.css

Listagem 34 - Alterar arquivo estilo.css

exercicios_webpack/ex/estilo.css

body { background-color : #253B6E ; }

Listagem 35 - Alterar arquivo index.js

exercicios_webpack/ex/index.js (na linha 1)

import './estilo.css' import 'react'

export default props => ( Olá )

console.log('Funcionou!')

Listagem 36 - Alterar arquivo webpack.config.js

exercicios_webpack/webpack.config.js (aprox. linha 2, 14 e 26)

const webpack = require('webpack') const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = { entry: './ex/index.js', output: { path: __dirname + '/public', filename: './bundle.js' }, devServer: { port: 8080 , contentBase: './public' }, plugins: [ new ExtractTextPlugin('app.css') ], module: { loaders: [{ test: /.js?$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['es2015', 'react'], plugins: ['transform-object-rest-spread'] } }, { test: /.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }] } }