├── .eslintcache
├── .gitignore
├── README.md
├── bg_md.png
├── package-lock.json
├── package.json
├── public
├── index.html
├── manifest.json
├── robots.txt
└── title_bg.ico
├── src
├── App.css
├── App.js
├── components
│ └── contactForm.js
├── index.css
└── index.js
└── yarn.lock
/.eslintcache:
--------------------------------------------------------------------------------
1 | [{"C:\\chatboot\\src\\App.js":"1","C:\\chatboot\\src\\index.js":"2","C:\\chatboot\\src\\components\\contactForm.js":"3"},{"size":306,"mtime":1609863752105,"results":"4","hashOfConfig":"5"},{"size":222,"mtime":1609863987971,"results":"6","hashOfConfig":"5"},{"size":1919,"mtime":1609866325399,"results":"7","hashOfConfig":"5"},{"filePath":"8","messages":"9","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"14b9om9",{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\chatboot\\src\\App.js",[],"C:\\chatboot\\src\\index.js",[],"C:\\chatboot\\src\\components\\contactForm.js",[]]
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Enviar email com React JS
2 |
3 | ### Muito simples, para desenvolvedores front-end que não tem tempo para criar o back-end
4 | ### Tutorial no You Tube (https://www.youtube.com/watch?v=t7Hh7RaDQDo&t=14s)
5 |
6 | [](https://limaeduardocontato.netlify.app/)
--------------------------------------------------------------------------------
/bg_md.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Educord97/EmailJS/433793db949d12832e8efcb5b2d792f735357b53/bg_md.png
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "chatboot",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^5.11.4",
7 | "@testing-library/react": "^11.1.0",
8 | "@testing-library/user-event": "^12.1.10",
9 | "bootstrap": "^4.5.3",
10 | "emailjs": "^3.4.0",
11 | "emailjs-com": "^2.6.4",
12 | "react": "^17.0.1",
13 | "react-bootstrap": "^1.4.0",
14 | "react-dom": "^17.0.1",
15 | "react-scripts": "4.0.1",
16 | "styled-components": "^5.2.1",
17 | "web-vitals": "^0.2.4"
18 | },
19 | "scripts": {
20 | "start": "react-scripts start",
21 | "build": "react-scripts build",
22 | "test": "react-scripts test",
23 | "eject": "react-scripts eject"
24 | },
25 | "eslintConfig": {
26 | "extends": [
27 | "react-app",
28 | "react-app/jest"
29 | ]
30 | },
31 | "browserslist": {
32 | "production": [
33 | ">0.2%",
34 | "not dead",
35 | "not op_mini all"
36 | ],
37 | "development": [
38 | "last 1 chrome version",
39 | "last 1 firefox version",
40 | "last 1 safari version"
41 | ]
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
14 | Contato
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/public/title_bg.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Educord97/EmailJS/433793db949d12832e8efcb5b2d792f735357b53/public/title_bg.ico
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 |
2 | body{
3 | background: black !important;
4 | }
5 | input{
6 | padding: 30px !important;
7 | }
8 | .App {
9 | text-align: center;
10 | }
11 | h2{
12 | color: white;
13 | text-transform: uppercase;
14 | font-size: 30px !important;
15 | font-weight: bold !important;
16 | margin-top: 2rem !important;
17 | }
18 | .btn-info{
19 | background: #FA7268 !important;
20 | text-transform: uppercase;
21 | font-size: 15px !important;
22 | font-weight: bold !important;
23 | letter-spacing: 3px;
24 | transition: all .3s;
25 | width: 100%;
26 | }
27 | .btn-info:hover{
28 | background: #863d38 !important;
29 | outline: none !important;
30 | border: none !important;
31 | }
32 | label{
33 | float: left;
34 | color: #fff;
35 | text-transform: uppercase;
36 | font-weight: bold !important;
37 | font-size: 14px !important;
38 | }
39 | @media screen and (max-width: 600px) {
40 | .container{
41 | padding: 0 !important;
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './App.css';
3 | import 'bootstrap/dist/css/bootstrap.min.css';
4 | import ContactUs from './components/contactForm';
5 |
6 | function App() {
7 | return (
8 |
13 | );
14 | }
15 |
16 | export default App;
17 |
--------------------------------------------------------------------------------
/src/components/contactForm.js:
--------------------------------------------------------------------------------
1 | import emailjs from "emailjs-com";
2 | import React from 'react';
3 |
4 | export default function ContactUs() {
5 |
6 |
7 | function sendEmail(e) {
8 | e.preventDefault();
9 |
10 | emailjs.sendForm('gmailteste', 'template_lat4php', e.target, 'user_BLg80uyyFXNabuj2m8IGP')
11 |
12 | .then((result) => {
13 | alert("Mensagem enviada com sucesso! 👍");
14 |
15 | }, (error) => {
16 | alert(error.message)
17 |
18 | });
19 | e.target.reset()
20 |
21 |
22 | }
23 | return(
24 |
50 | )
51 | }
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 |
9 | }
10 |
11 | code {
12 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
13 | monospace;
14 | }
15 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 |
6 |
7 | ReactDOM.render(
8 |
9 |
10 | ,
11 | document.getElementById('root')
12 | );
13 |
14 |
15 |
--------------------------------------------------------------------------------