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 and deploy

Browse Source
pull/38/head
momin-riyadh 5 years ago
parent 6f2ae7272d 105c72763f
commit de0bb6b499
6 changed files with 85 additions and 82 deletions
Show Stats Download Patch File Download Diff File

1
.gitignore vendored
Unescape View File

@ -1,3 +1,4 @@
draft.md draft.md
react-for-everyone.md react-for-everyone.md
component.md component.md
05_Day_Props

2
03_Day_Setting_Up/03_day_setting_up.md
Unescape View File

@ -41,7 +41,7 @@ In the previous section, we learned about JSX and we accessed the React and Reac
## Node ## Node
Node is a JavaScript runtime environment which allows JavaScript to run on the server. Node was created in 2019. Node has played a great role for the growth of JavaScript. The React application starts by default at localhost 3000. The create-react-app has configured a node server for the React Application. That is why we need node and node modules. We will see create-react-app soon. Node is a JavaScript runtime environment which allows JavaScript to run on the server. Node was created in 2009. Node has played a great role for the growth of JavaScript. The React application starts by default at localhost 3000. The create-react-app has configured a node server for the React Application. That is why we need node and node modules. We will see create-react-app soon.
If you do have node, install node. Install [node.js](https://nodejs.org/en/). If you do have node, install node. Install [node.js](https://nodejs.org/en/).

7
04_Day_Component/04_components.md
Unescape View File

@ -14,8 +14,7 @@
</div> </div>
[<< Day 3](../30-Days-Of-React/03_Day_Setting_Up/03_day_setting_up.md) | [Day 5 >>](./05_Day_Props/05_props.md)
[<< Day 3](../30-Days-Of-React/03_Day_Setting_Up/03_day_setting_up.md) | [Day 5 >>]()
![30 Days of React banner](../images/30_days_of_react_banner_day_4.jpg) ![30 Days of React banner](../images/30_days_of_react_banner_day_4.jpg)
@ -491,9 +490,9 @@ ReactDOM.render(<HexaColor />, rootElement)
![News Letter](../images/news_letter_design.png) ![News Letter](../images/news_letter_design.png)
4. Use the given hexadecimal color generator in the example to create these random colors 4. Use the given hexadecimal color generator in the example to create these random colors
![Hexadecimal colors](../images/hexadecimal_color_exercise.png) ![Hexadecimal colors](../images/hexadecimal_color_exercise.png)
🎉 CONGRATULATIONS ! 🎉 🎉 CONGRATULATIONS ! 🎉
[<< Day 3](../30-Days-Of-React/03_Day_Setting_Up/03_day_setting_up.md) | [Day 5 >>]() [<< Day 3](../30-Days-Of-React/03_Day_Setting_Up/03_day_setting_up.md) | [Day 5 >>](./05_Day_Props/05_props.md)

28
04_Day_Component/30-days-of-react_boilerplate-components/src/index.js
Unescape View File

@ -1,7 +1,7 @@
// index.js // index.js
import React from 'react'; import React from 'react'
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom'
import asabenehImage from './images/asabeneh.jpg'; import asabenehImage from './images/asabeneh.jpg'
const hexaColor = () => { const hexaColor = () => {
let str = '0123456789abcdef' let str = '0123456789abcdef'
@ -14,7 +14,7 @@ const hexaColor = () => {
} }
const HexaColor = () => { const HexaColor = () => {
let bgColor = hexaColor() const bgColor = hexaColor()
const styles = { const styles = {
height: '100px', height: '100px',
display: 'flex', display: 'flex',
@ -49,7 +49,7 @@ const Header = () => (
// User Card Component // User Card Component
const UserCard = () => ( const UserCard = () => (
<div className='user-card'> <div className='user-card'>
<img src={asabenehImage} alt='asabeneh image'/> <img src={asabenehImage} alt='asabeneh image' />
<h2>Asabeneh Yetayeh</h2> <h2>Asabeneh Yetayeh</h2>
</div> </div>
) )
@ -62,7 +62,7 @@ const TechList = () => {
} }
const buttonStyles = { const buttonStyles = {
padding: '10px 20px', padding: '10px 20px',
background: 'rgb(0, 255, 0', background: 'rgb(0, 255, 0)',
border: 'none', border: 'none',
borderRadius: 5, borderRadius: 5,
} }
@ -75,11 +75,13 @@ const Main = () => (
<div className='main-wrapper'> <div className='main-wrapper'>
<p>Prerequisite to get started react.js:</p> <p>Prerequisite to get started react.js:</p>
<ul> <ul>
<TechList/> <TechList />
</ul> </ul>
<UserCard/> <UserCard />
<div> <div>
<HexaColor/> {/* Generate two different hexa colors every time */}
<HexaColor />
<HexaColor />
</div> </div>
</div> </div>
</main> </main>
@ -97,12 +99,12 @@ const Footer = () => (
// The App, or the parent or the container component // The App, or the parent or the container component
const App = () => ( const App = () => (
<div className='app'> <div className='app'>
<Header/> <Header />
<Main/> <Main />
<Footer/> <Footer />
</div> </div>
) )
const rootElement = document.getElementById('root') const rootElement = document.getElementById('root')
// we render the JSX element using the ReactDOM package // we render the JSX element using the ReactDOM package
ReactDOM.render(<App/>, rootElement) ReactDOM.render(<App />, rootElement)

7
readMe.md
Unescape View File

@ -27,6 +27,7 @@
| 02 | [Getting Started React](./02_Day_Introduction_to_React/02_introduction_to_react.md) | | 02 | [Getting Started React](./02_Day_Introduction_to_React/02_introduction_to_react.md) |
| 03 | [Setting Up](./03_Day_Setting_Up/03_day_setting_up.md) | | 03 | [Setting Up](./03_Day_Setting_Up/03_day_setting_up.md) |
| 04 | [Components](./04_Day_Component/04_components.md) | | 04 | [Components](./04_Day_Component/04_components.md) |
| 05 | [Props](./05_Day_Props/05_props.md) |
🧡🧡🧡 HAPPY CODING 🧡🧡🧡<div> 🧡🧡🧡 HAPPY CODING 🧡🧡🧡<div>
<small>Support [**Asabeneh**](https://www.patreon.com/asabeneh?fan_landing=true) to create more educational materials</small> <small>Support [**Asabeneh**](https://www.patreon.com/asabeneh?fan_landing=true) to create more educational materials</small>
@ -71,7 +72,7 @@ In this step by step 30 Days React challenge, you will learn React which is one
React can do everything that JavaScript can do. React can be used **_to add interactivity to websites, to develop mobile apps, desktop applications, games_**. React can do everything that JavaScript can do. React can be used **_to add interactivity to websites, to develop mobile apps, desktop applications, games_**.
I believe you will learn quite a lot in the next 30 days and your programming and problem solving skills will also be improved significantly. I believe you will learn quite a lot in the next 30 days and your programming and problem solving skills will also be improved significantly.
I will use converstational English and less jargons to write this challenge. The content will be continousely updated. If you find a typo or grammar mistakes don't suprised because I don't do any proof read before I publish it. I would recommond you to focus on the main message of the challenge instead of the English and some minor mistakes. I really appreciate if you send me pull requests for improvement and remember to pull first from master before you send pull requests. Most of the images I have used in this challenge came from 30DaysOfJavaScript challenge therefore you may need to rename file names and folders 30DaysOfReact. I will use conversational English and less jargons to write this challenge. The content will be continuously updated. If you find a typo or grammar mistakes don't surprised because I don't do any proof read before I publish it. I would recommend you to focus on the main message of the challenge instead of the English and some minor mistakes. I really appreciate if you send me pull requests for improvement and remember to pull first from master before you send pull requests. Most of the images I have used in this challenge came from 30DaysOfJavaScript challenge therefore you may need to rename file names and folders 30DaysOfReact.
If you are good at arrays, loops, functions, objects, functional programming, destructuring and spreading and class then you will be able to follow the challenge properly. Otherwise, I strongly recommend you to check [30DaysOfJavaScript](https://github.com/Asabeneh/30-Days-Of-React). If you are good at arrays, loops, functions, objects, functional programming, destructuring and spreading and class then you will be able to follow the challenge properly. Otherwise, I strongly recommend you to check [30DaysOfJavaScript](https://github.com/Asabeneh/30-Days-Of-React).
## Requirements ## Requirements
@ -158,7 +159,7 @@ git push origin exercise-solutions
## Setup ## Setup
I believe you have the motivation and a strong desire to be a developer, a computer and Internet.In addition to that basic to intermidate lelev HTML, CSS and JS. If you have those, then you have everything to get started. I believe you have the motivation and a strong desire to be a developer, a computer and Internet. In addition to that basic to intermediate level HTML, CSS and JS. If you have those, then you have everything to get started.
### Install Node.js ### Install Node.js
@ -333,7 +334,7 @@ Open the Visual Studio Code by double-clicking its icon. When you open it, you w
![coding running](./images/launched_on_new_tab.png) ![coding running](./images/launched_on_new_tab.png)
Congratulations! You have completed the setup you need to get started with React, but before we dive into React let's do JavaScript refresher. If you are very comfortable with JavaScript you may skip day 1 JavaScript refresher. The JavaScript refresher section is vast and it may take more than one day. From my experience people usually get stuck in React because their JavaScript knowledge is very shallow therefore to fill that gap all the necessary JavaScript feature which can be used in React are covered in the JavaScript refresher section. There are many exercise but you are not required to solve them. Click [here](../30-Days-Of-React/02_Day_Introduction_to_React/02_introduction_to_react.md) if you want skip JavaScript and jump directly into React. Congratulations! You have completed the setup you need to get started with React, but before we dive into React let's do a JavaScript refresher. If you are very comfortable with JavaScript you may skip day 1 JavaScript refresher. The JavaScript refresher section is vast and it may take more than one day. From my experience people usually get stuck in React because their JavaScript knowledge is very shallow therefore to fill that gap all the necessary JavaScript features which can be used in React are covered in the JavaScript refresher section. There are many exercises but you are not required to solve them. Click [here](../30-Days-Of-React/02_Day_Introduction_to_React/02_introduction_to_react.md) if you want skip JavaScript and jump directly into React.
🎉 CONGRATULATIONS ! 🎉 🎉 CONGRATULATIONS ! 🎉

Write Preview
Loading…
Cancel
Save