Create react app vs Vite : A test to see which is faster at building your react app starter files

00:10:13
https://www.youtube.com/watch?v=zYr9HBojBaQ

概要

TLDRThe video provides a demonstration of using Vite, a build tool, to create React applications faster than the typical Create React App (CRA) method. It highlights that while CRA often takes about three to four minutes to set up, Vite can accomplish the same setup in about 55 seconds. The presenter walks through the steps of setting up a React app using both methods, measuring the time it takes for each. Vite is noted for its speed and ease of setup, requiring Node.js version 12 or above. The video concludes with a demonstration of the quick installation of a React app using Vite, encouraging viewers to try Vite for faster setups.

収穫

  • 🚀 Using Vite is significantly faster than Create React App.
  • 🔧 Vite requires Node.js version 12 or above.
  • 📑 Vite was initially designed for Vue but supports React, Svelte, and others.
  • 🕒 Create React App typically takes 3-4 minutes to set up.
  • ⚡ Vite can set up a React app in under a minute.
  • 🖥️ Vite automatically sets up local servers for development.
  • 💾 Ensure your Node.js and npm versions are compatible before starting.
  • ⏱️ Testing with time measurements highlights Vite's speed advantage.
  • 📝 Video provides step-by-step instructions for both tools.
  • 👍 Vite simplifies the initialization process for React apps.

タイムライン

  • 00:00:00 - 00:05:00

    The video introduces a faster method to start React applications using the tool Vite, instead of the Create React App. The presenter highlights the time savings, noting that Create React App takes about 3 minutes and 52 seconds, while Vite only takes 55 seconds. The speaker explains their usual process of using npx create-react-app which typically takes three to four minutes to set up, and contrasts this with the use of Vite. Vite, although initially designed for Vue.js, supports multiple frameworks including React. The primary requirement mentioned to utilize Vite is having Node.js version 12 or higher. The presenter checks the Node version on their system, confirming it meets the necessary specifications for using Vite.

  • 00:05:00 - 00:10:13

    The presenter demonstrates the installation process using both Create React App and Vite. For Create React App, they check the necessary versions of Node.js and npm, then proceed to install and start a local server, noting the process takes about four minutes. Moving on to Vite, the presenter goes through the installation steps, emphasizing the speed—installing a React app with Vite takes about 3.8 seconds plus 12 seconds for npm install. They guide through the commands used, modify the provided template directory name and template to fit React, and conclude by running the app on a local server, which takes a total of 55 seconds, significantly faster than Create React App. They encourage viewers to subscribe for more videos.

マインドマップ

Mind Map

ビデオQ&A

  • What is Vite?

    Vite is a build tool that helps set up development environments for JavaScript frameworks like React and Vue faster than traditional tools.

  • Why is Vite faster than Create React App?

    Vite is designed to offer a faster setup by optimizing the build and refresh speeds, hence reducing the time required to set up a React project.

  • What are the requirements to use Vite?

    You need to have Node.js version 12 or above to use Vite.

  • Can Vite be used for frameworks other than React?

    Yes, Vite supports other frameworks like Vue, Svelte, and others.

  • How much time can I save using Vite instead of Create React App?

    You can significantly reduce setup time, potentially setting up a React app in about 55 seconds compared to several minutes with Create React App.

  • Does Vite support development servers?

    Yes, Vite automatically sets up local development servers for your projects.

  • Is there a difference in commands between npm versions when using Vite?

    Yes, you need to use different commands based on whether you are using npm version 6 or 7+.

ビデオをもっと見る

AIを活用したYouTubeの無料動画要約に即アクセス！
字幕
en
オートスクロール:
  • 00:00:00
    don't you wish create react app built
  • 00:00:02
    your applications faster
  • 00:00:05
    well in this video i'm going to show you
  • 00:00:06
    a faster way just look at the times yet
  • 00:00:09
    3 minutes and 52 seconds for create
  • 00:00:12
    react app and 55 seconds for white
  • 00:00:15
    that's how quicker it was for me
  • 00:00:17
    so it can be for you too
  • 00:00:19
    hello there in this video i'm going to
  • 00:00:20
    be showing you a faster way to
  • 00:00:23
    start a react app projects
  • 00:00:26
    usually when i'm starting a new project
  • 00:00:28
    i usually go to np i used to run npx
  • 00:00:31
    create react app and that will build my
  • 00:00:34
    starter files
  • 00:00:36
    now uh
  • 00:00:38
    the thing is it usually takes about
  • 00:00:41
    three to four minutes on average to
  • 00:00:43
    install
  • 00:00:44
    uh
  • 00:00:45
    a react app
  • 00:00:46
    okay so in this video i'm going to be
  • 00:00:48
    showing you a quicker way
  • 00:00:50
    to
  • 00:00:51
    start a react project and that is using
  • 00:00:54
    a tool called vite
  • 00:00:56
    now white is a build tool uh it's like
  • 00:00:59
    webpack and what it does is it will set
  • 00:01:02
    up all the
  • 00:01:04
    uh files and uh tools that you need to
  • 00:01:07
    develop a react app you know like the
  • 00:01:10
    local server and things like that
  • 00:01:12
    okay so white is uh i think it was
  • 00:01:15
    initially designed for view
  • 00:01:17
    but it also supports uh
  • 00:01:20
    the other frameworks as well uh like
  • 00:01:23
    you know view uh react react
  • 00:01:26
    swell
  • 00:01:27
    so you can use it for the ones listed
  • 00:01:30
    here so i'm on the white document site
  • 00:01:32
    here
  • 00:01:34
    okay so the only requirements that you
  • 00:01:36
    need is that you're running
  • 00:01:39
    node.js version 12 or above so you need
  • 00:01:43
    to make sure that
  • 00:01:45
    you've got
  • 00:01:46
    a higher higher higher version of
  • 00:01:48
    node.js higher than a12
  • 00:01:51
    so if i go into the command prompt and i
  • 00:01:53
    can
  • 00:01:54
    just check if i type in
  • 00:01:56
    a node space
  • 00:01:59
    hyphen hyphen
  • 00:02:01
    and
  • 00:02:02
    its
  • 00:02:03
    version
  • 00:02:05
    and it will tell me that i'm using
  • 00:02:06
    version 14
  • 00:02:08
    0.17
  • 00:02:10
    so i'm okay so you need to make sure
  • 00:02:13
    before you run this you need to make
  • 00:02:15
    sure that you know you're running that
  • 00:02:16
    version
  • 00:02:18
    uh or any anything higher than 12 will
  • 00:02:20
    do
  • 00:02:21
    okay so
  • 00:02:23
    what i'm going to do is i'm in this
  • 00:02:24
    video i'm going to be testing both of
  • 00:02:26
    them and
  • 00:02:27
    just
  • 00:02:28
    highlighting how fast white is so first
  • 00:02:31
    i'm going to
  • 00:02:32
    create a react app
  • 00:02:35
    using create react app and um
  • 00:02:39
    and as you can see on the react
  • 00:02:40
    documentation you know i you need node
  • 00:02:44
    10.16 or above and npm
  • 00:02:48
    5.6 and above
  • 00:02:51
    so i can just test uh
  • 00:02:54
    what version of npm i've got it like npm
  • 00:02:58
    uh dash dash
  • 00:03:00
    version
  • 00:03:05
    okay so i'm using six six point fourteen
  • 00:03:08
    so uh that's that's okay
  • 00:03:11
    so first of all i'm gonna run npx uh
  • 00:03:13
    create react hat okay so i'm gonna just
  • 00:03:16
    copy that and go to the command prompt
  • 00:03:19
    i've created a folder here already react
  • 00:03:21
    test so i'm going to just type it in
  • 00:03:23
    there
  • 00:03:24
    so i just delete and call it
  • 00:03:27
    my
  • 00:03:28
    cra
  • 00:03:30
    app
  • 00:03:31
    which is a
  • 00:03:33
    create react type okay so i'm just
  • 00:03:36
    press enter on that
  • 00:03:38
    and i shall time it
  • 00:03:50
    so that took
  • 00:03:52
    around about three minutes so now i'm
  • 00:03:54
    going to do
  • 00:03:55
    and i'm going to cd into
  • 00:03:57
    [Music]
  • 00:03:58
    my
  • 00:03:59
    cra
  • 00:04:00
    app
  • 00:04:02
    and i'm gonna do npm
  • 00:04:05
    start
  • 00:04:06
    okay so this is gonna open up a
  • 00:04:10
    uh
  • 00:04:11
    it's gonna run it in a local server so
  • 00:04:26
    and there you go it's installed so that
  • 00:04:29
    took another sort of uh
  • 00:04:31
    uh around about 30 to 40 seconds as well
  • 00:04:34
    it took me about four minutes to sort of
  • 00:04:36
    uh
  • 00:04:37
    [Music]
  • 00:04:38
    go from running npx uh to open it up in
  • 00:04:41
    the browser
  • 00:04:44
    now i'm going to
  • 00:04:45
    use a white to install a
  • 00:04:48
    react app so
  • 00:04:50
    so i'm back back at the documentation
  • 00:04:52
    for white and as you can see here
  • 00:04:54
    there's three different ways of uh well
  • 00:04:57
    they give you three different uh
  • 00:04:59
    commands to install uh
  • 00:05:02
    byte
  • 00:05:02
    okay so the first two are nbn and the
  • 00:05:06
    other one is for yarn so we're gonna be
  • 00:05:09
    concentrating on npn
  • 00:05:11
    so the npn you know
  • 00:05:13
    if you've got npm
  • 00:05:15
    version 6 then you use this one if
  • 00:05:18
    you've got npm version 7 plus then you
  • 00:05:21
    use this
  • 00:05:22
    so if i go back to the command prompt
  • 00:05:24
    and i just type in npm
  • 00:05:27
    version
  • 00:05:29
    oops indium dash dash version
  • 00:05:32
    okay so tell me the version so i've got
  • 00:05:34
    six so i'm going to be using this one
  • 00:05:37
    okay so i'm just going to copy that
  • 00:05:40
    and paste that into
  • 00:05:43
    back in the
  • 00:05:45
    react test directory in the root okay
  • 00:05:47
    just
  • 00:05:49
    install that but i'm going to
  • 00:05:51
    um
  • 00:05:52
    the
  • 00:05:53
    this particular
  • 00:05:56
    if we go back okay so the the
  • 00:05:59
    instruction contains
  • 00:06:01
    um
  • 00:06:02
    you know the
  • 00:06:04
    two parts here it's got the white
  • 00:06:06
    at white test you need
  • 00:06:09
    so you got the
  • 00:06:10
    init right at latest so that's basically
  • 00:06:14
    telling you to install the latest white
  • 00:06:17
    and this is the application directory
  • 00:06:20
    and this will be the template that we're
  • 00:06:23
    using so we're going to be uh using
  • 00:06:26
    react so we're going to be changing that
  • 00:06:28
    part
  • 00:06:29
    and it was also going to change that
  • 00:06:31
    directory name and whatever we want okay
  • 00:06:35
    so
  • 00:06:36
    so go back all right so i'm gonna change
  • 00:06:38
    that view to react
  • 00:06:41
    and then
  • 00:06:43
    i'm just gonna say my white
  • 00:06:46
    right just and then just press enter
  • 00:06:48
    there
  • 00:06:50
    and then i'm going to time this
  • 00:06:55
    okay that took about
  • 00:06:57
    3.8 seconds okay now i'm going to
  • 00:07:01
    cd into my
  • 00:07:04
    byte
  • 00:07:05
    app
  • 00:07:07
    and i'm gonna
  • 00:07:09
    npm
  • 00:07:10
    install
  • 00:07:13
    okay and
  • 00:07:17
    there are mistakes
  • 00:07:29
    so there there you go that's uh
  • 00:07:31
    that's taking about 12 seconds so
  • 00:07:34
    now if i do
  • 00:07:36
    and
  • 00:07:38
    if i go back
  • 00:07:39
    it's npm
  • 00:07:41
    run
  • 00:07:42
    and this will run
  • 00:07:44
    the local development server
  • 00:07:50
    so i have to
  • 00:07:51
    copy that address
  • 00:07:55
    into the browser copy
  • 00:07:59
    and
  • 00:08:03
    so there you go a
  • 00:08:05
    a react app installed with white
  • 00:08:07
    that took 55 seconds hope you enjoyed
  • 00:08:10
    this video and subscribe my channel to
  • 00:08:13
    see more videos like this thank you
  • 00:10:12
    you
タグ
  • Vite
  • React
  • Create React App
  • Build Tool
  • Node.js
  • NPM
  • Fast Setup
  • Web Development
  • JavaScript