Skip to content

Latest commit

 

History

History
185 lines (140 loc) · 5.14 KB

README.md

File metadata and controls

185 lines (140 loc) · 5.14 KB

React JS Notes

Started learning on 19th December 2021 from this.

Introduction

  • React is a JavaScript library for building user interfaces.
  • Developed by Facebook in 2011
  • Some of React's competitors: Angular, Vue, Svelte
  • React is all about components.
  • Components are independent chunks of user interface.
  • Components can be as small as one HTML element.
  • The benefit of the components is that you can bunch of independent, isolated and most importantly reusable user-interfaces.
  • In the app, you can have as many components as you want.
  • All apps will have at least one component - Root component.

Goals

  • Comfortable with React
  • Applying theory
  • Build your projects

Course Structure

  • Dev Environment
  • Tutorial
  • Projects
  • Redux

Requirements

  • HTML
  • CSS
  • JavaScript [ES6]
  • Coding Addict - Javascript Nuggets

Dev Environment

  • NodeJS
  • node --version, minimum 5.2.0 npx
  • Browser = Chrome
  • Text Editor = Visual Studio Code
  • React Developer Tools

Basic Terminal Commands

  • pwd - Present Working Directory
  • ls - List of files present in a directory
  • mkdir - Creates a directory
  • cd - Change directory
  • cd .. - Navigate one level up
  • clear - Clears out the console
  • Arrow UP/Down - Previous commands

NPM

  • npm init - creates package.json (manifest) file which has a list of dependencies
  • npm install <pacakgename> --save - Install pacakge locally and add to package.json
  • npm install <pacakgename> -g - Install package globally and access it anywhere.
  • npm install <pacakgename> --save-dev - Use it only in development environment

Create React App

  • Technically, you don't need to use create-react-app to work with React.
  • You can build the whole setup yourself.
  • In the long run, create-react-app will save a bunch of time.
  • Under the hood, create-react-app uses babel and webpack.
  • A babel is a JS transpiler that converts the newest JS into the good old JS.
  • It will kind of ensure that our app runs on older browsers as well.
  • Webpack does a lot of other things as well.
  • Essentially, webpack works as a module bundler.
  • The main features of webpack would be bundling resources, watching for changes and running babel transpiler.
  • To create a new React app, use npx create-react-app <appname>

Folder Structure

  • node_modules - contains all the dependencies needed for the project
  • public - contains the files that will be rendered on the browser
  • src - contains the App.js and other components?

Setting up the 1st component

  • Removed the default boiler plate stuff from src
  • Creating an empty index.js.
  • Component names should be capitalized.
  • In the index.js, I will add the following content.
import React from "react";
import ReactDom from "react-dom";

function Greeting() {
    return <h4>This is Kamal and this is my first component</h4>;
}

ReactDom.render(<Greeting />, document.getElementById("root"));
  • All components must be closed. For example, Either like<Greeting/> or like this <Greeting></Greeting>.
  • Stateless functional components will always JSX

JSX Rules

  • Return single element
  • div / section / article / fragment
  • fragment looks like this: <> ... </>, ... represent content.
  • use camelCase for html attribute
  • className instead of class
  • close every element
  • formatting

Note:

  • You can have only one default export per file.

Advanced React

  • useState
  • useEffect
  • Conditional Rendering
  • Forms
  • useRef
  • useReducer
  • Prop Drilling
  • Context API / useContex

useState

  • hooks will start with use
  • components that will be used in these hooks must start with a capital letter and should be in capital case.
  • Hooks can be called only inside of the body of a function component.
  • You cannot call the hook conditionally. (i.e. based on some condition)

useEffect

  • runs after every re-render
  • cleanup function
  • second parameter
  • If you add a empty list [] as the second argument to the useEffect hook, then that is executed only in the initial render.
  • there is no limit on the number of useEffect hooks in a given file.
  • Clean up functions will be added as a return statement in this hook.
  • useEffect cannot be asynchronous.
  • i.e. you can not use async and await here.

useRef

  • useRef works a lot like useState
  • of course there are some differences
  • as for the similiarties:
    • it also preserves the values in between the render
  • unlike useState, useRef does not trigger re-render.
  • it targets, DOM nodes/ elements

useReducer

  • it is used when you have a more complicated setup
  • for simple to do app, it wont be needed, but for complex apsps, then yes, it is recommended to use.
const [state, dispatch] = useReducer(reducer)
  • reducer is a function
const reducer = (state, action) =>  { return state;}
  • always return some kind of state in the reducer function.