Asabeneh
4 years ago
parent
56cba79a97
commit
06a583224e
@ -1,6 +1,5 @@
|
|||||||
draft.md
|
draft.md
|
||||||
react-for-everyone.md
|
react-for-everyone.md
|
||||||
component.md
|
component.md
|
||||||
11_Day_Events
|
|
||||||
12_Day_Forms
|
12_Day_Forms
|
||||||
|
|
||||||
|
|||||||
@ -0,0 +1,225 @@
|
|||||||
|
<div align="center">
|
||||||
|
<h1> 30 Days Of React: Statet</h1>
|
||||||
|
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
|
||||||
|
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
|
||||||
|
</a>
|
||||||
|
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
|
||||||
|
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<sub>Author:
|
||||||
|
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
|
||||||
|
<small> October, 2020</small>
|
||||||
|
</sub>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
[<< Day 10](../10_React_Project_Folder_Structure/10_react_project_folder_structure.md) | [Day 12 >>]()
|
||||||
|
|
||||||
|
|
||||||
|
- [Events](#events)
|
||||||
|
- [What is an event?](#what-is-an-event)
|
||||||
|
- [Exercises](#exercises)
|
||||||
|
- [Exercises: Level 1](#exercises-level-1)
|
||||||
|
- [Exercises: Level 2](#exercises-level-2)
|
||||||
|
- [Exercises: Level 3](#exercises-level-3)
|
||||||
|
|
||||||
|
# Events
|
||||||
|
|
||||||
|
## What is an event?
|
||||||
|
|
||||||
|
An event is an action or occurrence recognized by a software. To make an event more clear let's use the daily activities we do when we use a computer such as clicking on a button, hover on an image, pressing a keyboard, scrolling the mouse wheel and etc. In this section, we will focus only some of the mouse and keyboard events. The react documentation has already a detail note about [events](https://reactjs.org/docs/handling-events.html).
|
||||||
|
|
||||||
|
Handling events in React is very similar to handling elements on DOM elements using pure JavaScript. Some of the syntax difference between handling event in React and pure JavaScript:
|
||||||
|
|
||||||
|
- React events are named using camelCase, rather than lowercase.
|
||||||
|
- With JSX you pass a function as the event handler, rather than a string.
|
||||||
|
|
||||||
|
Let's see some examples to understand event handling.
|
||||||
|
|
||||||
|
Event handling in HTML
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>30 Days Of React App</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<button>onclick="greetPeople()">Greet People</button>
|
||||||
|
<script>
|
||||||
|
const greetPeople = () => {
|
||||||
|
alert('Welcome to 30 Days Of React Challenge')
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
In React, it is slightly different
|
||||||
|
|
||||||
|
```js
|
||||||
|
import React from 'react'
|
||||||
|
// if it is functional components
|
||||||
|
const App = () => {
|
||||||
|
const greetPeople = () => {
|
||||||
|
alert('Welcome to 30 Days Of React Challenge')
|
||||||
|
}
|
||||||
|
return <button onClick={greetPeople}> </button>
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
import React, { Component } from 'react'
|
||||||
|
// if it is functional components
|
||||||
|
class App extends Component {
|
||||||
|
greetPeople = () => {
|
||||||
|
alert('Welcome to 30 Days Of React Challenge')
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return <button onClick={this.greetPeople}> </button>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Another difference between HTML and React event is that you cannot return false to prevent default behavior in React. You must call preventDefault explicitly. For example, with plain HTML, to prevent the default link behavior of opening a new page, you can write:
|
||||||
|
|
||||||
|
Plain HTML
|
||||||
|
|
||||||
|
```html
|
||||||
|
<a href="#" onclick="console.log('The link was clicked.'); return false">
|
||||||
|
Click me
|
||||||
|
</a>
|
||||||
|
```
|
||||||
|
|
||||||
|
However, in React it could be as follows:
|
||||||
|
|
||||||
|
```js
|
||||||
|
import React, { Component } from 'react'
|
||||||
|
// if it is functional components
|
||||||
|
class App extends Component {
|
||||||
|
handleClick = () => {
|
||||||
|
alert('Welcome to 30 Days Of React Challenge')
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<a href='#' onClick={this.handleClick}>
|
||||||
|
Click me
|
||||||
|
</a>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Event handling is a very vast topic and in this challenge we will focus on the most common event types. We may use the following mouse and keyboard events.
|
||||||
|
_onMouseMove, onMouseEnter, onMouseLeave, onMouseOut, onClick, onKeyDown, onKeyPress, onKeyUp, onCopy, onCut, onDrag, onChange,onBlur,onInput, onSubmit_
|
||||||
|
|
||||||
|
Let's implement some more mouse and keyboard events.
|
||||||
|
|
||||||
|
```js
|
||||||
|
// index.js
|
||||||
|
import React, { Component } from 'react'
|
||||||
|
import ReactDOM from 'react-dom'
|
||||||
|
/*
|
||||||
|
_onMouseMove, onMouseEnter, onMouseLeave, onMouseOut, onClick, onKeyDown, onKeyPress, onKeyUp, onCopy, onCut, onDrag, onChange,onBlur,onInput, onSubmit_
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
class App extends Component {
|
||||||
|
state = {
|
||||||
|
firstName: '',
|
||||||
|
message: '',
|
||||||
|
key: '',
|
||||||
|
}
|
||||||
|
handleClick = (e) => {
|
||||||
|
// e gives an event object
|
||||||
|
// check the value of e using console.log(e)
|
||||||
|
this.setState({
|
||||||
|
message: 'Welcome to the world of events',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// triggered whenever the mouse moves
|
||||||
|
handleMouseMove = (e) => {
|
||||||
|
this.setState({ message: 'mouse is moving' })
|
||||||
|
}
|
||||||
|
// to get value when an input field changes a value
|
||||||
|
handleChange = (e) => {
|
||||||
|
this.setState({
|
||||||
|
firstName: e.target.value,
|
||||||
|
message: e.target.value,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// to get keyboard key code when an input field is pressed
|
||||||
|
// it works with input and textarea
|
||||||
|
handleKeyPress = (e) => {
|
||||||
|
this.setState({
|
||||||
|
message:
|
||||||
|
`${e.target.value} has been pressed and the keycode is` + e.charCode,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// Blurring happens when a mouse leave an input field
|
||||||
|
handleBlur = (e) => {
|
||||||
|
this.setState({ message: 'Input field has been blurred' })
|
||||||
|
}
|
||||||
|
// This event triggers during a text copy
|
||||||
|
handleCopy = (e) => {
|
||||||
|
this.setState({
|
||||||
|
message: 'Using 30 Days Of React for commercial purpose is not allowed',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h1>Welcome to the World of Events</h1>
|
||||||
|
|
||||||
|
<button onClick={this.handleClick}>Click Me</button>
|
||||||
|
<button onMouseMove={this.handleMouseMove}>Move mouse on me</button>
|
||||||
|
<p onCopy={this.handleCopy}>
|
||||||
|
Check copy right permission by copying this text
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>{this.state.message}</p>
|
||||||
|
<label htmlFor=''> Test for onKeyPress Event: </label>
|
||||||
|
<input type='text' onKeyPress={this.handleKeyPress} />
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<label htmlFor=''> Test for onBlur Event: </label>
|
||||||
|
<input type='text' onBlur={this.handleBlur} />
|
||||||
|
|
||||||
|
<form onSubmit={this.handleSubmit}>
|
||||||
|
<div>
|
||||||
|
<label htmlFor='firstName'>First Name: </label>
|
||||||
|
<input
|
||||||
|
onChange={this.handleChange}
|
||||||
|
name='firstName'
|
||||||
|
value={this.state.value}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<input type='submit' value='Submit' />
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const rootElement = document.getElementById('root')
|
||||||
|
// we render the JSX element using the ReactDOM package
|
||||||
|
ReactDOM.render(<App />, rootElement)
|
||||||
|
```
|
||||||
|
|
||||||
|
# Exercises
|
||||||
|
|
||||||
|
## Exercises: Level 1
|
||||||
|
|
||||||
|
## Exercises: Level 2
|
||||||
|
|
||||||
|
## Exercises: Level 3
|
||||||
|
|
||||||
|
🎉 CONGRATULATIONS ! 🎉
|
||||||
|
|
||||||
|
[<< Day 10](../10_React_Project_Folder_Structure/10_react_project_folder_structure.md) | [Day 12 >>]()
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
/.pnp
|
||||||
|
.pnp.js
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
# 30 Days of React App: Day 3
|
||||||
|
|
||||||
|
In the project directory, you can run to start the project
|
||||||
|
|
||||||
|
### `npm start`
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
{
|
||||||
|
"name": "30-days-of-react",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@testing-library/jest-dom": "^4.2.4",
|
||||||
|
"@testing-library/react": "^9.3.2",
|
||||||
|
"@testing-library/user-event": "^7.1.2",
|
||||||
|
"react": "^16.13.1",
|
||||||
|
"react-dom": "^16.13.1",
|
||||||
|
"react-scripts": "3.4.3"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "react-scripts start",
|
||||||
|
"build": "react-scripts build",
|
||||||
|
"test": "react-scripts test",
|
||||||
|
"eject": "react-scripts eject"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"extends": "react-app"
|
||||||
|
},
|
||||||
|
"browserslist": {
|
||||||
|
"production": [
|
||||||
|
">0.2%",
|
||||||
|
"not dead",
|
||||||
|
"not op_mini all"
|
||||||
|
],
|
||||||
|
"development": [
|
||||||
|
"last 1 chrome version",
|
||||||
|
"last 1 firefox version",
|
||||||
|
"last 1 safari version"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="Web site created using create-react-app"
|
||||||
|
/>
|
||||||
|
<title>30 Days Of React App</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,13 @@
|
|||||||
|
export const tenHighestPopulation = [
|
||||||
|
{ country: 'World', population: 7693165599 },
|
||||||
|
{ country: 'China', population: 1377422166 },
|
||||||
|
{ country: 'India', population: 1295210000 },
|
||||||
|
{ country: 'United States of America', population: 323947000 },
|
||||||
|
{ country: 'Indonesia', population: 258705000 },
|
||||||
|
{ country: 'Brazil', population: 206135893 },
|
||||||
|
{ country: 'Pakistan', population: 194125062 },
|
||||||
|
{ country: 'Nigeria', population: 186988000 },
|
||||||
|
{ country: 'Bangladesh', population: 161006790 },
|
||||||
|
{ country: 'Russian Federation', population: 146599183 },
|
||||||
|
{ country: 'Japan', population: 126960000 },
|
||||||
|
]
|
||||||
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 82 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 40 KiB |
@ -0,0 +1,87 @@
|
|||||||
|
// index.js
|
||||||
|
import React, { Component } from 'react'
|
||||||
|
import ReactDOM from 'react-dom'
|
||||||
|
|
||||||
|
class App extends Component {
|
||||||
|
state = {
|
||||||
|
firstName: '',
|
||||||
|
message: '',
|
||||||
|
key: '',
|
||||||
|
}
|
||||||
|
handleClick = (e) => {
|
||||||
|
// e gives an event object
|
||||||
|
// check the value of e using console.log(e)
|
||||||
|
this.setState({
|
||||||
|
message: 'Welcome to the world of events',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// triggered whenever the mouse moves
|
||||||
|
handleMouseMove = (e) => {
|
||||||
|
this.setState({ message: 'mouse is moving' })
|
||||||
|
}
|
||||||
|
// to get value when an input field changes a value
|
||||||
|
handleChange = (e) => {
|
||||||
|
this.setState({
|
||||||
|
firstName: e.target.value,
|
||||||
|
message: e.target.value,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// to get keyboard key code when an input field is pressed
|
||||||
|
// it works with input and textarea
|
||||||
|
handleKeyPress = (e) => {
|
||||||
|
this.setState({
|
||||||
|
message:
|
||||||
|
`${e.target.value} has been pressed and the keycode is` + e.charCode,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// Blurring happens when a mouse leave an input field
|
||||||
|
handleBlur = (e) => {
|
||||||
|
this.setState({ message: 'Input field has been blurred' })
|
||||||
|
}
|
||||||
|
// This event triggers during a text copy
|
||||||
|
handleCopy = (e) => {
|
||||||
|
this.setState({
|
||||||
|
message: 'Using 30 Days Of React for commercial purpose is not allowed',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h1>Welcome to the World of Events</h1>
|
||||||
|
|
||||||
|
<button onClick={this.handleClick}>Click Me</button>
|
||||||
|
<button onMouseMove={this.handleMouseMove}>Move mouse on me</button>
|
||||||
|
<p onCopy={this.handleCopy}>
|
||||||
|
Check copy right permission by copying this text
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>{this.state.message}</p>
|
||||||
|
<label htmlFor=''> Test for onKeyPress Event: </label>
|
||||||
|
<input type='text' onKeyPress={this.handleKeyPress} />
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<label htmlFor=''> Test for onBlur Event: </label>
|
||||||
|
<input type='text' onBlur={this.handleBlur} />
|
||||||
|
|
||||||
|
<form onSubmit={this.handleSubmit}>
|
||||||
|
<div>
|
||||||
|
<label htmlFor='firstName'>First Name: </label>
|
||||||
|
<input
|
||||||
|
onChange={this.handleChange}
|
||||||
|
name='firstName'
|
||||||
|
value={this.state.value}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<input type='submit' value='Submit' />
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const rootElement = document.getElementById('root')
|
||||||
|
ReactDOM.render(<App />, rootElement)
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue