{"id":292,"date":"2023-08-03T18:54:04","date_gmt":"2023-08-03T17:54:04","guid":{"rendered":"https:\/\/bobtimetech.net\/?page_id=292"},"modified":"2025-05-15T10:59:34","modified_gmt":"2025-05-15T14:59:34","slug":"react-dropzone-axios","status":"publish","type":"page","link":"https:\/\/bobtimetech.net\/index.php\/my-account\/react-dropzone-axios\/","title":{"rendered":"React \/ Dropzone \/ Axios"},"content":{"rendered":"\n
\n
\n
\n
\"image<\/a><\/div>\n\n\n

The Devil is in the details.<\/em><\/h2>\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/div>\n\n\n
\n\t\t\tHome<\/a>\n\t\t<\/span>\u00bb<\/span>\n\t\t\tReact \/ Dropzone \/ Axios\n\t\t<\/span><\/div>\n\n\n

Install React<\/strong><\/p>\n\n\n\n

\n

React:<\/h3>\n\n\n\n

What is React?<\/strong> React is a JavaScript library for building user interfaces. It was developed by Facebook and is widely used for building single-page applications where the UI needs to be responsive and dynamic. React allows developers to create reusable UI components, making it easier to manage and update complex user interfaces.<\/p>\n\n\n\n

\n\n\n\n

Key Concepts in React:<\/strong><\/p>\n\n\n\n

    \n
  1. Components:<\/strong> React applications are built using components, which are self-contained, reusable pieces of code responsible for rendering a part of the UI.<\/li>\n\n\n\n
  2. Virtual DOM:<\/strong> React uses a virtual DOM to improve performance by updating only the parts of the actual DOM that have changed.<\/li>\n<\/ol>\n<\/div><\/div>\n\n\n\n
    \n\n\n\n

    Run npx create-react-app <projectName><\/p>\n\n\n\n

    Run cd <projectName><\/p>\n\n\n\n

    Run npm start<\/p>\n\n\n\n

        Starts the development server.<\/p>\n\n\n\n

    Integrated Terminal CTRL+C and Y to confirm to stop app<\/p>\n\n\n\n

      npm run build<\/p>\n\n\n\n

        Bundles the app into static files for production.<\/p>\n\n\n\n

      npm test<\/p>\n\n\n\n

        Starts the test runner.<\/p>\n\n\n\n

      npm run eject<\/p>\n\n\n\n

        Removes this tool and copies build dependencies, configuration files<\/p>\n\n\n\n

    \u00a0\u00a0\u00a0 and scripts into the app directory. If you do this, you can\u2019t go back!<\/p>\n\n\n\n

    npm start to run<\/p>\n\n\n\n

    \n\n\n\n

    NPX update Commands<\/strong><\/p>\n\n\n\n

    npx browserslist@latest –update-db<\/p>\n\n\n\n

    npx create-react-app \u201c.\/\u201d for current file or \u201c\/namefile\u201d<\/p>\n\n\n\n

    Install React Router using command:<\/p>\n\n\n\n

    npm install react-router-dom@latest<\/p>\n\n\n\n

    To start a new Create React App project with TypeScript<\/a>, you can run:<\/p>\n\n\n\n

    npx create-react-app my-app –template typescript<\/p>\n\n\n\n

    To add TypeScript<\/a> to an existing Create React App project, first install it:<\/p>\n\n\n\n

    npm install –save typescript @types\/node @types\/react @types\/react-dom @types\/jest<\/p>\n\n\n\n

    \n\n\n\n

    Bootstrap<\/strong><\/p>\n\n\n\n

    https:\/\/getbootstrap.com\/<\/a> > Read the Docs<\/p>\n\n\n\n

    https:\/\/getbootstrap.com\/docs\/5.3\/getting-started\/introduction\/<\/a><\/p>\n\n\n\n

    include Bootstraps CSS and JS<\/strong><\/p>\n\n\n\n

    \n
    <!doctype html>\n\n<html lang=\"en\">\n\n\u00a0 <head>\n\n\u00a0\u00a0\u00a0 <meta charset=\"utf-8\">\n\n\u00a0\u00a0\u00a0 <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n\u00a0\u00a0\u00a0 <title>Bootstrap demo<\/title>\n\n\u00a0\u00a0\u00a0 <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.2\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV\/Dwwykc2MPK8M2HN\" crossorigin=\"anonymous\">\n\n\u00a0 <\/head>\n\n\u00a0 <body>\n\n\u00a0\u00a0\u00a0 <h1>Hello, world!<\/h1>\n\n\u00a0\u00a0\u00a0 <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.2\/dist\/js\/bootstrap.bundle.min.js\" integrity=\"sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN\/o0jlpcV8Qyq46cDfL\" crossorigin=\"anonymous\"><\/script>\n\n\u00a0 <\/body>\n\n<\/html><\/code><\/pre>\n<\/div><\/div>\n\n\n\n
    \n\n\n\n
    <\/div>\n\n\n\n
    React Hooks<\/u><\/strong><\/p>\n\n\n\n
    useState<\/strong> -takes an  initial value and returns a state variable and a method for updating that variable.<\/p>\n\n\n\n
    useEffect <\/strong>-adds ability to perform side effects from a function. Lets you call a function when lifecycle events happen<\/p>\n\n\n\n
    Rules of Hooks<\/u><\/strong><\/p>\n\n\n\n
    Must be called at the top level (not inside loops, conditions, or nested functions).<\/p>\n\n\n\n
    Only be called from function components.<\/p>\n\n\n\n
    Hooks start with \u201cuse\u201d by convention. (Although not a Rule)<\/p>\n\n\n\n
    useState<\/strong><\/p>\n\n\n\n
    import React, {useState} from \u2018react\u2019;<\/p>\n\n\n\n
    function Example() {<\/p>\n\n\n\n
    const [count, setCount] = useState(0);<\/p>\n\n\n\n
    return (<\/p>\n\n\n\n
    <div><\/p>\n\n\n\n
      <p> You clicked {count} times <\/p><\/p>\n\n\n\n
      <button onClick={(() => setCount(count + 1)}><\/p>\n\n\n\n
        Click me<\/p>\n\n\n\n
       <\/button><\/p>\n\n\n\n
    <\/div><\/p>\n\n\n\n
    );<\/p>\n\n\n\n
    }<\/p>\n\n\n\n
    useEffect<\/strong><\/p>\n\n\n\n
    (Adds ability to perform side effects from a function component. By default, React runs effects after every render, including the first.)<\/p>\n\n\n\n
    e.g.,<\/p>\n\n\n\n
    function LifecycleDemo() {<\/p>\n\n\n\n
       useEffect(() => {<\/p>\n\n\n\n
       console.log(\u2018render!\u2019);<\/p>\n\n\n\n
      return () = > console.log(\u2018unmounting\u2019);<\/p>\n\n\n\n
      })<\/p>\n\n\n\n
    Return \u201cThis is a lifecycle demo\u201d;<\/p>\n\n\n\n
    —-<\/p>\n\n\n\n
    When does useEffect run?<\/p>\n\n\n\n
    By default: before every render. If want to run it less often provide a 2nd<\/sup> argument<\/p>\n\n\n\n
    *Array \/<\/p>\n\n\n\n
    *If one of them has changed, the effect will run again.\/<\/p>\n\n\n\n
    *Will still run after the initial render. \/<\/p>\n\n\n\n
    *To run only on Mount (loading) and unmount (unloading), pass and empty array {[]}<\/p>\n\n\n\n
    Uses for useEffect<\/u><\/strong><\/p>\n\n\n\n
           -Fetch initial data.<\/p>\n\n\n\n
           -Focus inputs on first render.<\/p>\n\n\n\n
           – re-fetching when data changes.<\/p>\n\n\n\n
    What are Hooks?<\/strong><\/p>\n\n\n\n
    Functions that let you hook into React state and lifecycle features from function components.<\/p>\n\n\n\n
    Hooks allow you to reuse stateful logic.<\/p>\n\n\n\n
    Custom Hooks<\/strong><\/p>\n\n\n\n