Manav Goyal

React Js - Javascript

Topics

Basic

  • Components
    • Class based
    • Function based
  • State => Condition at a particular time
  • Props => Details sent to the Component which it can use
    • PropTypes => Puts a check on the type of props sent
    • defaultProps
  • Hooks => Features of Class based components in Function based component => Able to use "states" in other life-cycles methods
    • React
      • useState => Creates the state Variables
      • useEffect => Causes effects like data fetching, subscriptions, manually changing DOM etc.
      • useContext => Used for Context API
      • useRef => Keeps reference to a DOM element
      • useReducer
    • React Router
      • useLocation
      • useHistory
    • Redux
      • useSelector
      • useDispatch
        • Redux Working
  • Component Life Cycle => The series of events that happens from the mounting of a React component to its Unmounting
    • Definitions
      • Mounting => Birth of your Component
      • Update => Growth of your Component
      • Unmounting => Death of your Component
    • Methods
      • constructor()
      • render() => Used to render HTML of the Component, Required for a class based component to render DOM, Runs during Mounting and Updating, Can't modify state inside it
      • componentDidMount() => Runs after component output has been rendered to DOM
      • componentDidUpdate() => Invoked as soon as the updating happens, Mostly used for updating the DOM in response to prop or state changes
      • componentWillUnmount() => Called just before the component is unmounted and destroyed, Usually used to perform cleanups
  • JavaScript Syntax Extension (JSX) => Dynamic markup
    • Structure
      • Returns only 1 JSX element
      • JSX Fragment => <> … </>
      • Tags should always be closed
      • Use JS variables inside { }
    • Replace
      • class => className
      • for => htmlFor
  • Router => Link
    • npm install react-router-dom
    • npm install react-router-dom concurrently => To run more than 1 server
      • In package.json > In scripts => "both": "concurrently \"npm run start\" \"npx nodemon ./backend/index.js\""
      • npm run both => To run Both server
    • Replace
      • a = link
      • href = to
  • Infinite Scroll => Link
    • npm i react-infinite-scroll-component
  • Top Loading Bar => Link
    • npm i react-top-loading-bar
  • React Icons => Link
    • npm install react-icons --save
  • Redux
    • Action => Action that change the state of application
      • Payload
      • Type
    • Reducer => Function which determines how change will take place, Returns new state
    • Store
    • View
  • npm i redux react-redux redux-thunk

Others

Theory

  • React is JS library for building UI, Runs of client as Single page Application (SPA), Can be used to build full stack apps using MERN Stack
  • "React-DOM" is used to render web app in the browser
  • "React-scripts" contains the build commands
  • Model View Controller (MVC) => Popular design pattern for software, Model deals with Data, Controller deals with the requests/routing, View is the UI
  • Structure thr "view" layer of MVC
  • Reusable components with their own state
  • Components return JSX, Components can take "props", Components can have "state" which is an object that determines how a component behaves

VS Code Terminal

  • npx create-react-app appName => To create a new React app
  • npx create-react-app . => To create a new React app in the same folder, Name error might occur
  • npm start => Starts the development server
    • You can open the app on another device connected with the same network using the same localhost address
  • npm run build => Bundles the app into static files for production
  • rs => To Restart

ES7 React/Redux/GraphQL/React-Native snippets

  • imr => Import React
  • impt => Import Prop Types
  • imrs => Import React and Use State
  • rfc => React Functional Component
  • rafc => React Arrow Function Component
  • rcc => React Class Component
  • rce => React Class Export Component
  • rcep => React Class Export Component ith Prop Types
  • ptb => Prop Type Bool
  • pts => Prop Type String
  • ptsr => Prop Type String Required
  • ptn => Prop Type Number
  • defineprops => Snippet for Prop Types and Default Props

Normal Bootstrap

  • Replace
    • Required HTML tags
    • Close all tags
    • href should have some value
  • React Bootstrap

React Hosting

  • First Initialize a Repository
  • npm install --save gh-pages => Install
  • Add this package.json
    • "homepage": "https://manavgoyal111.github.io/my-app",
    • Add this to Scripts
      "predeploy": "npm run build",
"deploy": "gh-pages -d build",
    • npm run deploy => To Deploy
  • Go to Your GitHub Repository > Pages
    • Select Source as gh-pages
    • Write Custom Domain
  • Manage DNS
Share: