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

Merge 7d1846d445 into d0c066fcb9

Browse Source
pull/236/merge
reiuyuu 3 years ago committed by GitHub
parent d0c066fcb9 7d1846d445
commit ca176cb9fb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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
// src/App.js
import React from 'react
import React from 'react'
// named export in regular function, function declaration
export function App () {
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
// src/App.js
import React from 'react
import React from 'react'
// export default in arrow function
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
// src/App.js
import React from 'react
import React from 'react'
// export default in arrow function
export default function App () {
return <h1>Welcome to 30 Days Of React</h1>
@ -127,7 +127,7 @@ export default function App () {
```js
// src/App.js
// Recommended for most of the cases
import React from 'react
import React from 'react'
const App = () => <h1>Welcome to 30 Days Of React</h1>
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
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
5. Make a component or module and import it
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>
</head>
<body>
<button>onclick="greetPeople()">Greet People</button>
<button onclick="greetPeople()">Greet People</button>
<script>
const greetPeople = () => {
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 },
})
} else if (type === 'file') {
console.log(type, 'cehck here')
console.log(type, 'check here')
this.setState({ [name]: e.target.files[0] })
} else {
this.setState({ [name]: value })

2
13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input.md
Unescape View File

@ -14,7 +14,7 @@
</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)

50
15_Third_Party_Packages/15_third_party_packages.md
Unescape View File

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

2
18_Fetch_And_Axios/18_fetch_axios.md
Unescape View File

@ -14,7 +14,7 @@
</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)

2
19_projects/19_projects.md
Unescape View File

@ -14,7 +14,7 @@
</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)

2
20_projects/20_projects.md
Unescape View File

@ -14,7 +14,7 @@
</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)

2
21_Introducing_Hooks/21_introducing_hooks.md
Unescape View File

@ -14,7 +14,7 @@
</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)

2
27_Ref/27_ref.md
Unescape View File

@ -14,7 +14,7 @@
</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)

4
28_project/28_project.md
Unescape View File

@ -14,7 +14,7 @@
</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)
@ -29,7 +29,7 @@ In this section, you and I will develop an old version of twitter post.
# 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 ! 🎉

2
29_explore/29_explore.md
Unescape View File

@ -14,7 +14,7 @@
</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)

Write Preview
Loading…
Cancel
Save