Shawn-Armstrong/#Reactjs_general_notes.md

## #Reactjs_general_notes.md

      
    Raw
  

              #Reactjs_general_notes.md
            
          
#Reactjs_general_notes.md 

Overview / Supplementary notes


This document contains notes that I've identified to be critical points within Maximillian's React.js course.
The notes are organized numerically by module.
Course resources can be referenced in the official repository.

Each module has it's own branch; access it with the following :
shawn@shawn-VirtualBox:~/Desktop/react-complete-guide-code$ git fetch origin # Grabs latest version of remote branches 
shawn@shawn-VirtualBox:~/Desktop/react-complete-guide-code$ git branch -v -a  # Displays all branches
shawn@shawn-VirtualBox:~/Desktop/react-complete-guide-code$ git switch -c <CHOOSE NAME> <REMOTE BRANCH YOU WANT> # Instantiates local copy of a remote branch


Module 03 Notes


This website contains the boilerplate React project and instructions for usage.
The React framework is made up of two dependencies; namely, react and react-dom.
File index.js within a standard React project will typically serve as the entry point of the program.
const root = ReactDOM.createRoot(document.getElementById('root') is typically performed within index.js and is providing the program instructions on where to render the React logic within the index.html.
App.js is a common file within React projects and will typically contain the meat-bones of the user-interface.
JSX stands for JavaScript XML; JSX allows us to write HTML in React.
A React project is built around the concept of components which utilizes a declarative approach of defining useful code that can be easily reused.

Essentially, declarative approach means stating what you want without needing to specify how it's done.


Directory components is a common directory within React projects that contain all components used within the program.
React components are defined in their own .js file; a standard convention is to capitalize the first letter of the file and use camel case.
A component within React is just a Javascript function.
Visual Studio Code shortcut ctrl+shift+i will reformat whitespace.
A React component must return a single JSX element/tag; multiple tags can be wrapped in that single element.
Components that utilize CSS will typically have a counterpart file that shares the same name but with a css file extension within the component directory.
You can execute JavaScript expressions / variables within JSX using interpolation such as <div>1+1={1+1}<div> which will render 1+1=2.
Objects must be converted to string if using within JSX via interpolation.
Components can be customized in a dynamic manner by using props.


Essentially, App.js will contain or fetch data that can be passed to a component via titles and attributes.


Inside the component instant within App.js a title is made then an attribute is assigned to the title.


The component receives the attributes as a single argument within its related .js file.


The component can access individual attributes using the argument suffixed with the desired title.


Example:
// App.js
function App() {
  const dataSets = [{attr1: 1, attr2: 99}];
  return <componentItem title1={dataSets[0].attr1}, title2={dataSets[0].attr2}></componentItem>;
}
// ComponentItem.js
function ComponentItem(props) {
  return <div>{props.title1} {props.title2}<div>
}


Components can be nested into each other.
props.children is a reserved keyword that always exists within a component instance; it enables you to render content nested within a custom component.
It is good practice to organized related component files into a single subdirectory within the components directory.

Remember to correct the path for import statements.


Module 04


Essentially, this module focuses on making our React projects non-static by making them interactive and reactive.
JSX tags have event listeners and can execute some JavaScript code on actions

Example:
<button onClick={ () => {console.log('Clicked!')} }

Functions not defined inline should be named and suffixed with the word handler


Essentially, on execution of a React project, the component tree is rendered once. If a value within a component laters changes we must use a special React resource to have the component re-rendered. This resource is located in the React library and is called useState.

Example
const someComponent = (props) => {
  const [newAttribute, setAttr] = useState(props.attr);
  const clickHandler = () => { setAttr('This is the new value.'); };
  return (
   <div>
     {props.attr}
     <button onClick={clickHandler}>Change Attribute</button>
   </div>
  );
}


Lecture 55 talks about using multiple useState() statements within a single component to deal with rendering the most up-to-date information. He walks about a couple of techniques to avoid scheduling conflicts and hints that multiple, single use cases is better.
Lecture 56 demonstrates on how to submit form overriding default behavior and handling the request using JavaScript.

Essentially, he uses JavaScript to pull all of the attributes into a single object.
Clearly it'll be used later for sending an HTTP request to a server.


Child-to-parent communications, lesson 58

Useful for sending data to a parent component that was curated within a child.
Essentially, the child component is given a prop whose attribute is a function that lives in the parent. When the child invokes the function the parent is able to replicate anything within the child's scope.


Module 05 Notes


This module focuses on rendering content dynamically and using conditional statements.
Lecture 63 he takes an array of data and renders a component for each item within the array using map; pretty nifty.
Lecture 65, he demonstrates using the key title within props.

This is useful when dynamically displaying data; it enables React to more accurately identify where to make changes which preserve performance and state.


Lecture 66, he demonstrates multiple ways to structure conditional rendering. The last one using the if syntax appears to be the most lean / organized.

Module 06 Notes


This module focuses on styling techniques, setting up styling scopes, CSS modules and Style Components resources.


The experimental project used in these examples is a simplified goals list


Lecture 74 gives a simplified example of setting the css properties dynamically based on invalid input.


If user submits an empty goal change the styling to red with an error message


Essentially, he inspect the length of the entered text then uses this value within a conditional inside the JSX styling tag.
Code example

  return (
    <form onSubmit={formSubmitHandler}>
      <div className="form-control">
        <label style={{ color: !isValid ? 'red' : 'black' }}>Course Goal</label>
        <input
          style={{
            borderColor: !isValid ? 'red' : '#ccc',
            background: !isValid ? 'salmon' : 'transparent'
          }}
          type="text"
          onChange={goalInputChangeHandler}
        />
      </div>
      <Button type="submit">Add Goal</Button>
    </form>
  );


Inline CSS has a higher priority than CSS files.


Lecture 75 demonstrates how you can use a special JSX syntax to inject variable values inside a JSX tag property. This allows us to consistently use .css files instead of inline css for dynamic styling.
 Code Example

  return (
    <form onSubmit={formSubmitHandler}>
      <div className={`form-control ${!isValid ? 'invalid' : ''}`}>
        <label>Course Goal</label>
        <input type='text' onChange={goalInputChangeHandler} />
      </div>
      <Button type='submit'>Add Goal</Button>
    </form>
  );
 

Lecture 76 demonstrates the usage of styled-components library.

Essentially, we're able to move our CSS logic into .js files and the library will produce standard JSX components using this logic with guaranteed unique selectors to prevent potential scoping issues in larger projects.


Module 07 Notes


This module focuses on debugging React apps.
A lot of this was rather common sense to me; you can debug react problems with error messages as well as using Google chrome's inspect tool.

Module 08 Notes


This module reinforces concepts already taught in an experimental app.

Module 09 Notes


This module introduces resources that keep the DOM organized.
React Fragments are used to satisfy the JSX requirement that only a single element should be returned without polluting the DOM with unnecessary HTML elements.
Portals are used to reposition elements within a DOM; this is done to help enforce logical and semantically correct DOM.
Refs can create an object that is a replication of data within another element with a DOM. These in a certain sense can be used to read / write data and can be used as an alternative to state for input purposes.

Module 10 Notes


This module essentially introduced more hooks; namely, useEffect, useReducer and useContext. These hooks are design to make it more convenient to handle more complex logic related to state change and props.
UseEffect() main purpose was to control the flow of logic and restrict or otherwise delegate when certain lines of code should be executed during the re-rendering of a component.
useReducer() essentially was designed to better manage more complex state designs; specifically, when states are loosely related or contingent on each other.
useContext() is an alternative for props designed to be used when there are a large number of intermediary components in between the component containing the desired data and its destination. It's bene

This hook isn't designed for high frequency changes; state that changes frequently.
Props should still be used so that components can be versatile and service a wide variety of outcomes.