Week 10&11 Notes related to React video instructionThe Codevolution YouTube channel is here: https://github.com/gopinav

I have downloaded and unzipped it to the hard drive on my home pc (W10).You may choose to save and unzip it wherever you choose as well as using different folder names than I chose to use.

Below, I open the command prompt and issue cd commands (change directory) until the prompt reflects that I am in the desired folder.

In the Command Prompt window, locate the folder containing the project you want to work with.

Then issue the ‘npm install’ command followed by the ‘npm start’ command.

The files needed to launch will be located and the app will launch in port 3000 of the local computer.

----------------------------- Chapter 3 Folder Structure --------------------------

React uses SPAs. Index.html will be served to the user’s browser.The views will change as the content gets modified by js files in the project.Typically, no edits/changes are required in the body of index.htmlThe js project files will “inject” code into the root div.The React app controls the UI in this way.

The src (source) folder is where developers spend most of their time.index.js is the first code to execute.

The root component. App.js is identified as well as the Dom component, the root div.The app component is rendered inside the root DOM node.

App.js is responsible for what is displayed in the browser.

----------------------------- Chapter 4 Components --------------------------

At its simplest, a component is the code inside a .js file

This ‘Hello world” app uses a class component. The App class has a render method which returns some HTML. A future chapter (6) will delve into class components in more detail.

--------------------------------- Chapter 5 Functional Components -----------------------------

In the video, we can see which folders and files are being used.In this example it is Greet.js in the components folder (which is in the src folder etc…)On your computer, inside the files and folder you downloaded from GIT, find these files as they are presented in the tutorials.

React Fundamentals\components-demo\src\components\Greet.js

Note 1: The function on lines 3 – 6 has been commented out and replaced with an arrow function on lines 7 – 16.Note 2: Greet that on line 18 is exported; additionally, we need to import it into App.jsSee line 4 below.

------------------- Chapter 6 Class Components ----------------------------

https://www.youtube.com/watch?v=lnV34uLEzis

State: Some information which is private to that component and which describes the UI.

Line 1: Import those 2 componentsLine 3: Declare a class which extends ComponentLine 4: It must include a render method whichLine 5: returns some HTML (or null)Line 9: Export the class to “connect” it with the app

In App.jsLine 5: We import WelcomeLine 11: We include it within our render method.

We have looked at 3 JS files: App.js, Greet.js and Welcome.jsAll have returned some HTML which goes by the name JSXIn future chapter we will investigate JSX

-------------------------------------- Chapter 7 Hooks------------------------------------------------

------------------------------ Chapter 8 JSX ------------------------------------

Reminder: the source files for these videos is hosted on Github.Here’s a screenshot from my computer after downloading and unzipping it.The recent chapters have focused on files in the ‘components’ folder.

Below, using JSX (commented out from earlier example) is compared with using the javascript createElement method. As we can see, JSX is much simpler syntax (like HTML).

“Syntactic Sugar”

Note: When using React we replace ‘class’ with ‘className’

------------------------------- END ---------------------------------------

npm start follows npm build and runs the app in the development mode.It will open http://localhost:3000 to view it in the browser.

The page will refresh automatically without the need to reload if you make edits to App.js

A not uncommon error one encounters when using React:‘react-scripts' is not recognized as an internal or external command, operable program or batch file…

It is not enough to run npm start. You need to run npm install to get the dependencies to your machine first. This is not unique to Create React App—it’s just how JS apps generally work in Node/npm ecosystem.

package.json specifies the dependencies but doesn’t actually include the source code for them (sometimes they’re pretty large). So you need to run npm install in the project folder after cloning. After that, other commands will work too.-Source: https://github.com/facebook/create-react-app/issues/1627