WEBVTT

00:00.000 --> 00:08.420
component-based architecture. In this video we will understand what is

00:08.420 --> 00:16.140
component, how to create components, what is component what is component react

00:16.140 --> 00:20.780
components are independent and reusable bits of code that help developers break

00:20.780 --> 00:25.580
a web application into smaller manageable parts. Instead of writing the

00:25.580 --> 00:29.660
entire application in one big file react allows us to create multiple

00:29.660 --> 00:35.940
components, each handling a specific part of the UI. The given image represents

00:35.940 --> 00:41.580
a web page layout structured using react components. Each section is a separate

00:41.580 --> 00:46.620
component. These components are independent meaning changes in one do not

00:46.620 --> 00:53.180
affect the others. Understanding the website. Your web page will have a home

00:53.180 --> 00:58.620
page, a game page, and a rules page. You can click the game page to start your

00:58.620 --> 01:04.060
game or click on the start button. To access the rules click on the rules page.

01:04.060 --> 01:10.460
In this game you will flip and match similar looking cards. Initially your

01:10.460 --> 01:14.180
score will be zero and your points won't be deducted for flipping the incorrect

01:14.180 --> 01:20.020
card. For every correct flip your score will increase by five points. Later

01:20.020 --> 01:25.980
for every incorrect flip one point will be deducted from your total score.

01:25.980 --> 01:34.620
Creating the code. Open VS code. Create an app, CRA. Click on open new folder.

01:34.620 --> 01:38.820
Select the path and create a folder with the project name and select the folder.

01:38.820 --> 01:44.620
In VS code click on terminal and select new terminal. You will see the location

01:44.620 --> 01:51.900
of the file. Type node dash, V. Node.js is a runtime environment that lets you

01:51.900 --> 01:56.820
run JavaScript outside of the browser. Dash V. Check the installed version of

01:56.820 --> 02:04.780
Node.js. NPM. Dash V. NPM. A package manager for JavaScript that helps you

02:04.780 --> 02:12.900
install and manage libraries. Dash V. Check the installed version of NPM. Npx.

02:12.900 --> 02:21.780
Create React app. Npx. Npx. A tool that runs NPM packages without needing to

02:21.780 --> 02:26.660
install them globally. Create React app. A tool to quickly set up a react

02:26.660 --> 02:32.660
project with all necessary configurations and dependencies. Wait till the folder is

02:32.660 --> 02:41.020
created. Our folder has been created. Creating components. Now we will add

02:41.020 --> 02:46.860
component. We will create a folder in SRC of components and then create

02:46.860 --> 02:59.580
subfolders under it. Scoreboard.js. Name. Prompt.js. Gameboard.js. Card.js. Images

02:59.580 --> 03:04.500
and create one more folder as pages in SRC. Then create subfolders, home

03:04.500 --> 03:08.260
game rules, and about. We have created the basic component-based architecture.

03:08.260 --> 03:11.300
In the next video, we will continue with the code.