Join the Conversation!
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
Create React.js Project
Loading...
Loading...
0 Comments
"Please login to view comments"
Upgrade your account
"Please login to view comments"
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.
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, symbolObjects, 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.