I continue pushing forward with the React course by Maximilian Schwarzmuller by O’Reilly via my subscription with ACM Learning.
Today is a nice summer day in the Twin Cities of Minneapolis and St. Paul. The private streets in the neighborhood where I live are being redone. Part of the work is on gutter drainage, some on replacing some of the curbs and finally a fresh double coat of asphalt. Today’s work started shortly after garbage and recycling trucks picked up their corresponding items. After the trucks left, noise and dust were all over the neighborhood. Right now all is quite. Not sure if they are done for the day. The final asphalt will be deposited on Wednesday.
On a separate note, the wife of one of my brothers in law, experienced several
issues COVID-19 related. It seems that in the past week or so, several people in her family have passed away or are in a healthcare facility with COVID-19 symptoms. It seems that they might have gotten together a couple weeks ago for a family event.
# ***** new console in Windows 10 ****
Microsoft Windows [Version 10.0.18363.900]
(c) 2019 Microsoft Corporation. All rights reserved.
# **** workspace in which I wish to develop the code ****
C:\Users\johnc>cd workspace1
# **** this is what we have ****
C:\Users\johnc\workspace1>dir
07/11/2020 10:20 AM <DIR> .
07/11/2020 10:20 AM <DIR> ..
07/08/2020 07:44 AM <DIR> base-syntax
07/01/2020 08:58 AM <DIR> HospitalsHillClimbing
06/22/2020 11:34 AM <DIR> learnangular5
07/09/2020 02:21 PM <DIR> lists-conditionals
07/02/2020 08:48 AM <DIR> react-complete-guide
07/11/2020 10:18 AM <DIR> TheMasseuse
# **** create a React app for this chapter (the name may be different) ****
C:\Users\johnc\workspace1>create-react-app styling-components-elements
Creating a new React app in C:\Users\johnc\workspace1\styling-components-elements.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
> core-js@2.6.11 postinstall C:\Users\johnc\workspace1\styling-components-elements\node_modules\babel-runtime\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@3.6.5 postinstall C:\Users\johnc\workspace1\styling-components-elements\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js-pure@3.6.5 postinstall C:\Users\johnc\workspace1\styling-components-elements\node_modules\core-js-pure
> node -e "try{require('./postinstall')}catch(e){}"
+ react-dom@16.13.1
+ cra-template@1.0.3
+ react@16.13.1
+ react-scripts@3.4.1
added 1602 packages from 751 contributors and audited 1606 packages in 190.826s
62 packages are looking for funding
run `npm fund` for details
found 1 low severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
Initialized a git repository.
Installing template dependencies using npm...
npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\jest-haste-map\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ @testing-library/user-event@7.2.1
+ @testing-library/jest-dom@4.2.4
+ @testing-library/react@9.5.0
added 36 packages from 57 contributors and audited 1642 packages in 13.638s
62 packages are looking for funding
run `npm fund` for details
found 1 low severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
Removing template package using npm...
npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\jest-haste-map\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
removed 1 package and audited 1641 packages in 5.222s
62 packages are looking for funding
run `npm fund` for details
found 1 low severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
Created git commit.
Success! Created styling-components-elements at C:\Users\johnc\workspace1\styling-components-elements
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd styling-components-elements
npm start
Happy hacking!
# **** check the contents of workspace1 ********
C:\Users\johnc\workspace1>dir
07/15/2020 07:11 AM <DIR> .
07/15/2020 07:11 AM <DIR> ..
07/08/2020 07:44 AM <DIR> base-syntax
07/01/2020 08:58 AM <DIR> HospitalsHillClimbing
06/22/2020 11:34 AM <DIR> learnangular5
07/09/2020 02:21 PM <DIR> lists-conditionals
07/02/2020 08:48 AM <DIR> react-complete-guide
07/15/2020 07:15 AM <DIR> styling-components-elements
07/11/2020 10:18 AM <DIR> TheMasseuse
# **** move to the new folder ****
C:\Users\johnc\workspace1>cd styling-components-elements
# **** open a web browser (in my case Chrome)
# and start the new React app ****
C:\Users\johnc\workspace1\styling-components-elements>npm start
> styling-components-elements@0.1.0 start C:\Users\johnc\workspace1\styling-components-elements
> react-scripts start
i ｢wds｣: Project is running at http://192.168.1.138/
i ｢wds｣: webpack output is served from
i ｢wds｣: Content not from webpack is served from C:\Users\johnc\workspace1\styling-components-elements\public
i ｢wds｣: 404s will fallback to /
Starting the development server...
Compiled successfully!
You can now view styling-components-elements in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.1.138:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
# **** after the default React app comes up
# entered control-c to stop the server ****
Terminate batch job (Y/N)?
# **** server has stopped ****
C:\Users\johnc\workspace1\styling-components-elements>
What I have been doing is creating a new React application at the start of each chapter.
After that I have been shadowing and testing what the instructor does. On occasion’s thing did not work as expected. Had to debug or divert due to different versions of JavaScript modules. Experimenting and looking for solutions have helped me better understand JavaScript and React.
import React, { Component } from 'react';
// **** import all classes in App.css ****
import classes from './App.css';
import Person from './Person/Person';
// **** ****
class App extends Component {
state = {
persons: [
{ id: 'asfa1', name: 'Max', age: 28 },
{ id: 'vasdf1', name: 'Manu', age: 29 },
{ id: 'asdf11', name: 'Stephanie', age: 26 }
],
otherState: 'some other value',
showPersons: false
}
nameChangedHandler = ( event, id ) => {
const personIndex = this.state.persons.findIndex(p => {
return p.id === id;
});
const person = {
...this.state.persons[personIndex]
};
// const person = Object.assign({}, this.state.persons[personIndex]);
person.name = event.target.value;
const persons = [...this.state.persons];
persons[personIndex] = person;
this.setState( {persons: persons} );
}
deletePersonHandler = (personIndex) => {
// const persons = this.state.persons.slice();
const persons = [...this.state.persons];
persons.splice(personIndex, 1);
this.setState({persons: persons});
}
togglePersonsHandler = () => {
const doesShow = this.state.showPersons;
this.setState( { showPersons: !doesShow } );
}
// **** ****
render () {
let persons = null;
let btnClass = '';
if ( this.state.showPersons ) {
persons = (
<div>
{this.state.persons.map((person, index) => {
return <Person
click={() => this.deletePersonHandler(index)}
name={person.name}
age={person.age}
key={person.id}
changed={(event) => this.nameChangedHandler(event, person.id)} />
})}
</div>
);
btnClass = classes.Red;
}
// **** must define classes in App.css ****
const assignedClasses = [];
if (this.state.persons.length <= 2) {
assignedClasses.push(classes.red); // classes = ['red']
}
if (this.state.persons.length <= 1) {
assignedClasses.push(classes.bold); // classes = ['red', 'bold']
}
if (this.state.persons.length <= 0) {
assignedClasses.push(classes.underline); // classes = ['red', 'bold', 'underline']
}
// ???? ????
console.log("persons: " + persons);
// **** ****
return (
<div className={classes.App}>
<h1>Hi, I'm a React App</h1>
<p className={assignedClasses.join(' ')}>This is really working!</p>
<button className={btnClass} onClick={this.togglePersonsHandler}>
Toggle Persons
</button>
{persons}
</div>
);
// return React.createElement('div', {className: 'App'}, React.createElement('h1', null, 'Does this work now?'));
}
}
// **** ****
export default App;
When done with this chapter the App.js file was working fine and as expected.
.App {
text-align: center;
}
.red {
color: red;
}
.bold {
font-weight: bold;
}
.underline {
text-decoration: underline;
}
.App button {
background-color: green;
color: white;
font: inherit;
border: 1px solid blue;
padding: 8px;
cursor: pointer;
}
.App button:hover {
background-color: lightgreen;
color: black;
}
.App button.Red {
background-color: red;
}
.App button.Red:hover {
background-color: salmon;
}
The App.css file was being used by the App.js file. For that it had to be included as a header file.
import React from 'react';
// import styled from 'styled-components';
import classes from './Person.css';
// **** ****
const person = ( props ) => {
return (
<div className={classes.Person}>
<p onClick={props.click}>I'm {props.name} and I am {props.age} years old!</p>
<p>{props.children}</p>
<input type="text" onChange={props.changed} value={props.name} />
</div>
)
};
// **** ****
export default person;
The Person.js file had been simplified. It uses the Person.css file to provide styles.
.Person {
width: 60%;
margin: 16px auto;
border: 1px solid #eee;
box-shadow: 0 2px 3px #ccc;
padding: 16px;
text-align: center;
}
@media (min-width: 500px) {
.Person {
width: 450px;
}
}
The Person.css file contains styles for elements in the Person.js file.
I understand that just jumping in into a set of files without the complete explanation provided by the instructor is not easy. That said; the recommendation from the instructor is to always keep styling in a separate file from the JavaScript code. I always think about UNIX. Each command does one and only one thing. You can always pipe the output of a command into another to implement the result sought.
Once the code was completed I created a repository in GitHub and added the code from the React application.
# **** ****
Microsoft Windows [Version 10.0.18363.959]
(c) 2019 Microsoft Corporation. All rights reserved.
# **** ****
C:\Users\johnc>cd workspace1
# **** ****
C:\Users\johnc\workspace1>dir
07/21/2020 11:06 AM <DIR> .
07/21/2020 11:06 AM <DIR> ..
07/08/2020 07:44 AM <DIR> base-syntax
07/27/2020 08:50 AM <DIR> Combinations
07/01/2020 08:58 AM <DIR> HospitalsHillClimbing
07/23/2020 10:15 AM <DIR> KittysCalculations
06/22/2020 11:34 AM <DIR> learnangular5
07/09/2020 02:21 PM <DIR> lists-conditionals
07/02/2020 08:48 AM <DIR> react-complete-guide
07/22/2020 08:03 AM <DIR> styling-components-elements
07/11/2020 10:18 AM <DIR> TheMasseuse
07/22/2020 04:36 PM <DIR> TreePreorderTraversal
# **** ****
C:\Users\johnc\workspace1>cd styling-components-elements
# **** ****
C:\Users\johnc\workspace1\styling-components-elements>dir
07/22/2020 08:03 AM <DIR> .
07/22/2020 08:03 AM <DIR> ..
07/22/2020 07:59 AM 59 .gitignore
07/15/2020 08:10 AM <DIR> .vscode
07/22/2020 08:01 AM <DIR> config
10/19/2017 10:31 AM 374 how-to-use.txt
07/22/2020 08:01 AM <DIR> node_modules
07/22/2020 08:01 AM 364,821 package-lock.json
07/22/2020 08:01 AM 2,648 package.json
07/15/2020 08:08 AM <DIR> public
10/19/2017 10:29 AM 105,919 README.md
07/22/2020 08:01 AM <DIR> scripts
07/15/2020 08:08 AM <DIR> src
# **** ****
C:\Users\johnc\workspace1\styling-components-elements>type .gitignore
# **** ignore the node_modules folder ****
/node_modules/*
# **** ****
C:\Users\johnc\workspace1\styling-components-elements>git status
On branch master
Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git restore <file>..." to discard changes in working directory)
modified: config/webpack.config.dev.js
modified: config/webpack.config.prod.js
modified: src/App.css
modified: src/App.js
modified: src/Person/Person.js
no changes added to commit (use "git add" and/or "git commit -a")
# **** ****
C:\Users\johnc\workspace1\styling-components-elements>git add .
warning: LF will be replaced by CRLF in config/webpack.config.dev.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in config/webpack.config.prod.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/App.css.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/App.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/Person/Person.js.
The file will have its original line endings in your working directory
# **** ****
C:\Users\johnc\workspace1\styling-components-elements>git status
On branch master
Changes to be committed:
(use "git restore --staged <file>..." to unstage)
modified: config/webpack.config.dev.js
modified: config/webpack.config.prod.js
modified: src/App.css
modified: src/App.js
modified: src/Person/Person.js
# **** ****
C:\Users\johnc\workspace1\styling-components-elements>git commit -m "done with this chapter"
[master e5b0925] done with this chapter
5 files changed, 46 insertions(+), 88 deletions(-)
rewrite src/Person/Person.js (63%)
# **** ****
C:\Users\johnc\workspace1\styling-components-elements>git status
On branch master
nothing to commit, working tree clean
# **** ****
C:\Users\johnc\workspace1\styling-components-elements>git remote -v
# **** ****
C:\Users\johnc\workspace1\styling-components-elements>git remote add origin https://github.com/JohnCanessa/styling-components-elements.git
C:\Users\johnc\workspace1\styling-components-elements>git remote -v
origin https://github.com/JohnCanessa/styling-components-elements.git (fetch)
origin https://github.com/JohnCanessa/styling-components-elements.git (push)
# **** ****
C:\Users\johnc\workspace1\styling-components-elements>git push origin master
Enumerating objects: 47, done.
Counting objects: 100% (47/47), done.
Delta compression using up to 12 threads
Compressing objects: 100% (45/45), done.
Writing objects: 100% (47/47), 137.75 KiB | 7.65 MiB/s, done.
Total 47 (delta 7), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (7/7), done.
To https://github.com/JohnCanessa/styling-components-elements.git
* [new branch] master -> master
# **** ****
C:\Users\johnc\workspace1\styling-components-elements>git status
On branch master
nothing to commit, working tree clean
# **** ****
C:\Users\johnc\workspace1\styling-components-elements>git log
commit e5b0925f02b8c44a04a37a6a8ccba36ec3297f81 (HEAD -> master, origin/master)
Author: JohnCanessa <john.canessa@gmail.com>
Date: Mon Jul 27 11:22:19 2020 -0500
done with this chapter
commit 7fbb5e168401968d9ed1849112589723124c4046
Author: JohnCanessa <john.canessa@gmail.com>
Date: Wed Jul 22 08:04:41 2020 -0500
removed styled components from App.js
The entire code for this project can be found in my GitHub repository.
If you have comments or questions regarding this, or any other post in this blog, or if you would like for me to serve of assistance with any phase in the SDLC (Software Development Life Cycle) of a project associated with a product or service, please do not hesitate and leave me a note below. If you prefer, send me a private message using the following address: john.canessa@gmail.com. I will reply as soon as possible.
Keep on reading and experimenting. It is the best way to learn, become proficient, refresh your knowledge and enhance your developer toolset!
One last thing, many thanks to all 1,495 subscribers to my blog!!!
Keep safe during the COVID-19 pandemic and help restart the world economy.
John
Twitter: @john_canessa