react: Create a new project using the npm init <initializer> command

Instructor: 00:00 Let's look at several ways. We could use npm to create applications. First, let's take a look at building a React app three different ways using create-react-app. If you have npm version 5.1 below, then you would npm install or npm i create-react-app globally.

00:17 Then, you would invoke the global create-react-app passing your app's name, which will scaffold the app, install any necessary dependencies. At this point, you can kick up a dev server and there you go, or playground app. However, if you have npm version 5.2 or above, then you could try another approach.

00:40 First, let's uninstall create-react-app. We don't have installed globally anymore. Let's globally upgrade our version of npm to be 5.3, for example. Let's verify the create-react-app, indeed is not installed globally, and nope it's not.

01:00 For a second attempt, we could use a mutual called npx that shipped with npm version 5.2 or above. This tool can do many things, but one of them is to temporarily install our dependency, if it's not globally installed. Let's try npx create-react-app playground.

01:20 Since we don't have create-react-app globally installed, it will go and temporarily install it. Scaffold the app as before. Install the dependencies. We could kick up a dev server and there you go. Again, a React app.

01:37 The last one we want to show creating our React app. Again, this is just an example. It's not specific to create-react-app. It's using a new feature of npm as of version 6.1.

01:49 Let's install the latest version of npm with npm i npm -g. For a long time, the npm init command was mostly used to quickly create a new package JSON file. Now, as of version 6.1, it could do so much more than that.

02:06 The command now supports an initializer option that represents the package that you would like to use to create your project. npm will prepend create- to the name of the initializer and it'll use npx to install and execute that project.

02:22 Let's verify again that creat-react-app is not installed globally. All we need to do is, npm init React-app playground. At this point, npm will recognize we want to use an initializer React-app. It will prepend create- to it and use npx to install and execute create-react-app to scaffold and build our new application.

02:48 As before, we could kick up a dev server and verify that it works as expected, and it does. Now, this is great for create-react-app. What about creating other things? Well, I'm glad you asked. There is a project called mdx-deck. It's a great way to build an online slide deck with mdx, which is marked down in JSX.

03:09 You could manually create a project, locally install the dependency, create a sample presentation file, etc., but there is an easier way, but in Jackson who created mdx-deck, create an associated node package called create-deck, which is an initializer for a mdx-deck presentation, which means all you have do to create one of these beauties is to npm init deck, and the name of your project, my presentation in this case.

03:37 Now, npm will go out and pull the create-deck package down with npx and execute it, creating our new presentation. At this point, we can navigate to the folder, kick up the dev server, and there is our presentation deck. Depending on the version of your npm, you could create projects in very different ways.

03:58 If you have the latest version, you could use all three of these techniques including the new initializer option.