WEBVTT

00:00.000 --> 00:14.000
In this video, we will learn what is a framework, introduction to VS code, create our first

00:14.000 --> 00:21.400
program using React, introduction.

00:21.400 --> 00:28.040
So far, you've built websites using HTML, CSS and JS, but as websites grow bigger and more

00:28.040 --> 00:35.240
complex, writing redundant elements like navigation bar with same links all over the website

00:35.240 --> 00:38.760
or a footer from scratch can be inefficient.

00:38.760 --> 00:41.480
This is where JavaScript frameworks help.

00:41.480 --> 00:48.000
A JavaScript framework is a set of tools that makes web development faster and easier.

00:48.000 --> 00:52.600
Instead of writing every line of code yourself, a framework gives you pre-built functions

00:52.600 --> 00:58.440
to simplify your work, making your websites more efficient and organized.

00:58.440 --> 01:07.600
There are various types of frameworks like React, Angular, View, Understanding, React.

01:07.600 --> 01:10.920
React is one of the most popular JavaScript frameworks.

01:10.920 --> 01:17.600
It was created by Facebook in 2013 to make websites faster and more interactive without

01:17.600 --> 01:23.840
reloading the whole page that tends to increase traffic of requests and responses in the network.

01:23.840 --> 01:27.280
Now when you like a post, you see updates instantly.

01:27.280 --> 01:33.640
Framework like React is working behind the scenes, updating the content and elements independently

01:33.640 --> 01:37.840
without the need to load all the pages from scratch.

01:37.840 --> 01:39.680
Introduction to VS code.

01:39.680 --> 01:42.360
What is Visual Studio Code?

01:42.360 --> 01:48.000
Visual Studio Code, or VS code, is a popular beginner-friendly IDE that helps you write

01:48.000 --> 01:49.800
and edit code.

01:49.800 --> 01:55.560
It's a simple text editor that helps with writing and organizing code efficiently, creating

01:55.560 --> 01:56.840
a simple code.

01:56.840 --> 02:03.200
Now, let's write a simple, hello world program.

02:03.200 --> 02:04.520
Steps to follow.

02:04.520 --> 02:05.520
1.

02:05.520 --> 02:08.880
Install No.js, if not installed.

02:08.880 --> 02:09.880
2.

02:09.880 --> 02:11.640
Open VS Code.

02:11.640 --> 02:12.640
3.

02:12.640 --> 02:14.560
Create your React app.

02:14.560 --> 02:18.560
Navigate to the folder where you want to create your project.

02:18.560 --> 02:27.440
Now, run the following command to create a new React app using npx.

02:27.440 --> 02:29.440
Create React app.

02:29.440 --> 02:31.240
Hello world.

02:31.240 --> 02:35.520
This command will set up a new folder with all the necessary files and folders for a React

02:35.520 --> 02:37.520
project.

02:37.520 --> 02:43.760
Open to your project folder by changing to new project directory CD hello world.

02:43.760 --> 02:50.920
Open the project folder, navigate to the SRC folder, and open the app.js file.

02:50.920 --> 02:57.920
Replace the existing code within the app function with the updated code, save the file, start

02:57.920 --> 03:03.840
the development server, open terminal, and run npm start.

03:03.840 --> 03:11.520
It will automatically launch your application in a browser with default content.

03:11.520 --> 03:17.360
We learned about JavaScript frameworks and used Visual Studio code to create a React application.