Asabeneh
4 years ago
parent
a0a553ab0c
commit
9998eac024
@ -1 +1,605 @@
|
||||
# Coming Tomorrow !!!
|
||||
<div align="center">
|
||||
<h1> 30 Days Of React: Setting Up </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>
|
||||
</div>
|
||||
|
||||
[<< Day 2](../02_Day_Introduction_to_React/02_introduction_to_react.md) | [Day 4 >>]()
|
||||
|
||||
|
||||
|
||||
- [Setting Up](#setting-up)
|
||||
- [Node](#node)
|
||||
- [Module](#module)
|
||||
- [Package](#package)
|
||||
- [Node Package Manager(NPM)](#node-package-managernpm)
|
||||
- [Visual Studio Code](#visual-studio-code)
|
||||
- [Browser](#browser)
|
||||
- [Visual Studio Extensions](#visual-studio-extensions)
|
||||
- [Create React App](#create-react-app)
|
||||
- [Your first React App](#your-first-react-app)
|
||||
- [React Boilerplate](#react-boilerplate)
|
||||
- [Style in JSX](#style-in-jsx)
|
||||
- [Injecting data to JSX elements](#injecting-data-to-jsx-elements)
|
||||
- [Importing Media Objects in React](#importing-media-objects-in-react)
|
||||
- [Exercises](#exercises)
|
||||
|
||||
# Setting Up
|
||||
|
||||
In the previous section, we learned about JSX and we access the React and ReactDOM package using CDN. However, in real life work in environment instead of CDN you will use create-react-app package to generate a React project starter(boilerplate). The initial public release was on Jul 22, 2016. Before this developer used to configure webpack which a JavaScript module bundler, babel and all the necessary packages manually and this used to take half an hour or may be more. Now, create-react-app will take care of everything and you will be in charge developing product only instead of spending too much time configuring and setting up projects. Before we start using different tools let's have a brief introduction for all the tools we are going to use in this challenge. You do not have understand everything but I will try to give a very short introduction about some of the tools and technologies which we use when we work with React.
|
||||
|
||||
## Node
|
||||
|
||||
Node is a JavaScript run time environment which allows to run JavaScript on the server.Node was created in 2019. Node has played a great role for the growth of JavaScript.
|
||||
|
||||
If you do have node, install node. Install [node.js](https://nodejs.org/en/).
|
||||
|
||||
|
||||
|
||||
After downloading double click and install
|
||||
|
||||
|
||||
|
||||
We can check if node is installed on our local machine by opening our device terminal or command prompt.
|
||||
|
||||
```sh
|
||||
asabeneh $ node -v
|
||||
v12.18.0
|
||||
```
|
||||
|
||||
## Module
|
||||
|
||||
A single or multiple functions which can be exported and imported when needed and can be included in a project.
|
||||
|
||||
## Package
|
||||
|
||||
A Package is a module or a collection of modules. For instance, React, ReactDOM are packages.
|
||||
|
||||
## Node Package Manager(NPM)
|
||||
|
||||
NPM was created in 2010. You do not need to install NPM separately when you install node you will have also NPM. NPM is a default package manager for Node.js. It allows users to consume and distribute JavaScript modules that are available in the registry. NPM allows to create packages, use packages and distribute packages. NMP has also play quite a big role in the growth of JavaScript. Currently, there is more than 350, 000 package on NPM registry. Let's see the create-react-app on NPM registry. The number of downloads show the popularity of the package.
|
||||
|
||||
|
||||
|
||||
## Visual Studio Code
|
||||
|
||||
We will use Visual Studio Code and [download](https://code.visualstudio.com) and install it if you do not have one yet.
|
||||
|
||||
## Browser
|
||||
|
||||
We will use Google chrome
|
||||
|
||||
## Visual Studio Extensions
|
||||
|
||||
- Prettier
|
||||
- ESLint
|
||||
- Bracket Pair Colorizer
|
||||
- ES7 React/Redux/GraphQL/React-Native snippets
|
||||
|
||||
## Create React App
|
||||
|
||||
To create a react project you can use one of the following ways. Let's assume you installed node. Open the command line interface , git bash or terminal on Mac or Linux. Then run the following command. I am using git bash.
|
||||
|
||||
```sh
|
||||
Asabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop
|
||||
$ npx create-react-app name-of-your-project
|
||||
```
|
||||
|
||||
If you do not like to write npx every time you create a project you may install create-react-app package globally in your computer using the following command.
|
||||
|
||||
```sh
|
||||
Asabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop
|
||||
$ npm install -g create-react-app
|
||||
```
|
||||
|
||||
After you installed create-react app, you create a React application as follows:
|
||||
|
||||
```sh
|
||||
Asabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop
|
||||
$ create-react-app name-of-project
|
||||
```
|
||||
|
||||
# Your first React App
|
||||
|
||||
```sh
|
||||
Asabeneh@DESKTOP-KGC1AKC MINGW64 ~
|
||||
\$ cd Desktop/
|
||||
```
|
||||
|
||||
```sh
|
||||
Asabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop
|
||||
\$ npx create-react-app 30-days-of-react
|
||||
```
|
||||
|
||||
```sh
|
||||
Asabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop
|
||||
\$ cd 30-days-of-react/
|
||||
```
|
||||
|
||||
```sh
|
||||
Asabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop/30-days-of-react (master)
|
||||
\$ cd 30-days-of-react
|
||||
```
|
||||
|
||||
```sh
|
||||
Asabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop/30-days-of-react (master)
|
||||
\$ npm start
|
||||
```
|
||||
|
||||
Now your react app should run at localhost 3000. Go to the App.js and modify the content by writing some text, you will see the latest change on the browsers.
|
||||
To stop the running server, press CTR + C
|
||||
|
||||
|
||||
|
||||
## React Boilerplate
|
||||
|
||||
Let's see the React boiler plate which has been created by create-react-app. Whenever you create a new project you run create-react-app and name of the project.
|
||||
|
||||
In the following React boilerplate, there are three folders:node_modules, public and src. In addition, there are .gitignore, README.mde, package.json and yarn.lock. In some of you instead of yarn.lock, you may have package-lock.lock.
|
||||
|
||||
It is good to know these folders and files.
|
||||
|
||||
- node_modules - store all the necessary node packages of the react applications.
|
||||
|
||||
- Public - index.html - the only HTML file we have in the entire application
|
||||
|
||||
- favicon.io - a favicon
|
||||
- manifest.json - is use to make the application a progressive web app
|
||||
- other images- which can be used for open graph image or for other purposes
|
||||
- rotots.txt - information if the website allow web scraping
|
||||
|
||||
- src
|
||||
|
||||
- App.css, index.css - are different CSS files
|
||||
- index.js - a file which allows to connect all the components with index.html
|
||||
- App.js - A file which we import most the presentational components
|
||||
- serviceWorker.js: is used to add progressive web app feature
|
||||
- setupTests.js - to write testing cases
|
||||
|
||||
- package.json- List of packages the applications uses
|
||||
- .gitignore - React boilerplate comes with git initiated, and the .gitingore allow files and folders not to be pushed to GitHub
|
||||
- README.md - Markdown file to write documentation
|
||||
- yarn.lock or package-lock.json - a means to lock the version of the package
|
||||
|
||||
|
||||
|
||||
Now lets remove all the file which we do not need at the moment and leave only the file we need right now.
|
||||
|
||||
After removing most of the file, the structure of the boilerplate looks like this:
|
||||
|
||||
|
||||
|
||||
Now lets write code on index.js. First of we should import React and ReactDOM. React allows us to write JSX and ReactDOM to render the JSX on the DOM. ReactDOM has render method. Let's use all the JSX elements we created on Day 2. The ReactDOM render method takes two parameters a JSX or a component and the root.
|
||||
|
||||
```js
|
||||
//index.js
|
||||
// importing the react and react-dom package
|
||||
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
|
||||
const jsxElement = <h1>This is a JSX element</h1>
|
||||
const rootElement = document.getElementById('root')
|
||||
|
||||
ReactDOM.render(jsxElement, rootElement)
|
||||
```
|
||||
|
||||
```html
|
||||
<!-- index.html -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500|Roboto:300,400,500&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<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>
|
||||
```
|
||||
|
||||
If your application is not running, go to your project folder and run the following command
|
||||
|
||||
```sh
|
||||
Asabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop/30-days-of-react (master)
|
||||
\$ npm start
|
||||
```
|
||||
|
||||
If you do not have any bugs your React app will be launched on the browser.
|
||||
|
||||
|
||||
|
||||
Let's write more JSX elements and render them on the browser. This expression is a JSX element which is made of h2 HTML element.
|
||||
|
||||
```js
|
||||
const title = <h2>Getting Started React</h2>
|
||||
```
|
||||
|
||||
Let's add more content the previous JSX and change the name to header.
|
||||
|
||||
```js
|
||||
const header = (
|
||||
<header>
|
||||
<h1>Welcome to 30 Days Of React</h1>
|
||||
<h2>Getting Started React</h2>
|
||||
<h3>JavaScript Library</h3>
|
||||
</header>
|
||||
)
|
||||
```
|
||||
|
||||
Let's render this to the browser, in order to render we need ReactDOM.
|
||||
|
||||
```js
|
||||
//index.js
|
||||
// importing the react and react-dom package
|
||||
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
|
||||
const header = (
|
||||
<header>
|
||||
<h1>Welcome to 30 Days Of React</h1>
|
||||
<h2>Getting Started React</h2>
|
||||
<h3>JavaScript Library</h3>
|
||||
<p>Asabeneh Yetayeh</p>
|
||||
<small>Oct 2, 2020</small>
|
||||
</header>
|
||||
)
|
||||
const rootElement = document.getElementById('root')
|
||||
|
||||
ReactDOM.render(header, rootElement)
|
||||
```
|
||||
|
||||
|
||||
|
||||
Now, lets add all the JSX we created on Day 2.
|
||||
|
||||
```js
|
||||
//index.js
|
||||
// importing the react and react-dom package
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
|
||||
// JSX element, header
|
||||
const header = (
|
||||
<header>
|
||||
<h1>Welcome to 30 Days Of React</h1>
|
||||
<h2>Getting Started React</h2>
|
||||
<h3>JavaScript Library</h3>
|
||||
<p>Asabeneh Yetayeh</p>
|
||||
<small>Oct 2, 2020</small>
|
||||
</header>
|
||||
)
|
||||
|
||||
// JSX element, main
|
||||
const main = (
|
||||
<main>
|
||||
<p>Prerequisite to get started react.js:</p>
|
||||
<ul>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>JavaScript</li>
|
||||
</ul>
|
||||
</main>
|
||||
)
|
||||
|
||||
// JSX element, footer
|
||||
const footer = (
|
||||
<footer>
|
||||
<p>Copyright 2020</p>
|
||||
</footer>
|
||||
)
|
||||
|
||||
// JSX element, app, a container or a parent
|
||||
const app = (
|
||||
<div>
|
||||
{header}
|
||||
{main}
|
||||
{footer}
|
||||
</div>
|
||||
)
|
||||
|
||||
const rootElement = document.getElementById('root')
|
||||
// we render the JSX element using the ReactDOM package
|
||||
// ReactDOM has the render method and the render method takes two argument
|
||||
ReactDOM.render(app, rootElement)
|
||||
// or
|
||||
// ReactDOM.render([header, main, footer], rootElement)
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Style in JSX
|
||||
|
||||
Let's apply style to the JSX elements. We can style JSX either using inline style, internal or external CSS. Now, let's apply an inline style to each JSX element.
|
||||
|
||||
```js
|
||||
// index.js
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
|
||||
const headerStyles = {
|
||||
backgroundColor: '#61DBFB',
|
||||
fontFamily: 'Helvetica Neue',
|
||||
padding: 25,
|
||||
lineHeight: 1.5,
|
||||
}
|
||||
|
||||
// JSX element, header
|
||||
const header = (
|
||||
<header style={headerStyles}>
|
||||
<div className='header-wrapper'>
|
||||
<h1>Welcome to 30 Days Of React</h1>
|
||||
<h2>Getting Started React</h2>
|
||||
<h3>JavaScript Library</h3>
|
||||
<p>Asabeneh Yetayeh</p>
|
||||
<small>Oct 2, 2020</small>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
|
||||
// JSX element, main
|
||||
const mainStyles = {
|
||||
backgroundColor: '#F3F0F5',
|
||||
}
|
||||
const main = (
|
||||
<main style={mainStyles}>
|
||||
<p>Prerequisite to get started react.js:</p>
|
||||
<ul>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>JavaScript</li>
|
||||
</ul>
|
||||
</main>
|
||||
)
|
||||
|
||||
const footerStyles = {
|
||||
backgroundColor: '#61DBFB',
|
||||
}
|
||||
// JSX element, footer
|
||||
const footer = (
|
||||
<footer style={footerStyles}>
|
||||
<p>Copyright 2020</p>
|
||||
</footer>
|
||||
)
|
||||
|
||||
// JSX element, app
|
||||
const app = (
|
||||
<div className='app'>
|
||||
{header}
|
||||
{main}
|
||||
{footer}
|
||||
</div>
|
||||
)
|
||||
|
||||
const rootElement = document.getElementById('root')
|
||||
// we render the JSX element using the ReactDOM package
|
||||
ReactDOM.render(app, rootElement)
|
||||
```
|
||||
|
||||
|
||||
|
||||
Now, lets apply an internal style, we put all the CSS on the header of the index.css.
|
||||
|
||||
```js
|
||||
// index.js
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
// JSX element, header
|
||||
const header = (
|
||||
<header>
|
||||
<div className='header-wrapper'>
|
||||
<h1>Welcome to 30 Days Of React</h1>
|
||||
<h2>Getting Started React</h2>
|
||||
<h3>JavaScript Library</h3>
|
||||
<p>Instructor: Asabeneh Yetayeh</p>
|
||||
<small>Date: Oct 1, 2020</small>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
|
||||
// JSX element, main
|
||||
const main = (
|
||||
<main>
|
||||
<div className='main-wrapper'>
|
||||
<p>
|
||||
Prerequisite to get started{' '}
|
||||
<strong>
|
||||
<em>react.js</em>
|
||||
</strong>
|
||||
:
|
||||
</p>
|
||||
<ul>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li> JavaScript</li>
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
|
||||
// JSX element, footer
|
||||
const footer = (
|
||||
<footer>
|
||||
<div className='footer-wrapper'>
|
||||
<p>Copyright 2020</p>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
|
||||
// JSX element, app
|
||||
const app = (
|
||||
<div className='app'>
|
||||
{header}
|
||||
{main}
|
||||
{footer}
|
||||
</div>
|
||||
)
|
||||
|
||||
const rootElement = document.getElementById('root')
|
||||
// we render the JSX element using the ReactDOM package
|
||||
ReactDOM.render(app, rootElement)
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Injecting data to JSX elements
|
||||
|
||||
```js
|
||||
// index.js
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
// To get the root element from the HTML document
|
||||
|
||||
// JSX element, header
|
||||
const welcome = 'Welcome to 30 Days Of React'
|
||||
const title = 'Getting Started React'
|
||||
const subtitle = 'JavaScript Library'
|
||||
const author = {
|
||||
firstName: 'Asabeneh',
|
||||
lastName: 'Yetayeh',
|
||||
}
|
||||
const date = 'Oct 2, 2020'
|
||||
|
||||
// JSX element, header
|
||||
const header = (
|
||||
<header>
|
||||
<div className='header-wrapper'>
|
||||
<h1>{welcome}</h1>
|
||||
<h2>{title}</h2>
|
||||
<h3>{subtitle}</h3>
|
||||
<p>
|
||||
Instructor: {author.firstName} {author.lastName}
|
||||
</p>
|
||||
<small>Date: {date}</small>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
|
||||
const numOne = 3
|
||||
const numTwo = 2
|
||||
|
||||
const result = (
|
||||
<p>
|
||||
{numOne} + {numTwo} = {numOne + numTwo}
|
||||
</p>
|
||||
)
|
||||
|
||||
const yearBorn = 1820
|
||||
const currentYear = new Date().getFullYear()
|
||||
const age = currentYear - yearBorn
|
||||
const personAge = (
|
||||
<p>
|
||||
{' '}
|
||||
{author.firstName} {author.lastName} is {age} years old
|
||||
</p>
|
||||
)
|
||||
|
||||
// JSX element, main
|
||||
const techs = ['HTML', 'CSS', 'JavaScript']
|
||||
const techsFormatted = techs.map((tech) => <li>{tech}</li>)
|
||||
|
||||
// JSX element, main
|
||||
const main = (
|
||||
<main>
|
||||
<div className='main-wrapper'>
|
||||
<p>
|
||||
Prerequisite to get started{' '}
|
||||
<strong>
|
||||
<em>react.js</em>
|
||||
</strong>
|
||||
:
|
||||
</p>
|
||||
<ul>{techsFormatted}</ul>
|
||||
{result}
|
||||
{personAge}
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
|
||||
const copyRight = 'Copyright 2020'
|
||||
|
||||
// JSX element, footer
|
||||
const footer = (
|
||||
<footer>
|
||||
<div className='footer-wrapper'>
|
||||
<p>{copyRight}</p>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
|
||||
// JSX element, app
|
||||
const app = (
|
||||
<div className='app'>
|
||||
{header}
|
||||
{main}
|
||||
{footer}
|
||||
</div>
|
||||
)
|
||||
|
||||
const rootElement = document.getElementById('root')
|
||||
// we render the JSX element using the ReactDOM package
|
||||
ReactDOM.render(app, rootElement)
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Importing Media Objects in React
|
||||
|
||||
How do we import images, video and audio in react? Let's see how we import image first.
|
||||
Create images folder in the src folder and save an image. For instance let's save asabeneh.jpg image and let's import this image to index.js
|
||||
|
||||
```js
|
||||
// index.js
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import asabenehImage from './images/asabeneh.jpg'
|
||||
|
||||
const user = (
|
||||
<div>
|
||||
<img src={asabenehImage} alt='asabeneh image' />
|
||||
</div>
|
||||
)
|
||||
|
||||
const rootElement = document.getElementById('root')
|
||||
// we render the JSX element using the ReactDOM package
|
||||
ReactDOM.render(user, rootElement)
|
||||
```
|
||||
|
||||
|
||||
|
||||
The boilerplate code can be found [here](../03/../03_Day_Setting_Up/30-days-of-react_boilerplate)
|
||||
|
||||
# Exercises
|
||||
|
||||
1.Design the following user card.
|
||||
|
||||
|
||||
|
||||
1. Use h1, p, input and button HTML element to create the following design using JSX
|
||||
|
||||
|
||||
|
||||
🎉 CONGRATULATIONS ! 🎉
|
||||
[<< Day 2](../02_Day_Introduction_to_React/02_introduction_to_react.md) | [Day 4 >>]()
|
||||
|
||||
@ -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,100 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500|Roboto:300,400,500&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
|
||||
<title>30 Days Of React App</title>
|
||||
<style>
|
||||
/* == General style === */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
line-height: 1.5;
|
||||
font-family: 'Montserrat';
|
||||
font-weight: 300;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.root {
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-wrapper,
|
||||
.main-wrapper,
|
||||
.footer-wrapper {
|
||||
width: 85%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.header-wrapper,
|
||||
.main-wrapper {
|
||||
padding: 10px;
|
||||
margin: 2px auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 70px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3 {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #61dbfb;
|
||||
padding: 25;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 10px;
|
||||
padding-bottom: 60px;
|
||||
/* Height of the footer */
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
/* Height of the footer */
|
||||
background: #6cf;
|
||||
}
|
||||
|
||||
.footer-wrapper {
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 20 KiB |
@ -0,0 +1,101 @@
|
||||
// index.js
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
// To get the root element from the HTML document
|
||||
import asabenehImage from './images/asabeneh.jpg'
|
||||
// JSX element, header
|
||||
const welcome = 'Welcome to 30 Days Of React'
|
||||
const title = 'Getting Started React'
|
||||
const subtitle = 'JavaScript Library'
|
||||
const author = {
|
||||
firstName: 'Asabeneh',
|
||||
lastName: 'Yetayeh',
|
||||
}
|
||||
const date = 'Oct 2, 2020'
|
||||
|
||||
// JSX element, header
|
||||
const header = (
|
||||
<header>
|
||||
<div className='header-wrapper'>
|
||||
<h1>{welcome}</h1>
|
||||
<h2>{title}</h2>
|
||||
<h3>{subtitle}</h3>
|
||||
<p>
|
||||
Instructor: {author.firstName} {author.lastName}
|
||||
</p>
|
||||
<small>Date: {date}</small>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
|
||||
const numOne = 3
|
||||
const numTwo = 2
|
||||
|
||||
const result = (
|
||||
<p>
|
||||
{numOne} + {numTwo} = {numOne + numTwo}
|
||||
</p>
|
||||
)
|
||||
|
||||
const yearBorn = 1820
|
||||
const currentYear = new Date().getFullYear()
|
||||
const age = currentYear - yearBorn
|
||||
const personAge = (
|
||||
<p>
|
||||
{' '}
|
||||
{author.firstName} {author.lastName} is {age} years old
|
||||
</p>
|
||||
)
|
||||
|
||||
// JSX element, main
|
||||
const techs = ['HTML', 'CSS', 'JavaScript']
|
||||
const techsFormatted = techs.map((tech) => <li>{tech}</li>)
|
||||
|
||||
const user = (
|
||||
<div>
|
||||
<img src={asabenehImage} alt='asabeneh image' />
|
||||
</div>
|
||||
)
|
||||
|
||||
// JSX element, main
|
||||
const main = (
|
||||
<main>
|
||||
<div className='main-wrapper'>
|
||||
<p>
|
||||
Prerequisite to get started{' '}
|
||||
<strong>
|
||||
<em>react.js</em>
|
||||
</strong>
|
||||
:
|
||||
</p>
|
||||
<ul>{techsFormatted}</ul>
|
||||
{result}
|
||||
{personAge}
|
||||
{user}
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
|
||||
const copyRight = 'Copyright 2020'
|
||||
|
||||
// JSX element, footer
|
||||
const footer = (
|
||||
<footer>
|
||||
<div className='footer-wrapper'>
|
||||
<p>{copyRight}</p>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
|
||||
// JSX element, app
|
||||
const app = (
|
||||
<div className='app'>
|
||||
{header}
|
||||
{main}
|
||||
{footer}
|
||||
</div>
|
||||
)
|
||||
|
||||
const rootElement = document.getElementById('root')
|
||||
// we render the JSX element using the ReactDOM package
|
||||
ReactDOM.render(app, rootElement)
|
||||
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 111 KiB After Width: | Height: | Size: 62 KiB |
|
After Width: | Height: | Size: 61 KiB |
|
After Width: | Height: | Size: 58 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 187 KiB After Width: | Height: | Size: 107 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 226 KiB |
|
After Width: | Height: | Size: 73 KiB |
|
After Width: | Height: | Size: 134 KiB |
|
After Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 157 KiB After Width: | Height: | Size: 105 KiB |
|
After Width: | Height: | Size: 331 KiB |
|
After Width: | Height: | Size: 39 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 43 KiB |
|
After Width: | Height: | Size: 309 KiB |
Loading…
Reference in new issue