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 => missing div and mismatched div has been update

Browse Source
pull/14/head
mominriyadh 5 years ago
parent 8412c51b89
commit 6f2ae7272d
3 changed files with 79 additions and 81 deletions
Show Stats Download Patch File Download Diff File

4
04_Day_Component/04_components.md
Unescape View File

@ -13,7 +13,7 @@
</sub> </sub>
</div> </div>
</div>
[<< 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 >>]()
@ -471,7 +471,7 @@ const hexaColor = () => {
return '#' + color return '#' + color
} }
const HexaColor = () => <div>{hexaColor()}</dv> const HexaColor = () => <div>{hexaColor()}</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

16
04_Day_Component/30-days-of-react_boilerplate-components/public/index.html
Unescape View File

@ -14,9 +14,9 @@
<title>30 Days Of React App</title> <title>30 Days Of React App</title>
<style> <style>
/* == General style === */ /* == General style === */
* { * {
box-sizing: border-box; box-sizing: border-box;
padding: 0; padding: 0;
@ -62,14 +62,12 @@
header { header {
background-color: #61dbfb; background-color: #61dbfb;
padding: 25; padding: 10px;
padding: 10px;
} }
main { main {
padding: 10px; padding: 10px 10px 60px;
padding-bottom: 60px; /* Height of the footer */
/* Height of the footer */
} }
ul { ul {
@ -101,9 +99,9 @@
border-radius: 50%; border-radius: 50%;
width: 14%; width: 14%;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

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

@ -1,108 +1,108 @@
// 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'
let color = '' let color = ''
for (let i = 0; i < 6; i++) { for (let i = 0; i < 6; i++) {
let index = Math.floor(Math.random() * str.length) let index = Math.floor(Math.random() * str.length)
color += str[index] color += str[index]
} }
return '#' + color return '#' + color
} }
const HexaColor = () => { const HexaColor = () => {
let bgColor = hexaColor() let bgColor = hexaColor()
const styles = { const styles = {
height: '100px', height: '100px',
display: 'flex', display: 'flex',
'justify-content': 'center', 'justify-content': 'center',
'align-items': 'center', 'align-items': 'center',
fontFamily: 'Montserrat', fontFamily: 'Montserrat',
margin: '2px auto', margin: '2px auto',
borderRadius: '5px', borderRadius: '5px',
width: '75%', width: '75%',
border: '2px solid black', border: '2px solid black',
} }
return ( return (
<div style={styles}> <div style={styles}>
<h2>{bgColor}</h2> <h2>{bgColor}</h2>
</div> </div>
) )
} }
// Header Component // Header Component
const Header = () => ( const Header = () => (
<header> <header>
<div className='header-wrapper'> <div className='header-wrapper'>
<h1>Welcome to 30 Days Of React</h1> <h1>Welcome to 30 Days Of React</h1>
<h2>Getting Started React</h2> <h2>Getting Started React</h2>
<h3>JavaScript Library</h3> <h3>JavaScript Library</h3>
<p>Asabeneh Yetayeh</p> <p>Asabeneh Yetayeh</p>
<small>Oct 3, 2020</small> <small>Oct 3, 2020</small>
</div> </div>
</header> </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>
) )
// TechList Component // TechList Component
const TechList = () => { const TechList = () => {
const techs = ['HTML', 'CSS', 'JavaScript'] const techs = ['HTML', 'CSS', 'JavaScript']
const techsFormatted = techs.map((tech) => <li key={tech}>{tech}</li>) const techsFormatted = techs.map((tech) => <li key={tech}>{tech}</li>)
return techsFormatted return techsFormatted
} }
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,
} }
const Button = () => <button style={buttonStyles}> action </button> const Button = () => <button style={buttonStyles}> action </button>
// Main Component // Main Component
const Main = () => ( const Main = () => (
<main> <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 /> <HexaColor/>
</div> </div>
</div> </div>
</main> </main>
) )
// Footer Component // Footer Component
const Footer = () => ( const Footer = () => (
<footer> <footer>
<div className='footer-wrapper'> <div className='footer-wrapper'>
<p>Copyright 2020</p> <p>Copyright 2020</p>
</div> </div>
</footer> </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)

Write Preview
Loading…
Cancel
Save