├── .gitignore
├── README.md
├── package.json
├── public
├── favicon.ico
├── index.html
└── manifest.json
├── src
├── App.css
├── App.js
├── App.test.js
├── Button.js
├── Field.js
├── Form.js
├── index.css
├── index.js
├── logo.svg
└── registerServiceWorker.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 |
6 | # testing
7 | /coverage
8 |
9 | # production
10 | /build
11 |
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 |
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Contact Form with React.js Tutorial
2 |
3 | This is the code written from these YouTube tutorials I made for all of you!
4 |
5 | ## Getting Started to Follow Along
6 |
7 | (If you haven't installed `npm`, you will need it. Do that by typing in `brew install npm`.)
8 |
9 | 1. Navigate to your terminal and the directory where you want to make the app (ie. `cd Desktop`).
10 |
11 | 2. Install [create-react-app](https://github.com/facebookincubator/create-react-app) with `npm install -g create-react-app`.
12 |
13 | 3. Create app with `create-react-app contact-form-react`.
14 |
15 | 4. After it installs dependencies with [Yarn](https://yarnpkg.com/en/), navigate to the new directory with `cd contact-form-react`.
16 |
17 | 5. Start your engines (and port 3000) with `npm start`.
18 |
19 | You will now be navigated to [localhost:3000](http://localhost:3000), where your code is running!
20 |
21 | ## Part 1
22 |
23 | [YouTube Video | Part 1](https://www.youtube.com/watch?v=EJS7hiWw8rk&feature=youtu.be)
24 |
25 | ## Part 2
26 |
27 | [YouTube Video | Part 2](https://youtu.be/pq6kLLQH49I)
28 |
29 | ## Part 3
30 |
31 | [YouTube Video | Part 3](https://youtu.be/J8uJq_A6l7g)
32 |
33 | ## Part 4
34 |
35 | [YouTube Video | Part 4](https://www.youtube.com/watch?v=e0ZUImgcl_s)
36 |
37 | ## Questions?
38 | Message me on [slack](adamshallie.slack.com) or ask for an [invite](mailto:kgadams93@gmail.com?subject=Add%20me%20on%20slack) with your email.
39 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "example-proj",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "react": "^15.6.1",
7 | "react-dom": "^15.6.1",
8 | "react-scripts": "1.0.11"
9 | },
10 | "scripts": {
11 | "start": "react-scripts start",
12 | "build": "react-scripts build",
13 | "test": "react-scripts test --env=jsdom",
14 | "eject": "react-scripts eject"
15 | }
16 | }
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kelsonic/simple-contact-form-tutorial/5f7dd711fb0f59d0cba1e121ce415b4888b06173/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
11 |
12 |
13 |
22 | React App
23 |
24 |
25 |
28 |
29 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "192x192",
8 | "type": "image/png"
9 | }
10 | ],
11 | "start_url": "./index.html",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | animation: App-logo-spin infinite 20s linear;
7 | height: 80px;
8 | }
9 |
10 | .App-header {
11 | background-color: #222;
12 | height: 150px;
13 | padding: 20px;
14 | color: white;
15 | }
16 |
17 | .App-intro {
18 | font-size: large;
19 | }
20 |
21 | @keyframes App-logo-spin {
22 | from { transform: rotate(0deg); }
23 | to { transform: rotate(360deg); }
24 | }
25 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | // Dependencies
2 | import React, { Component } from 'react';
3 | // Externals
4 | import Form from './Form';
5 | // Internals
6 | import './App.css';
7 |
8 |
9 | class App extends Component {
10 | render() {
11 | return (
12 |
13 | );
14 | }
15 | }
16 |
17 | export default App;
18 |
--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(, div);
8 | });
9 |
--------------------------------------------------------------------------------
/src/Button.js:
--------------------------------------------------------------------------------
1 | // Dependencies
2 | import React, { Component, PropTypes } from 'react';
3 |
4 |
5 | class Button extends Component {
6 | // Info on React PropTypes:
7 | // https://facebook.github.io/react/docs/typechecking-with-proptypes.html
8 | static propTypes = {
9 | email: PropTypes.string.isRequired,
10 | formValues: PropTypes.shape({
11 | name: PropTypes.string.isRequired,
12 | email: PropTypes.string.isRequired,
13 | message: PropTypes.string.isRequired,
14 | }).isRequired,
15 | };
16 |
17 | constructor(props) {
18 | super(props);
19 | this.state = {
20 | isClicked: false,
21 | };
22 | this.logFormDataToConsole = this.logFormDataToConsole.bind(this);
23 | }
24 |
25 | logFormDataToConsole(event) {
26 | console.log('Form Values', this.props.formValues);
27 | this.setState({ isClicked: true });
28 | }
29 |
30 | render() {
31 | return (
32 |
38 | );
39 | }
40 | }
41 |
42 | export default Button;
43 |
--------------------------------------------------------------------------------
/src/Field.js:
--------------------------------------------------------------------------------
1 | // Dependencies
2 | import React, { PropTypes } from 'react';
3 |
4 |
5 | // Stateless component / Functional component
6 | const Field = (props) => (
7 |
8 |
9 |
14 |
15 | );
16 |
17 | // PropTypes is a way to ensure we are expecting
18 | // certain props that will enable the component to
19 | // function properly.
20 | Field.propTypes = {
21 | label: PropTypes.string.isRequired,
22 | onChange: PropTypes.func.isRequired,
23 | textarea: PropTypes.bool.isRequired,
24 | value: PropTypes.string.isRequired,
25 | };
26 |
27 | Field.defaultProps = {
28 | textarea: false,
29 | };
30 |
31 | export default Field;
32 |
--------------------------------------------------------------------------------
/src/Form.js:
--------------------------------------------------------------------------------
1 | // Dependencies
2 | import React, { Component } from 'react';
3 | // Externals
4 | import Field from './Field';
5 | import Button from './Button';
6 |
7 |
8 | class Form extends Component {
9 | constructor(props) {
10 | super(props);
11 | this.state = {
12 | name: '',
13 | email: '',
14 | message: '',
15 | };
16 | // To ensure 'this' when calling 'this.updateField' refers to Form and not Field, we do:
17 | this.updateField = this.updateField.bind(this);
18 | }
19 |
20 | // Field could be 'name', 'email', or 'message'
21 | // Value is whatever the user types into the input field.
22 | updateField(field, value) {
23 | this.setState({ [field]: value });
24 | }
25 |
26 | render() {
27 | return (
28 |
29 | {/* Name field */}
30 | this.updateField('name', event.target.value)}
33 | value={this.state.name}
34 | />
35 | {/* Email field */}
36 | this.updateField('email', event.target.value)}
39 | value={this.state.email}
40 | />
41 | {/* Message textarea */}
42 | this.updateField('message', event.target.value)}
45 | /* This should be written like 'textarea' */
46 | textarea={true}
47 | value={this.state.message}
48 | />
49 | {/* Submit button */}
50 |
54 |
55 | );
56 | }
57 | }
58 |
59 | export default Form;
60 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family: sans-serif;
5 | }
6 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | import registerServiceWorker from './registerServiceWorker';
6 |
7 | ReactDOM.render(, document.getElementById('root'));
8 | registerServiceWorker();
9 |
--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/registerServiceWorker.js:
--------------------------------------------------------------------------------
1 | // In production, we register a service worker to serve assets from local cache.
2 |
3 | // This lets the app load faster on subsequent visits in production, and gives
4 | // it offline capabilities. However, it also means that developers (and users)
5 | // will only see deployed updates on the "N+1" visit to a page, since previously
6 | // cached resources are updated in the background.
7 |
8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
9 | // This link also includes instructions on opting out of this behavior.
10 |
11 | const isLocalhost = Boolean(
12 | window.location.hostname === 'localhost' ||
13 | // [::1] is the IPv6 localhost address.
14 | window.location.hostname === '[::1]' ||
15 | // 127.0.0.1/8 is considered localhost for IPv4.
16 | window.location.hostname.match(
17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
18 | )
19 | );
20 |
21 | export default function register() {
22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
23 | // The URL constructor is available in all browsers that support SW.
24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
25 | if (publicUrl.origin !== window.location.origin) {
26 | // Our service worker won't work if PUBLIC_URL is on a different origin
27 | // from what our page is served on. This might happen if a CDN is used to
28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
29 | return;
30 | }
31 |
32 | window.addEventListener('load', () => {
33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
34 |
35 | if (!isLocalhost) {
36 | // Is not local host. Just register service worker
37 | registerValidSW(swUrl);
38 | } else {
39 | // This is running on localhost. Lets check if a service worker still exists or not.
40 | checkValidServiceWorker(swUrl);
41 | }
42 | });
43 | }
44 | }
45 |
46 | function registerValidSW(swUrl) {
47 | navigator.serviceWorker
48 | .register(swUrl)
49 | .then(registration => {
50 | registration.onupdatefound = () => {
51 | const installingWorker = registration.installing;
52 | installingWorker.onstatechange = () => {
53 | if (installingWorker.state === 'installed') {
54 | if (navigator.serviceWorker.controller) {
55 | // At this point, the old content will have been purged and
56 | // the fresh content will have been added to the cache.
57 | // It's the perfect time to display a "New content is
58 | // available; please refresh." message in your web app.
59 | console.log('New content is available; please refresh.');
60 | } else {
61 | // At this point, everything has been precached.
62 | // It's the perfect time to display a
63 | // "Content is cached for offline use." message.
64 | console.log('Content is cached for offline use.');
65 | }
66 | }
67 | };
68 | };
69 | })
70 | .catch(error => {
71 | console.error('Error during service worker registration:', error);
72 | });
73 | }
74 |
75 | function checkValidServiceWorker(swUrl) {
76 | // Check if the service worker can be found. If it can't reload the page.
77 | fetch(swUrl)
78 | .then(response => {
79 | // Ensure service worker exists, and that we really are getting a JS file.
80 | if (
81 | response.status === 404 ||
82 | response.headers.get('content-type').indexOf('javascript') === -1
83 | ) {
84 | // No service worker found. Probably a different app. Reload the page.
85 | navigator.serviceWorker.ready.then(registration => {
86 | registration.unregister().then(() => {
87 | window.location.reload();
88 | });
89 | });
90 | } else {
91 | // Service worker found. Proceed as normal.
92 | registerValidSW(swUrl);
93 | }
94 | })
95 | .catch(() => {
96 | console.log(
97 | 'No internet connection found. App is running in offline mode.'
98 | );
99 | });
100 | }
101 |
102 | export function unregister() {
103 | if ('serviceWorker' in navigator) {
104 | navigator.serviceWorker.ready.then(registration => {
105 | registration.unregister();
106 | });
107 | }
108 | }
109 |
--------------------------------------------------------------------------------