00:00:00 There are different ways to create a React.js app, starting from Create React App, a widely used tool that's reliable, but somewhat dated.

00:00:10 Many companies still use it, but it's not the most modern option.

00:00:14 Vite became a new norm and industry favorite, celebrated for its lightning-fast HMR, optimized builds, and speed.

00:00:23 It's an excellent choice for quickly setting up a React app.

00:00:26 And you can set it up manually.

00:00:28 If you're someone who loves to spend a lot of time doing manual setups, so you feel like you're a great developer, then you can do that.

00:00:35 Just kidding.

00:00:36 All I meant is that you can also manually set up a React app using Webpack and Babel, or directly install React and React DOM in existing projects.

00:00:45 But why reinvent the wheel when somebody already created a rocket?

00:00:50 Head over to Veet and notice that you can very easily create a new React application through a single command.

00:00:57 We'll do it that way to get faster build times, improved performance, and modern tooling.

00:01:02 So simply copy this command, open your code editor with an integrated terminal, and paste it.

00:01:08 It'll ask you whether you want to install the package to create that React app.

00:01:12 So say why, yes.

00:01:14 And it'll ask you for your project name.

00:01:17 Let's do something like my first React app.

00:01:22 Choose React.

00:01:25 and choose JavaScript.

00:01:26 Later on, we can do some TypeScript 2, but for now, we'll stick with JavaScript.

00:01:30 And there you have it.

00:01:31 The entire project got generated in just a fraction of a second, probably before you even had a time to blink.

00:01:38 Now, let's actually see which files and folders have been generated and for what reason.

00:01:43 Starting from the bottom to the top, first we have the Veed config.

00:01:47 This file allows you to customize the build process, such as adding plugins, configuring server settings, and more.

00:01:54 It's optional for most basic projects but can be useful if you need more advanced customization.

00:02:00 After that, we have a readme.md file which contains the information about the project like how to run it, what the project does,

00:02:08 and other documentation.

00:02:10 And the package.json contains the metadata of our project, such as its name, scripts, and dependencies needed to run it.

00:02:18 The dev script starts the development server, while the build script creates the production build.

00:02:24 You can run those commands by opening up your terminal and running npm run, and then the name of the command you want to run.

00:02:30 But before you do that, first you have to install the necessary dependencies to be able to run the application.

00:02:36 You can do that by running npm install or for short, npm i.

00:02:42 Or in my case, I don't have to type anything, as WebStorm immediately asked me whether I want to run npm install.

00:02:49 So that's exactly what I'll do.

00:02:50 And there we go.

00:02:51 The packages have been installed.

00:02:53 Since WebStorm did it for me, I didn't have to worry about switching directories.

00:02:57 But if you're doing it manually, you first have to CD, change directory into whatever you named your app.

00:03:03 So in this case, that is my first React app.

00:03:09 And then here you can run npm install if you haven't already.

00:03:12 Now run npm run dev.

00:03:15 This will run your application in about half a second on localhost 5173. You can see it live just by clicking on this URL.

00:03:23 There we go.

00:03:24 A simple app with a counter and a couple of icons.

00:03:27 Don't worry, we'll delete all of this soon and start from scratch.

00:03:30 But for now, let's move ahead and check out other files.

00:03:34 Such as the package lock.json.

00:03:38 This file is automatically generated when you run npm install.

00:03:41 It locks down the versions of the dependencies installed in your project, ensuring that every project installation, whether on your machine or when your

00:03:50 colleague or boss is running your application, will install exactly the same dependencies, making sure that your app runs perfectly.

00:03:57 Don't delete it.

00:03:58 After that, we have an index.html.

00:04:01 And this is the main HTML file within which your app is loaded.

00:04:05 It has a basic structure, including the root div, which React will infuse with your entire application.

00:04:11 Vite uses this as the entry point.

00:04:14 And there's also the script that points to a main.jsx file, which initializes your application.

00:04:21 We'll check it out soon.

00:04:22 For now, let's continue up ahead to ESLintConfig.

00:04:26 This is a config file used to define the rules and settings for ESLint, a popular linting tool.

00:04:32 It helps you identify and fix problems in your code, such as coding style violations, errors, and potential bugs.

00:04:39 After that, we have gitignore.

00:04:41 This file tells Git which files and folders to ignore when committing your code.

00:04:46 The most important thing to ignore are node modules.

00:04:49 You never want to push these over to GitHub.

00:04:51 Rather, you want everybody to just get your code, and then if they want to, they can just run MPMI.

00:04:57 And the second most important thing to ignore is the .env file, which contains your environment variables.

00:05:03 Those need to be kept safe.

00:05:04 Some of the other folders on the list include node modules, which contains all the installed dependencies for your project.

00:05:11 Everything from React, Vite, and more.

00:05:14 This folder is huge and contains even more folders within it.

00:05:18 You never really have to get into it.

00:05:20 It's just there for your app to work.

00:05:22 It's completely managed by MPM, and you don't have to interact with it directly.

00:05:26 After that, we have the public folder, which contains static assets, such as images, icons, and other files that don't need to go through Veed's bundler.

00:05:35 Files in here can be referenced directly by their path, such as forward slash Veed.svg.

00:05:41 And finally, we have the source folder.

00:05:44 This is where your React components and JavaScript logic go.

00:05:48 Tailwind CSS will be applied here through the styles you import into your components.

00:05:52 App.jsx is where the main UI of your app is defined.

00:05:57 Whatever you write here will appear on your website.

00:05:59 Main.jsx is the entry point of your React app where React is rendered into the DOM.

00:06:05 You can see that here we use plain JavaScript to get the element by ID of root and then render the entire app right within it.

00:06:13 Since this is the entire app, here we import our main style file, index.css, where you can define the global styles of your application.

00:06:23 After that, we have the assets folder containing media assets like images or icons, and these can be imported into your React components or used within

00:06:32 JSX by simply importing them like this, and then using them as the source within the image component.

00:06:38 And finally, the app CSS is the styling file specifically for the app JSX.

00:06:43 As you can see, we're importing it only here.

00:06:45 You can create as many CSS files as you want and import them into different components.

00:06:50 just to make sure that our styles are tidy and separated.

00:06:53 Hopefully, this all makes sense.

00:06:55 Sure, there are more files and things happening behind the scenes, but just to make sure React.js runs smoothly, you don't need to worry about those files

00:07:04 all the time.

00:07:05 Now, before we dive into React.js syntax and learn how to write its code, let's quickly set up something cool for the feature I'll teach you how to build today.

00:07:14 We're going to be using AppWrite, an open source backend for your React apps.

00:07:18 The link is in the description.

00:07:19 So just click it and quickly create your account.

00:07:22 We'll use AppRide to develop a simple algorithm that tracks what users are searching for on our movie app and then suggest the top five trending movies

00:07:32 based on their search history.

00:07:33 We'll set up our AppRide project and connect our React app to it a bit later.

00:07:37 For now, just creating your account is good.