msb-public
/
30-Days-Of-React
mirror of https://github.com/Asabeneh/30-Days-Of-React
2
1
Code Issues Projects Releases Wiki Activity

Fix tons of typos.

Browse Source
pull/236/head
reiuyuu 3 years ago
parent 7a0ddce9c4
commit 708c562876
12 changed files with 41 additions and 41 deletions
Show Stats Download Patch File Download Diff File

10
10_React_Project_Folder_Structure/10_react_project_folder_structure.md
Unescape View File

@ -86,7 +86,7 @@ Exporting in a function declaration, a regular function
```js ```js
// src/App.js // src/App.js
import React from 'react import React from 'react'
// named export in regular function, function declaration // named export in regular function, function declaration
export function App () { export function App () {
return <h1>Welcome to 30 Days Of React</h1> return <h1>Welcome to 30 Days Of React</h1>
@ -109,7 +109,7 @@ We saw a named export and now let's implement it with default export. We can do
```js ```js
// src/App.js // src/App.js
import React from 'react import React from 'react'
// export default in arrow function // export default in arrow function
export default const App = () => <h1>Welcome to 30 Days Of React</h1> export default const App = () => <h1>Welcome to 30 Days Of React</h1>
@ -117,7 +117,7 @@ export default const App = () => <h1>Welcome to 30 Days Of React</h1>
```js ```js
// src/App.js // src/App.js
import React from 'react import React from 'react'
// export default in arrow function // export default in arrow function
export default function App () { export default function App () {
return <h1>Welcome to 30 Days Of React</h1> return <h1>Welcome to 30 Days Of React</h1>
@ -127,7 +127,7 @@ export default function App () {
```js ```js
// src/App.js // src/App.js
// Recommended for most of the cases // Recommended for most of the cases
import React from 'react import React from 'react'
const App = () => <h1>Welcome to 30 Days Of React</h1> const App = () => <h1>Welcome to 30 Days Of React</h1>
export default App export default App
``` ```
@ -605,7 +605,7 @@ Well done. Time to do some exercises for your brain and muscles.
1. What is the importance of React Folder Structure and File Naming 1. What is the importance of React Folder Structure and File Naming
2. How do you export file 2. How do you export file
3. How do you import file 3. How do you import file
4. Make a component of module and export it as named or default export 4. Make a component of module and export it as named or default export
5. Make a component or module and import it 5. Make a component or module and import it
6. Change all the components you have to different folder structure 6. Change all the components you have to different folder structure

2
11_Day_Events/11_events.md
Unescape View File

@ -48,7 +48,7 @@ Event handling in HTML
<title>30 Days Of React App</title> <title>30 Days Of React App</title>
</head> </head>
<body> <body>
<button>onclick="greetPeople()">Greet People</button> <button onclick="greetPeople()">Greet People</button>
<script> <script>
const greetPeople = () => { const greetPeople = () => {
alert('Welcome to 30 Days Of React Challenge') alert('Welcome to 30 Days Of React Challenge')

2
12_Day_Forms/12_forms.md
Unescape View File

@ -308,7 +308,7 @@ class App extends React.Component {
skills: { ...this.state.skills, [name]: checked }, skills: { ...this.state.skills, [name]: checked },
}) })
} else if (type === 'file') { } else if (type === 'file') {
console.log(type, 'cehck here') console.log(type, 'check here')
this.setState({ [name]: e.target.files[0] }) this.setState({ [name]: e.target.files[0] })
} else { } else {
this.setState({ [name]: value }) this.setState({ [name]: value })

2
13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input.md
Unescape View File

@ -14,7 +14,7 @@
</div> </div>
[<< Day 12](../12_Day_Forms/12_forms.md) | [Day 14 >>]() [<< Day 12](../12_Day_Forms/12_forms.md) | [Day 14 >>](../14_Day_Component_Life_Cycles/14_component_life_cycles.md)
![30 Days of React banner](../images/30_days_of_react_banner_day_13.jpg) ![30 Days of React banner](../images/30_days_of_react_banner_day_13.jpg)

50
15_Third_Party_Packages/15_third_party_packages.md
Unescape View File

@ -94,17 +94,17 @@ header {
```js ```js
// Header.js // Header.js
import React from 'react' import React from 'react'
import './styles/header.scss import './styles/header.scss'
const Header = () = ( const Header = () => (
<header> <header>
<div className='header-wrapper'> <div className='header-wrapper'>
<h1>30 Days Of React</h1> <h1>30 Days Of React</h1>
<h2>Getting Started React</h2> <h2>Getting Started React</h2>
<h3>JavaScript Library</h3> <h3>JavaScript Library</h3>
<p>Instructor: Asabeneh Yetayeh</p> <p>Instructor: Asabeneh Yetayeh</p>
<small>Oct 15, 2020</small> <small>Oct 15, 2020</small>
</div> </div>
</header> </header>
) )
export default Header export default Header
@ -160,19 +160,19 @@ Naming:
```js ```js
// Header.js // Header.js
import React from 'react' import React from 'react'
import headerStyles from './styles/header.module.scss import headerStyles from './styles/header.module.scss'
// We can all destructure the class name // We can all destructure the class name
const {header, headerWrapper} = headerStyles const { header, headerWrapper } = headerStyles
const Header = () = ( const Header = () => (
<header className = {headerStyles.header}> <header className={headerStyles.header}>
<div className={headerStyles.headerWrapper}> <div className={headerStyles.headerWrapper}>
<h1>30 Days Of React</h1> <h1>30 Days Of React</h1>
<h2>Getting Started React</h2> <h2>Getting Started React</h2>
<h3>JavaScript Library</h3> <h3>JavaScript Library</h3>
<p>Instructor: Asabeneh Yetayeh</p> <p>Instructor: Asabeneh Yetayeh</p>
<small>Oct 15, 2020</small> <small>Oct 15, 2020</small>
</div> </div>
</header> </header>
) )
export default Header export default Header
@ -183,13 +183,13 @@ export default Header
import React, { Component } from 'react' import React, { Component } from 'react'
import ReactDOM from 'react-dom' import ReactDOM from 'react-dom'
import './styles/header.scss import './styles/header.scss'
class App extends Component { class App extends Component {
render() { render() {
return ( return (
<div className='App'> <div className='App'>
<Header /> <Header />
</div> </div>
) )
} }

2
18_Fetch_And_Axios/18_fetch_axios.md
Unescape View File

@ -14,7 +14,7 @@
</div> </div>
[<< Day 17](../17_React_Router/17_react_router.md) | [Day 19>>]() [<< Day 17](../17_React_Router/17_react_router.md) | [Day 19>>](../19_projects/19_projects.md)
![30 Days of React banner](../images/30_days_of_react_banner_day_18.jpg) ![30 Days of React banner](../images/30_days_of_react_banner_day_18.jpg)

2
19_projects/19_projects.md
Unescape View File

@ -14,7 +14,7 @@
</div> </div>
[<< Day 18](../18_Fetch_And_Axios/18_fetch_axios.md) | [Day 20>>]() [<< Day 18](../18_Fetch_And_Axios/18_fetch_axios.md) | [Day 20>>](../20_projects/20_projects.md)
![30 Days of React banner](../images/30_days_of_react_banner_day_19.jpg) ![30 Days of React banner](../images/30_days_of_react_banner_day_19.jpg)

2
20_projects/20_projects.md
Unescape View File

@ -14,7 +14,7 @@
</div> </div>
[<< Day 19](../19_projects/19_projects.md) | [Day 21>>]() [<< Day 19](../19_projects/19_projects.md) | [Day 21>>](../21_Introducing_Hooks/21_introducing_hooks.md)
![30 Days of React banner](../images/30_days_of_react_banner_day_20.jpg) ![30 Days of React banner](../images/30_days_of_react_banner_day_20.jpg)

2
21_Introducing_Hooks/21_introducing_hooks.md
Unescape View File

@ -14,7 +14,7 @@
</div> </div>
[<< Day 20](../20_projects/20_projects.md) | [Day 22>>]() [<< Day 20](../20_projects/20_projects.md) | [Day 22>>](../22_Form_Using_Hooks/22_form_using_hooks.md)
![30 Days of React banner](../images/30_days_of_react_banner_day_21.jpg) ![30 Days of React banner](../images/30_days_of_react_banner_day_21.jpg)

2
27_Ref/27_ref.md
Unescape View File

@ -14,7 +14,7 @@
</div> </div>
[<< Day 25](../25_Custom_Hooks/25_custom_hooks.md) | [Day 27>>]() [<< Day 26](../26_Context/26_context.md) | [Day 28>>](../28_project/28_project.md)
![30 Days of React banner](../images/30_days_of_react_banner_day_27.jpg) ![30 Days of React banner](../images/30_days_of_react_banner_day_27.jpg)

4
28_project/28_project.md
Unescape View File

@ -14,7 +14,7 @@
</div> </div>
[<< Day 27](../27_Ref/27_ref.md) | [Day 29>>]() [<< Day 27](../27_Ref/27_ref.md) | [Day 29>>](../29_explore/29_explore.md)
![30 Days of React banner](../images/30_days_of_react_banner_day_28.jpg) ![30 Days of React banner](../images/30_days_of_react_banner_day_28.jpg)
@ -29,7 +29,7 @@ In this section, you and I will develop an old version of twitter post.
# Exercises # Exercises
1. Develop the following application, [twitter tweets](https://www.30daysofreact.com/day-28/twitter-clone). The application has all the CRUD operations. 1. Develop the following application, [twitter tweets](https://www.30daysofreact.com/day-28/twitter-clone). The application has all the CRUD operations.
🎉 CONGRATULATIONS ! 🎉 🎉 CONGRATULATIONS ! 🎉

2
29_explore/29_explore.md
Unescape View File

@ -14,7 +14,7 @@
</div> </div>
[<< Day 28](../27_Ref/27_ref.md) | [Day 29 >>](../29_explore/29_explore.md) [<< Day 28](../27_Ref/27_ref.md) | [Day 30 >>](../30_conclusions/30_conclusions.md)
![30 Days of React banner](../images/30_days_of_react_banner_day_29.jpg) ![30 Days of React banner](../images/30_days_of_react_banner_day_29.jpg)

Write Preview
Loading…
Cancel
Save