PROJETO DE REACT E SASS PARA O SEU PORTFÓLIO - INTEGRAÇÃO DE REACT COM SASS

[@MatheusBattisti]

⭐Conheça a Formação Front-end (+50 de horas de conteúdo, +20 de projetos) para você se tornar um dev front-end: www.udemy.com/course/formacao-front-end-html-css-javascript-react-e/?couponCode=LANCOUFE

[@jesusvick]

Professor, queria te agradecer, graças a você e o YT e tbm seu curso na Udemy "ReactJs: do Zero a Maestria" hoje sou um Dev em um Órgão Público Federal. Obrigado!

[@victor-honorato]

Obrigado Matheus, vc é uma peça muito importante na comunidade de Devs do Brasil. Parabéns!

[@MatheusBattisti]

agradeço tb Vitor! =)

[@PexuPixo]

Não sei o que está havendo, mas quando rodo o comando "npm run dev" não apresentando o link do projeto.

[@Castorjean-l9w]

@@PexuPixo aparece alguma mensagem?

[@SuperGlauce]

Amando o meu recomeço seguindo as instruções desse brilhante professor. Obrigada @MatheusBattisti sou sua super Fã.

[@tailonramos7941]

Comprei o curso de sass na udemy e ta incrivel. Ja assisti a todas as aulas e estou terminando meu primeiro landing page com SASS. Super indico o curso dele de SASS na Udemy

[@MatheusBattisti]

valeu Tailon, obrigado por acompanhar!

[@PexuPixo]

@@MatheusBattisti Não sei o que está havendo, mas quando rodo o comando "npm run dev" não apresentando o link do projeto.

[@jonathanplets2661]

@@PexuPixo acho que seria bom atualizar a versao do node.js para a 18

[@PexuPixo]

@@jonathanplets2661 obg

[@vsrromero]

Aproveitei muito, adaptei de acordo com o que precisava e conectei com a API do git para pegar projetos e dados que julguei legal colocar no portfolio. Muito Bom!

[@MatheusBattisti]

boa Victor! Se quiser se especializar mais ainda em React, dá uma olhada: horadecodar.com.br/comunidade-hora-de-codar/

[@paulomonteiro6805]

Parabéns pelo conteúdo! Todo vídeo que assisto sobre React é contigo!!

[@samuueel1]

Estou adorando esses projetos de React. Continue trazendo, por favor.

[@MatheusBattisti]

valeu Samuel, tenh planejado um com Tailwind tb

[@sucodelarangela]

Matheus de Deus! Eu tava precisando EXATAMENTE desse conteúdo, tava pesquisando isso essa semana pra tentar implementar num projeto. Cara, tu lê mentes, obrigada!

[@MatheusBattisti]

hhaha de nada Angela! =)

[@felipemarcelsilvadeamorim978]

Eu tbm

[@emiliodaf]

Matheus, tu não tem ideia da grande contribuição que tens dado a comunidade de desenvolvedores que estão iniciando a jornada como dev....um dia terei o prazer de apertar sua mão e deixar o meu muito obrigado, teu domínio e capacidade de compartilhar e transmitir o conhecimento são uma gema. Receba nosso abraço, você merece todo esse nosso apreço....valeu fera, show!

[@MatheusBattisti]

te agradeço tb Emilio, abraço!

[@Pedrofdnn]

Cara Perfeito, parece que tava advinhando oque eu tava tentando. Deus te usa cara. Sucesso pra vc!

[@MatheusBattisti]

hahah valeu Pedro!

[@thalessantos3535]

Professor!! Eu estava pesquisando agora a pouco sobre SASS!!! Tô acabando o último projeto do MovieLib, decidi implementar com Typescript com Redux e agora estou finalizando a paginação. Só tenho a agradecer pelo excelente conteúdo! Adquiri seu curso da Udemy e não me arrependo!!

[@MatheusBattisti]

valeu Thales!

[@carlosleal4575]

Salve Matheus. Muito obrigado pelo conhecimento compartilhado. Estava sem idéias de como criar um portfólio e seu video ajudou demais. Obrigado.

[@augustowhitaker6731]

Essa é pra colocar no portifólio hein, valeu vc ensina bem demais.

[@MatheusBattisti]

valeu Augusto, tamo junto! =D

[@athilamatheus6064]

Parabéns Matheus, excelente didática!

[@marcoscappelli]

Muito show terminei hoje o projeto de filmes, a já vou começar esse. Abraço...

[@MatheusBattisti]

valeu Marcos!

[@o_renanbarros]

Valeu, Matheus.. tenho aprendido mto com vc.. e de tanto aprender.. pego seus erros antes que eles aconteçam. Sinal de que eu estou aprendendo :) Grande abraco

[@edvanbbmp]

Seloko, Matheus fera d+, essa sequencia de video-aulas é de grande valor

[@MatheusBattisti]

valeu Edvan!

[@luizmneto7]

foi excelente, gostei demais, parabéns Matheus

[@MatheusBattisti]

de nada Luiz!

[@joycerufino7056]

obrigada Matheus! só estou conseguindo entender de fato o reactjs com os seus videos.. Deus abençoe 😀

[@MatheusBattisti]

show Joyce, que bom q estou ajudando! =)

[@gabrielmelo3858]

Conteúdo riquíssimo!! Muito obrigado. agregou muito para mim!

[@LuizFelipe-vz5em]

Muito obrigado!! Tutorial muito bom. Recomendo para todos seu canal e seus cursos para todos que posso.

[@andredias6356]

Obrigado por compartilhar seu conhecimento

[@MatheusBattisti]

de nada Andre!

[@leandro9695]

Fala Matheus!! Quando sai o curso de testes??? Parabéns pelo vídeo!!

[@Gabrielferraznogueira]

até hj é um video muito bom, de vdd, obg ai

[@CarolineMoraes]

Sensacional!!!! Baita aula!!!! Muito Obrigadaaaaa de verdade por compartilhar esse conteúdo aqui!!!

[@gunichi21]

Sensacional, mais um projeto tutorial admirável, bom demais!

[@MatheusBattisti]

obrigado Gustavo!

[@Viniciusprogramador]

Cara você é foda! Top demais

[@patriciamuandule5323]

Matheus muito obrigada,eu apenas agradeço pelos seus cursos. Você tá ajudando muita gente ,eu incluse... se algum tiver como ,eu retorno tudo que está fazendo por nós.

[@reginaldobarrosdacunha7160]

Cara valeu muito!!! Sensacional o conteúdo.

[@washinerdev4355]

fiz a aula todinha muito bom conhecer o sass nao sabia que ele era tao poderoso para projetos react

[@gabrielbarth8759]

Brigadão, conteúdo valioso sobre Sass aprendi muito!!!

[@nilvapires151]

Perfeito e o projeto que desejo desenvolver, gratidao

[@MatheusBattisti]

valeuu Nilva!

[@igorsilvafrancisco7311]

Seus videos são muito bom, parabéns!

[@GuilhermeMartinsPolo]

Show de bola, mais uma vez obrigado por compartilhar todo esse conhecimento. Didática sensacional.

[@alexandrejohann]

Que top este projeto!

[@MatheusBattisti]

valeu Alexandre!

[@GeorgeLimaaa]

Muito obrigado.

[@PexuPixo]

Não sei o que está havendo, mas quando rodo o comando "npm run dev" não apresentando o link do projeto

[@buenof3r]

Top demais, muito obrigado.

[@zvini6544]

Obrigado!

[@edu_amr]

Cara o vite ajuda de mais

[@braynnermarques7653]

muito legal muito obrigado

[@atschaves]

Show de bola! Valeu Matheus! 😀

[@MatheusBattisti]

de nada Anderson!

[@AndersonSantos-dq4jl]

Sensacional

[@MatheusBattisti]

valeu Anderson!

[@luanpablocs]

Muito bom cara, gostei bastante do seu conteúdo. Sou novo na área e fiz tudo do jeito que vc ensinou, e ficou muito bom. Só fiquei com algumas dúvidas em relação aos links das redes sociais, pois não consegui colocar das 3, apenas de uma rede somente. Vc tem algum outro vídeo que pode me ajudar nessa questão? No mais, foi tudo ótimo, e mais uma vez obrigado pelo vídeo

[@jandson1349]

adiciona mais um item no array com os links do seu perfil em seguida coloca no lugar a # no href

[@0taichou]

muito boa a aula, consegui fazer tudo porem não estou conseguindo hospedar, prof faz um video pra nos auxiliar a hospedar, o meu fica dando erro tanto na vercel quanto na netlify

[@PauloRoberto-xc4ps]

Muito bom! ganhou mais 1 inscrito, vlw mesmo pelo conteúdo excelente.

[@MarcosGabriel-xn1gq]

Toppp traz um vídeo agora subindo esse projeto pra web….

[@MatheusBattisti]

obrigado pela sugestão Marcos

[@canalpec-lam2121]

​@@MatheusBattistisobe pra web, nn to conseguindo fazer isso, pois ta dando erro 404

[@dev-isaac-gomes]

achou que eu tava brincando KKKKKKKKKK e o melhor e que eu ia fazer meu portfolio em react essa semana

[@MatheusBattisti]

kkk chegamos!

[@PauloVitor-xz6es]

@@MatheusBattisti Esse cara é muito seu fã professor, ele está contigo em todas as plataformas kkkkk

[@dev-isaac-gomes]

@@PauloVitor-xz6es sim. KKKKKKKKK

[@TheBlackShadow]

Que aula, senhores, que aula. Uma hora muito bem gasta.

[@PexuPixo]

Não sei o que está havendo, mas quando rodo o comando "npm run dev" não apresentando o link do projeto

[@Brendonjkl174]

Caraca! Top demais Matheus. Poxa poderia trazer com tailwind hein rs mas tá show. Continua trazendo pra nós esses projetos, curto demaiss!

[@MatheusBattisti]

vai ter tb Brendon! =)

[@alanmoreira5194]

Vídeo nota mil parabéns professor, agora vou aprender a colocar o link das redes sociais de forma dinâmica, pois não faço ideia como kkkkk

[@MatheusBattisti]

hahaha boa Alan!

[@GuilhermeOliveira-os5fs]

vou ter que me virar agora tbm kkkkkk, vai dá certo

[@lucas-morais-1998]

Estou estudando Vite e usar ele, como diria o Deschamps é "delicinha", a rapidez se comparado ao CRA é absurda. O SASS é muito massa também, não é um Tailwind ou Styled Components mais tem lá sua complexidade. Só prefiro usar .scss não consigo ficar sem as minhas {} 😅. O projeto ficou muito massa Professor, se me permite sugerir seria bacana vídeos com Tailwind e Styled Components também. Obrigado pelo conteúdo!

[@MatheusBattisti]

vou trazer sim Lucas, Tailwind é um dos próximos, styled components ta na mira tb

[@OLÁ-TI]

Super tutorial #hora_de_codar

[@disneyandrade]

top d+ muito obrigado

[@MatheusBattisti]

de nada Disney! e fica a sugestão do meu curso completo: horadecodar.com.br/comunidade-hora-de-codar/

[@PexuPixo]

Não sei o que está havendo, mas quando rodo o comando "npm run dev" não apresentando o link do projeto

[@luciano2140]

Muito top o vídeo

[@MatheusBattisti]

valeu Luciano!

[@patrickalmeidalima]

Traga alguns de reactjs e laravel também Matheus acho que seria muito legal aprender!

[@MatheusBattisti]

obrigado pela sugestão Patrick!

[@diariodebordocs1496]

salve Matheus...estou fazendo seu curso pela udemy e estou gostando muito...a razão de estar fazendo o curso é porque quero tornar o lyout dos meus flashcards no anki mais agradável...infelizmente não tem curso especifico pra isso, o que estou achando um absurdo, a intensão não era aprender programação só para estilizar esses cartões, então um dia que vc não tenha ideia de conteúdo e espero que seja logo...kkkkk...poderia fazer um curso e disponibilizar? espero que considere meu pedido...gracias

[@MatheusBattisti]

haha obrigado pela sugestão! =)

[@mateusfabricio9137]

Parabéns

[@jocelinnunes1264]

Show!

[@meucanal6440]

perfeitooooooo

[@MatheusBattisti]

valeu!

[@corsana-black5105]

Sou novo no seu Canal e gosto muitos das suas didáticas, mas teria como fazer esse projetos e o anterior em angular? E obrigado pelo livro

[@jethrotiago]

Muito bom este projeto, apesar da responsividade não acontecer. Outra coisa foi que não consegui fazer o deploy no vercel... o que preciso fazer para visualizar e compartilhar o deploy?

[@IsmaelDev]

Como faço pra alterar a descrição das linguagens?

[@karineds]

Era exatamente o que eu tava procurando, pq a empresa em que eu trabalho usa Sass em todos os projetos e eu to aprendendo React, então preciso ver como os dois funcionam juntos. Que tal um projeto com react e tailwind ou react e chakra ui?

[@MatheusBattisti]

opa Karine, obrigado pela sugestão, Tailwind vem sim =)

[@ipcmeanthony1905]

No lugar do vite.config.js posso usar o webpack.config.js?

[@HenriqueJardim]

Boa tarde, no PROJETO DE REACT E SASS PARA O SEU PORTFÓLIO - INTEGRAÇÃO DE REACT COM SASS eu encontrei dificuldade de colocar mais de um linque para as redes sociais, e também não consegui escrever textos diferentes para cada tecnologia, acredito que tenha que fazer alguma modificação na session mas não consegui, se puder me dar uma força...

[@1killer_fps]

devo colocar foto no portfólio?

[@SistemaMente]

Olá tudo bom? Como faço para colocar as informações de cada tecnologia, sou iniciante.

[@fiatkowski]

Da pra fazer o deploy com vercel?

[@Matheus_1582]

Mateus ja que voce ta usando o SASS use também o Tailwind

[@MatheusBattisti]

opa Matheus, vou trazer sim

[@borgotchongo]

hahahaha... sério que você é de *São José* ?Bora marcar um chimas então vizinho! uahUAHUa Ótimo material! Não perco uma aula! Grande abraço!

[@canalpec-lam2121]

COMO EU FAÇO PRA HOSPEDAR ESSE PORTFÓLIO, JÁ QUE NN TEM UM ARQUIVO HTML???

[@FernandoCalixto-dev]

tanbem quero saber kkk

[@zvini6544]

Alguém sabe porquê o meu ficou com a tela branca? No console não consta nenhum erro, mas a tela ficou toda branca do nada!.

[@mdmaia91]

Provavelmente algum erro de sintaxe

[@samuelmacielrocha5010]

vou fazer esse projeto, mas só uma dúvida. na parte de "ver projetos" da pra inserir meus projetos? a pessoa consegue vizualizar meus projetos por ai tbm??

[@mercadocariocaimoveisecorr6527]

Boa noite Matheus, como eu faço para colocar o linque para cada rede social? como está desenhado o projeto, só me permite colocar um href e assim fica o mesmo para o linkedin, instagran e github...

[@DarthKiller100]

Eu resolvi esse problema. A seguir encontra-se como: const socialNetworks = [ { name: "linkedin", icon:, text_link:"PONHA A URL AQUI"}, { name: "github", icon:, text_link:"PONHA A URL AQUI}, { name: "instagram", icon: , text_link:"PONHA A URL AQUI"}, ] const SocialNetworks = () => { return ( {socialNetworks.map((network)=> ( {network.icon} ))} ) }

[@gaiomaso]

@@DarthKiller100 Pra complementar, para fazer o link abrir em outra aba, colocar o target="_blank" antes do className {network.icon}

[@rafaelcesarferreira7239]

Da para chegar nesse resultado usando o tailwind css juntamente com o react tambem?

[@MatheusBattisti]

com certeza Rafael!

[@Zardiep]

no inicio,quando eu escolho react,nao aparece a variant react,apenas javascript,oque eu faço?????????????

[@Henrique-sg9wm]

tras projeto front e backend pro portfolio

[@MatheusBattisti]

valeu pela sugestão Henrique!

[@lucaszanin7338]

como colocar um link para o meu curriculo no botão "download curriculo"?

[@allansmith37]

26:50

[@joaolucas.codeeasy]

estava fazendo o projeto e tive que dar uma saída da frente do pc, quando eu voltei a página estava toda em branca (sendo que antes estava rodando certinho) já verifiquei tudo, como: erro em possíveis códigos, caminho quando dou o npm run dev, mas nada acontece. alguém poderia me ajudar?

[@dougsales9319]

Não é o Alvin e os esquilos kkkkkkk Massa

[@MatheusBattisti]

hahhahah =D

[@rafaelcarvalhoalencar3776]

Meu navegador está dando o gradient como inválido. (linear-gradient(90deg, rgb(250, 82, 82) 0% rgb(221, 36, 118) 100%))

[@DANILOIBIA]

professor meu deu erro não teria o git desse projeto

[@PexuPixo]

Não sei o que está havendo, mas quando rodo o comando "npm run dev" não apresentando o link do projeto.

[@catarinasilva7390]

antes de npm run dev tenta dar cd nome_do_projecto. podes estar na pasta 'pai' e não na pasta do projecto

[@PexuPixo]

@@catarinasilva7390 Eu estava no nível certo, era bug do React ou do npm, voltou a funcionar do nada rs

[@viniciusm.m.7822]

Pra quê trocar de foto? Um cara bonito desse!! Kkkkkkk brinks sou hetero e não sou homofóbico, hoje em dia temos que dizer isso. Excelente conteúdo professor, como sempre!!! Deus abençoe você!!!

[@MatheusBattisti]

hahhaa valeu Vinicius!

[@washinerdev4355]

queria tanto ter feito esse projeto mas da tanto erro que eu desisti

[@LarissaSouza-je3ym]

Alguem conseguiu fazer redirect no icone das redes sociais ??

[@davidsampler7825]

Projeto está responsivo?

[@curtiuseucomentario6203]

Se eu trocar o sass por scss eu preciso instalar um pacote diferente do instalado em vídeo? Eu troquei a extensão pra .scss, mas agora ta dando alguns erros. O erro não é no código, nem na endentação, o app ta rodando normalmente, mas o conteúdo aparece só no final. E no começo do site aparece vários códigos: import RefreshRuntime from "/@react-refresh" RefreshRuntime.injectIntoGlobalHook(window) window.$RefreshReg$ = () => {} window.$RefreshSig$ = () => (type) => type window.__vite_plugin_react_preamble_installed__ = true Vite + React * { display: flex; flex-wrap: wrap; padding: 3rem; gap: 3rem; } * h1 { width: 100%; font-size: 5rem; margin-bottom: 4rem; } * { padding: 0; margin: 0; font-family: "Helvetica"; box-sizing: border-box; } body { background-color: #271b31; } a, svg { transition: 0.4s; } :root topadblock, :root span[id^="ezoic-pub-ad-placeholder-"], :root mq-programmatic-ad, :root [src^="www.adpeepshosted.com/adpeeps.php?"], :root div[id^="zergnet-widget"], :root div[id^="traffective-ad-"], :root div[id^="taboola-stream-"], :root div[id^="sticky_ad_"], :root div[id^="rc-widget-"], :root É muito maior que isso, só peguei um pedaço pra ter uma noção. Se alguém souber como resolver, agradeço desde já.

[@jamilevalerio1826]

dá uma olhada se não é erro de sintaxe, algumas coisas no sass mudam pro scss, como por ex na hora de incluir o mixin, se utiliza

[@curtiuseucomentario6203]

@@jamilevalerio1826 Vlw, vou dar uma olhada nisso!

[@nanda93]

Boa noite, professor. Eu travei em uma coisa mto simples no doc sidebar.sass. Estou chamando a classname btn (.btn) e apresenta o seguinte erro: This selector doesn't have any properties and won't be rendered. Mas a className já foi criada no arquivo sidebar.jsx. Copiei até o código do GitHub pra ter certeza que estava digitando do corretamente. sabe o que pode ser?

[@PexuPixo]

Não sei o que está havendo, mas quando rodo o comando "npm run dev" não apresentando o link do projeto

[@isaquebrighenti2799]

Eu não consigo hospedar o site no github pages.... aparece erro 404 mesmo funcionando localmente. Alguem sabe a solução?

[@GuilhermeMoreira480]

tenta hospedar na vercel

[@TheBlackShadow]

Estou com o mesmo problema, creio que é porque "não tem nada" no arquivo index.html. Você conseguiu solucionar?

[@canalpec-lam2121]

Tambem nn estou conseguindo hospedar

[@dinhocruzDev]

meu querido estou tendo dificuldade para colocar o gradient no h1, alguém pode me ajudar?

[@PexuPixo]

Não sei o que está havendo, mas quando rodo o comando "npm run dev" não apresentando o link do projeto

[@ricardo91352]

amg nao sei se ja resolvel o problema , mas isso é devido a tabulação, tira um tab do h1 montando um bloco novo e nao continuo como o prof mostrou, deve ter atualizado o sass e agr ele nao deve suportar mais esse formato ex: h2 eooeooe: lolo OBS: SEMPRE DAR ESPAÇO ENTRE PROPRIEDADE E VALOR BACKGROUND(PROP): RED(VALOR) h1 cor: preta

[@washinerdev4355]

acho que e as versoes o vite mudou muita coisa