
Quick Lecture Overview
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
##Looks like we found a thief monkey By the way, I liked the trick how you reached till here. You have a good sense of humor. You will improve a lot if you join our course with this passion.
var
(function-scoped, outdated)let
(block-scoped, modern and recommended)const
(block-scoped, cannot be reassigned)_
, or $
let let = 5;
is invalid)myVar
and myvar
are different)string
, number
, boolean
, null
, undefined
, bigint
, symbol
Objects
, Arrays
, Functions
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
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.