Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 07232ad

Browse files
Updating this Tutorial
1 parent a6c7fbb commit 07232ad

File tree

7 files changed

+6764
-8784
lines changed

7 files changed

+6764
-8784
lines changed

‎package-lock.json‎

Lines changed: 5211 additions & 7704 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"node-sass": "^4.11.0",
6+
"node-sass": "^4.12.0",
77
"react": "^16.8.6",
88
"react-dom": "^16.8.6",
9-
"react-scripts": "^2.1.8"
9+
"react-scripts": "^3.0.1"
1010
},
1111
"scripts": {
1212
"start": "react-scripts start",

‎src/Components/App.jsx‎

Lines changed: 64 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,68 @@
1-
import React, { useState, useEffect, useRef}from 'react';
2-
import '../SCSS/App.scss';
3-
import Note from './Note';
1+
import React, { useState, useEffect, useRef}from "react";
2+
import "../SCSS/App.scss";
3+
import Note from "./Note";
44

55
const App = () => {
6-
const [isEditing, setEditing] = useState(false);
7-
const inputRef = useRef();
8-
const [inputValue, setInputValue] = useState('');
9-
const [notes, setNotes]= useState([]);
10-
11-
useEffect(() => {
12-
inputRef.current.focus();
13-
}, [isEditing]);
14-
15-
const updateNoteText = (event) => {
16-
setInputValue(event.target.value);
17-
}
18-
19-
const handleKeyPress = (e) =>{
20-
if (e.key === 'Enter') {
21-
addTask()
22-
}
23-
}
24-
25-
const addTask = () => {
26-
if (!inputValue.replace(/\s/,'').length) {
27-
return;
28-
}
29-
30-
const newNotesArray = [...notes, inputValue];
31-
setNotes(newNotesArray);
32-
setInputValue('');
33-
34-
}
35-
36-
const deleteTask = (index) => {
37-
const notesArray = [...notes];
38-
notesArray.splice(index, 1);
39-
setNotes(notesArray);
40-
}
41-
42-
return (
43-
<div className="container">
44-
<div className="header">React - TODO List Demo</div>
45-
<div className="btn" onClick={addTask}>
46-
+
47-
</div>
48-
<input
49-
ref={inputRef}
50-
type="text"
51-
className="textInput"
52-
value={inputValue}
53-
onChange={updateNoteText}
54-
onKeyPress={handleKeyPress}
55-
/>
56-
{notes.map((item, index) => <Note item={item} onClick={() => deleteTask(index)} key={`task${index}`}/>)}
57-
</div>
58-
);
59-
60-
}
6+
const [isEditing, setEditing] = useState(false);
7+
const inputRef = useRef();
8+
const [inputValue, setInputValue] = useState("");
9+
const [notes, setNotes] = useState([]);
10+
11+
useEffect(() => {
12+
inputRef.current.focus();
13+
}, [isEditing]);
14+
15+
const updateNoteText = event => {
16+
setInputValue(event.target.value);
17+
};
18+
19+
const handleKeyPress = e => {
20+
if (e.key === "Enter") {
21+
addTask();
22+
}
23+
};
24+
25+
const addTask = () => {
26+
if (!inputValue.replace(/\s/, "").length) {
27+
return;
28+
}
29+
30+
const newNotesArray = [...notes, inputValue];
31+
setNotes(newNotesArray);
32+
setInputValue("");
33+
};
34+
35+
const deleteTask = index => {
36+
const notesArray = [...notes];
37+
notesArray.splice(index, 1);
38+
setNotes(notesArray);
39+
};
40+
41+
return (
42+
<>
43+
<div className="header">React Hooks - TODO List Tutorial</div>
44+
<div className="container">
45+
<div className="btn" onClick={addTask}>
46+
+
47+
</div>
48+
<input
49+
ref={inputRef}
50+
type="text"
51+
className="textInput"
52+
value={inputValue}
53+
onChange={updateNoteText}
54+
onKeyPress={handleKeyPress}
55+
/>
56+
{notes.map((item, index) => (
57+
<Note
58+
item={item}
59+
onClick={() => deleteTask(index)}
60+
key={`task${index}`}
61+
/>
62+
))}
63+
</div>
64+
</>
65+
);
66+
};
6167

6268
export default App;

‎src/Components/Note.jsx‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
1-
import React from 'react';
2-
import'../CSS/..'
1+
import React from "react";
2+
33
const Note = props => {
4-
const {item, ...restProps} = props
4+
const {item, ...restProps} = props;
55

6-
return (
7-
<div
8-
{...restProps}
9-
className="note"
10-
11-
>
12-
{item || ''}
13-
</div>
14-
);
6+
return (
7+
<div {...restProps} className="note">
8+
{item || ""}
9+
</div>
10+
);
1511
};
1612

1713
export default Note;

‎src/SCSS/App.scss‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
@import './vars';
2-
1+
@import "./vars";
32

43
* {
54
margin: 0px;
65
box-sizing: border-box;
76
}
8-
html, body {
7+
html,
8+
body {
99
width: 100%;
1010
height: 100%;
1111
}
@@ -17,7 +17,8 @@ body {
1717
height: 100%;
1818
}
1919
.container {
20-
padding-bottom: 80px;
20+
padding-bottom: 1%;
21+
max-width: 95%;
2122
}
2223
.header {
2324
font-size: 22px;
@@ -35,10 +36,10 @@ body {
3536
background: #fff;
3637
border: solid 1px #e9e9e9;
3738
cursor: pointer;
38-
box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.1);
39-
-webkit-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.1);
40-
-moz-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.1);
41-
transition: transform .2s ease;
39+
box-shadow: 0px 0px 14px 0px rgba(0,0, 0, 0.1);
40+
-webkit-box-shadow: 0px 0px 14px 0px rgba(0,0, 0, 0.1);
41+
-moz-box-shadow: 0px 0px 14px 0px rgba(0,0, 0, 0.1);
42+
transition: transform 0.2s ease;
4243
}
4344
.note:hover {
4445
transform: scale(1.02);
@@ -58,10 +59,10 @@ body {
5859
color: $background;
5960
background: $blue;
6061
cursor: pointer;
61-
box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.8);
62-
-webkit-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.8);
63-
-moz-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.8);
64-
transition: transform .06s ease;
62+
box-shadow: 0px 0px 11px 0px rgba(0,0, 0, 0.8);
63+
-webkit-box-shadow: 0px 0px 11px 0px rgba(0,0, 0, 0.8);
64+
-moz-box-shadow: 0px 0px 11px 0px rgba(0,0, 0, 0.8);
65+
transition: transform 0.06s ease;
6566
}
6667
.btn:hover {
6768
transform: scale(1.2);
@@ -78,4 +79,4 @@ body {
7879
background: $header;
7980
font-size: 16px;
8081
color: $background;
81-
}
82+
}

‎src/SCSS/_vars.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
$header: #7fba23;
2-
$blue: #0074cc;
1+
$header: #028fac;
2+
$blue: #222222;
33
$background: #f1f1f1;
4-
$gray:#e9e9e9;
4+
$gray:#e9e9e9;

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /