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