Super important Per Chris Hawkes but the best way to learn JavaScript code. Pretty low level but build template engine. Create a project using elements. Create your own html elements with JavaScript. Add them to the Dom remove them from the Dom. Attributes. Then JavaScript events, creating and triggering, adding removing. React does this better than everybody else. File API for reading uploading. Need to understand the low level stuff. Framework exist because JavaScript itself is very difficult to work with at the lower level.
Also make sure Js. is in an external file so you have the ability to debug. Go to the sources tab in your developer tools. Add two break points on the line items. And hit the play button.
————-
Opening chrome developer tools. Right click and select inspect element or hit (Ctrl+shift+i). The second tab ( to the right of Elements) is the console. The console is a command line for the browser where you can write monitor and manage JavaScript on the fly. To go to a new line hold down shift and hit return. Instead of alert boxes you can you console.log and hit return. The console is the JavaScript playground.
Add JavaScript inline or do a separate file.
Inline uses dedicated html tag called script. Want JS to run before the page loads then add to the head. If you want it to run after then add after the body. Browser renders page from the top down.
Reference a new file called script.js then go <script src=”file”></script> this typically is added after the body tag so it doesn’t cause render blocking. Now with HTTP2 you can still add it to the head you just need to add defer after the file name.
JS is case sensitive. Use camelCase. Variables start lowercase letter, objects and classes start with uppercase letter and constants are all-caps.
JS doesn’t care about white space but we humans should.
End each statement with a semicolon even though JS doesn’t require it.
Use comments liberally. Single line comments use two foreword slashes // and a multi line comment begins with /* and ends with */ (just like CSS)
REACT:
React helps visualize data. React is declarative instead of imperative. Uses State and props. React developer tools as a browser extension.
In react essentially creating your own custom HTML elements and props are like attributes but you’re not limited to the attributes like id href src. Use props to give any attribute to any component.
When you drop the div out and just keep the <></> it’s called a react fragment.
JSX is a syntax extension to JavaScript. In JSX and want to include JS use curly brackets. JSX is an easier way to create elements.
Learn more about .useState and useEffect.
What are React Events?
You use className because class is a reserved class name.
Localstorage.getItem or .setItem
From learn webcode ten days of react: why react? The Dom is slow and there are issues with Dom local storage on page reload. The Dom approach has fragmented code and elements and it can be tough to mentally keep track of and babysit where different things are. The render-based approach or declarative approach is great but upon changes it renders the ENTIRE APP. React attempts to be he best of both worlds and is closer to the render-based approach. React is beautifully simple.
The browsers ability to work with raw JS data is blazingly fast.
Note: a smarter way to learn .com
/J’s/8.html #s on the top are PNG files. Cannot use on mobile.
I understand the importance of objects and even how constructure functions can make them easier to create. But how do you upload and store objects would imagine they live in a database preferably accessible via API but how do you get there?