Creating our first react app using create-react-app | Complete React Course in Hindi #2

Summary

This video script offers a comprehensive guide on setting up a React application using 'create-react-app'. It emphasizes the importance of the official React documentation as a resource and introduces key concepts like components, props, and state. The instructor demonstrates creating a React app with npx, explains the project folder structure, and clarifies the roles of various files. The video aims to make React accessible, ensuring viewers understand the basics before delving deeper into app development.

Takeaways

• 😀 The video provides a tutorial on installing Node.js and npm, and setting up a React.js development environment.
• 📚 The instructor emphasizes the importance of the official React.js documentation as a primary source for learning and reference.
• 🛠️ The 'create-react-app' package is introduced as a tool to set up the basic structure of a React application quickly and efficiently.
• 🕰️ The use of 'npx' is recommended over 'npm' for creating a React app, as it allows for one-time use of packages without installation.
• 📁 The script explains the basic folder structure of a React app created with 'create-react-app', including the 'public' and 'src' directories.
• 🧱 The concept of components in React is introduced, highlighting their role in building reusable parts of a user interface.
• 🔄 The video discusses the idea of component-based architecture, which allows for smooth navigation and dynamic content updates in an app.
• 📝 The script briefly touches on the concepts of 'props' and 'state' in React, which are fundamental to component functionality.
• 🛑 The instructor advises beginners to ignore certain warnings during the installation process, as they are not critical for understanding the basics.
• 🔍 The video demonstrates how to start and interact with a React app using 'npm start', and how changes in the code are automatically reflected in the browser.
• 🔧 The script concludes with an overview of the React app's folder structure and the main files to focus on, such as 'index.html' in the 'public' folder and 'app.js' in the 'src' folder.

Q & A

What is the main topic of the video?

The main topic of the video is about installing Node.js and npm, using create-react-app to set up a React application, and understanding the basic concepts and folder structure of a React project.

Why is the create-react-app package recommended for setting up a new React project?

The create-react-app package is recommended because it sets up the basic folder structure for a React application, which is optimal and saves time instead of manually creating the structure.

What does the instructor suggest using instead of npm install for creating a React app?

The instructor suggests using npx create-react-app instead of npm install to avoid downloading the package permanently and to use it just for one time.

What is the difference between npm and npx as mentioned in the video?

Npm is a package manager used to install packages in Node.js, while npx allows you to use any package for one time without downloading it, like borrowing and returning it after use.

What is the purpose of the 'public' folder in a React project created with create-react-app?

The 'public' folder contains the static assets of the React application, including the index.html file which serves as the entry point and is populated with the React app via JavaScript.

What is the role of the 'src' folder in a React project?

The 'src' folder is where all the React components and source code are kept. It is the main area where developers write and edit their application code.

What command is used to start a React app created with create-react-app?

The command 'npm start' is used to start a React app, which serves the app on localhost for development purposes.

What does the instructor mean by 'component-based architecture' in React?

Component-based architecture in React refers to the practice of breaking down a user interface into individual components, which can be reused and modified easily, enhancing the development process.

What are 'props' in the context of React components?

Props in React are properties that are passed to a component to customize its behavior and appearance, similar to how details are filled in a form template.

What are 'states' in React components and how do they differ from 'props'?

States are the internal values that a component can change based on user interactions or data changes. They differ from props, which are external values passed into a component and are generally not modified by the component itself.

What is the significance of the 'index.js' file in a React project created with create-react-app?

The 'index.js' file is the entry point of the React application. It is responsible for rendering the main App component and includes logic for the React app to function.

How can one build a React app for production using create-react-app?

A React app can be built for production by using the 'npm build' command, which creates an optimized version of the website with static HTML, CSS, and JavaScript files.

Outlines

00:00

🛠️ Setting Up React with Create React App

This paragraph introduces the process of setting up a React application using 'create react app'. The speaker emphasizes the importance of bookmarking the playlist for reference and highlights the utility of the official React documentation for updates and main concepts. They explain that while it's possible to code a React app from scratch, using 'create react app' is more time-efficient, especially for those with limited time. The explanation includes a comparison between npm and npx, with a preference for npx due to its ability to use packages without downloading them. The paragraph concludes with a demonstration of creating a React app using npx and a discussion on React's nature as a library or framework, and the concept of component-based architecture.

05:01

🔍 Exploring Component-Based Architecture in React

The speaker delves into the concept of component-based architecture in React, using the inspection of a website's components as an example. They discuss the advantages of breaking down a website into reusable components, such as easier navigation and the ability to render content with props. The paragraph also touches on the planning of a hypothetical application, likening different parts of a webpage to components that can be manipulated and reused. The speaker reassures viewers that they will learn more about these components in detail later in the course, and they briefly mention the installation process and warnings that might appear, drawing an analogy to a broken pen to explain the nature of these warnings.

10:02

📁 Understanding the Folder Structure of a React App

This section provides an overview of the folder structure generated by 'create react app'. The speaker simplifies the understanding by advising not to fear the structure but to familiarize oneself with it. They explain the purpose of the 'node_modules' folder, 'package.json', 'package-lock.json', 'readme.md', and 'gitignore' files, while emphasizing that the main focus for a React developer should be the 'public' and 'src' folders. The 'public' folder contains the 'index.html' file, which is crucial for rendering the app, and the 'src' folder houses the React components. The explanation includes the roles of 'props' and 'state' in components, using analogies to clarify these concepts, and assures that a deeper understanding will come with practical experience.

15:02

🌐 Navigating the React App's File Structure and Workflow

The speaker continues to guide viewers through the React app's file structure, focusing on the 'src' folder and explaining the role of 'index.js' as the entry point that renders the 'App' component. They demonstrate how to run a React app using 'npm start' and highlight the live reloading feature during development. The paragraph also touches on the differences between function-based and class-based components in React, indicating a shift towards function-based components. The speaker encourages viewers to experiment with editing the 'App' component and to understand the significance of the 'index.html' file. They conclude by emphasizing the importance of the 'src' folder for housing all the main source code and the 'public' folder for the essential 'index.html'.

20:06

📚 Final Thoughts and Encouragement for Practical Learning

In the concluding paragraph, the speaker summarizes the key points covered in the video, including the use of 'create react app', the folder structure of a React app, and the basics of components with 'props' and 'state'. They encourage viewers to create an app using 'create react app' and to study the folder structure closely. The speaker also promotes the playlist for the course, sharing their dedication to ensuring clarity and understanding in their teaching. They express their commitment to helping viewers become proficient in React and invite them to continue learning through the playlist, ending the video on a note of gratitude and anticipation for the next session.

Keywords

💡Node.js

Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine, allowing developers to run JavaScript on the server side. In the video, Node.js is mentioned as a prerequisite for setting up the environment for React development, indicating its importance in the modern web development ecosystem.

💡npm

npm stands for Node Package Manager, which is a tool that comes with Node.js and allows developers to install and manage packages (libraries, frameworks, etc.). The script discusses using npm to install 'create-react-app', a package that sets up a new React project, demonstrating npm's role in package management.

💡React.js

React.js, often referred to simply as React, is a popular open-source JavaScript library used for building user interfaces, particularly single-page applications. The video's theme revolves around creating and understanding a React application, with React.js being the core technology discussed.

💡create-react-app

Create React App is a package that automates the setup of a new React application, providing a basic folder structure and build configuration. The script emphasizes using 'create-react-app' with npx to streamline the process of starting a new React project without manual setup.

💡npx

Npx is a package runner tool that comes with npm, used to execute packages without installing them globally. The script mentions npx as a way to use 'create-react-app' for a one-time use, illustrating its utility for running packages without taking up unnecessary disk space.

💡Component-Based Architecture

Component-Based Architecture is a design approach where a software application is composed of discrete, reusable pieces called components. The video explains the concept of components in React, showing how they can be reused and modified with props to build user interfaces.

💡Props

In React, props (short for properties) are a mechanism for passing data from a parent component to a child component. The script uses the analogy of filling out a form with details to explain how props work, emphasizing their role in customizing child components.

💡State

State in React refers to a component's internal data that can change over time and influence the component's output. The script introduces state as part of a component that can be altered, affecting the UI, and compares it to the mutable content within a form.

💡index.js

Index.js is the entry point to a React application, where the main component is rendered. The script explains that index.js is responsible for rendering the App component, highlighting its importance in the application's structure.

💡index.html

Index.html is the main HTML file in a React application, which serves as the container for the React app. The script describes index.html as having a 'root' div that gets populated with the React app, showing its role in the rendering process.

💡npm start

Npm start is a command used in npm scripts to start a development server for a React application. The video demonstrates using 'npm start' to run the React app and mentions its utility for live reloading during development.

Highlights

Introduction to installing Node.js and npm, and the importance of extensions for optimal React.js development.

Emphasis on bookmarking and saving the playlist for easy access to React.js tutorials.

Explanation of 'create-react-app' and its role in setting up the basic folder structure for a React app.

Praise for the official React.js documentation as the ultimate source for updates and main concepts.

Discussion on the possibility of creating a React app without packages, but the efficiency of using 'create-react-app'.

Introduction to 'npx' as a tool for using packages one time without downloading, compared to 'npm'.

Demonstration of creating a React app using 'npx create-react-app my app'.

Clarification that React is technically a JavaScript library but often referred to as a framework.

Introduction to component-based architecture in React and its advantages for reusability.

Explanation of how components can be manipulated using props for dynamic content rendering.

Completion of the React app creation process and the structure of the generated app.

The use of 'npm start' to run the React app and the automatic reload feature upon saving changes.

Overview of the folder structure of a React app created with 'create-react-app'.

Description of the role of 'src' and 'public' folders in the React app, and the importance of 'index.html'.

Introduction to 'props' and 'state' in React components with basic definitions and their roles.

Explanation of the 'index.js' file as the entry point of the React app and its relationship with 'app.js'.

Discussion on the difference between function-based and class-based components in React.

Highlighting the efficiency of the installed extension 'es7 react/redux/graphql/react-native-snippets' for coding in React.

Closing remarks encouraging viewers to practice creating a React app and to follow the playlist for mastering React.

Transcripts

In our last video we saw that how we'll install nodejs and npm.

I told you a very long story, I told you about the extensions I use,

so that you can use react js properly and easily and code optimally.

Now if you have not accessed this playlist yet then do bookmark this here

and save it by clicking here but do save this playlist.

Let me just bring this bookmark here so that it remains infront of me.

Whenever I'll wish to access it I'll access it from here.

Now here we'll talk about create react app.

So here you write create react app search it on google

and as soon as you'll click on create react app

you see here create react app reactjs.org's website will appear.

And here they have told that how you can create a react app.

Before that I'd like to give a shoutout to this documentation.

This is the official documentation of reactjs.org's

Whenever you need anything, here you'll come and this is going to be the soure

Anything which you want to see, this is going to be the source,

any update which will come will be shown here, okay?

This thing must be known to you and alongwith that

the main concepts after installation are given here.

They have told everything here. So this is the official documentation.

Now listen to me carefully

I can make the react js application by writing the code here only

try to understand the meaning of my saying

I can make react application without using any package and by directly typing it

but doing so will not be optimal.

There's a package called create react app.

This package sets up the basic react app, so we'll use this only,

to bring the basic folder structure of react app.

Now I can easily create this basic folder structure on my own.

It's not that I've to use create react app.

But if you have less time in your life like me then do use create react app

time will be saved. I don't think that you have 35hrs in day,

if you do have then tell me by commenting

though I don't think that anybody is having 35hrs in a day.

Everybody has got 24hrs only, we've to sleep also.

So to save the time we use create react app.

So see smallest react app looks like this,

like they have told that you can use reactsj by including react

to make user interfaces but

the most optimal way and the best way according to me is to use creat react app.

So you can install create react app by using npx.

Now we heared about npm, npm is a package manager, okay?

npm helps us to install packages in our nodejs, okay?

Noe listen to me carefully, if here I,

install this package using npm.

Then I'll have to write something like this npm install create react app, okay?

Create react app and this will be installed and I'd like to install it globally

because I'll keep using create react app too often to make react app.

But I'll not do this, I'll use npx.

And what is npx?

npx helps you to use any package for one time, without downloading it.

Understand npx like, you are borrowing create react app

and return it after using it.

npm is like you have purchased create react app

and keep it in your home.

Now if you have wasteful space then you can keep it.

I don't have wasteful space in my hard disk so I'll take the help of npx.

I'll make react app with the help of npx.

Now see if you do something like this, the way they have told.

I'll proceed in the way they have proceeded, I'll paste by right click,

npx create react app my app, so a react app of name app will be made.

And I show it to you by pressing enter.

It will take sometime but it will make yur react app, okay?

So see here react app is made here see here it is saying creating react app,

it is making the react app, it will make all of your files.

I tell you one more thing while it is making.

React is a library or a framework?

See technically react is a JavaScript library.

Many people have this question whether it is a library or a framework?

But react directly competes with framework like angular!

Just because it competes with vue or angular like frameworks

that's why many people refer it like a framework.

And use it interchangeably with framewor or library.

Most people say it as a framework because it is comparable with angular.

Now many people say that what is component based architechture.

See I tell you all these things while it is installing.

Let it be a react app and I'll tell you the proof of it

This page is using the production build of react.

This is the same extension which I told you to install in the last video.

If you have not seen then please do see it by accessing the playlist.

Now listen to me carefully. This is a react app.

Means react.org uses react.

To make this react application they might have used some component.

If I inspect it by right click and after that I click on components

then I get to see all the components here, okay?

I got to see all the components here.

Now assume that I'm planning an application like this,

I'm planning to make the clone of reactjs.org.

So there will be navbar in my website.

Inside this black thing all these will come inside navbar.

So this is a component, okay?

After that this left one will be one component.

Then this thing which is at right will be a component.

There is one thing at right and at left, you're gettting to see all these things.

So basically this is a component and this will be a component.

You can design your components in any of the ways.

It may happen that you consider all these to be a component.

But when we break a website into components then

the biggest advantage that we get is that we can reuse it.

It may happen that I want to re render it by changing this and this content.

Then with the help of prop, I can give it a new title and new content.

And it will be rendered exactly like this and with exactly right navigation menu.

And exactly the same navabar, okay?

So I with the help of components, I can make an app with very smooth navigation.

We'll see as to how these things happen, you don't have to worry about it.

But I'm just giving a rough idea as to what are component based architecture.

Now see our create react app is still going on, I think it has made my react app.

It has installed everything.

So here it is taking a little time.

So as soon as it will be completed I'll comeback.

So here it's installation is finished.

Infact the generation of the react app is finished.

But did you saw one thing here?

React app is made under a folder named my app.

But now if you want to spell all these mess here only,

then you just put . instead of writing my app.

If you press enter here after writing . then everything will appear here only.

It will appear here instead of my app. So what I'll do is

I'll delete both of these apps by shift delete so that it gets deleted forever.

Node module folder takes a little bit longer to get deleted.

Because of it there are lots of items.

After deleting this what I'll do is, I'll run it back again npx create react app .

By doing so whatever was made in my app folder will be made here.

Means it will be made at this location.

In react course folder.

Now see as soon as I'll hit enter, I'll get to see the starter app of react.

So I'm waiting for this.

Now see because of the restrictions of naming conventions

all these files cannot be put here.

It has given me error, we cannot do this, you have to use good names only.

So what we'll do is whenever we'll make a react app,

either we'll keep it in such a folder which follows the naming convention

or we'll do this only npx create react app after that space

we'll write the name of the app which we want to make.

Now let I want to make an react project with the name textutils

so I wrote text utils and see here

it is not taking too much time.

And it gets done quickly when you do it for the second time.

It a little bit longer when you download nodejs npm for the first time.

Now see it is intalling all the packages, I'll wait for it to complete

and will come back.

So guys it took me a long time once again.

If you don't know why this warn is written here, about what it is giving me warning.

So I'm giving you a very good and interesting analogy.

Do you remember that, in childhood when you did not had pen then you used to say

to your friend that do you have an extra pen, if yes then give me.

Sometimes there used to be an extra pen in my bag

so do you what I used to do? I used to give it but it would be broken.

If you this pen then see it is broken.

So to whoever I'll give this pen I'll give it with a warning.

I'll say if you want to take this pen then take but if you kept it in you pocket

then it may leak and it can spoil you cloths

and it may happen that it can spoil you answer sheet if you're giving exams.

So I'll give it with a warning.

If that persons asks me if it is bad, no it's not bad,

it works 100% fine but deal with a warning.

This thing can leak so do keep it in mind.

nodejs is also saying the same thing, it's saying

as I told you about my pen when I gave it to my friend,

similarly when nodejs is installing modules inside node module folder

so it telling that everything is fine

but this problems may occur.

It's important for you to know that it requires a pair of this this .

So it keep on telling these small stuffs.

I'll say you to ignore all these as you're a beginner.

You'll always get to see warning like this here.

Now here I'll close this. Now most of you will that why did you close this?

I closed it because I'll open this folder in my VS code,

inside the textutils folder.

I clicked wrong, I had to click on open with code.

Now see it will come inside visual studio code.

Now understand the folder structure and don't fear from the folder structure

because you don't have to wrote learn it.

You've to learn to learn to play with it and once you've made it your toy,

then it will automatically be learned to you.

Which is file is where.

See in total there are two folder except the node modules,

as all the packages come inside it which

is being used by basic app of create react app.

So the modules that we need comes inside this node module folder you ignore it.

For the time being you ignore the gitignore too because it uses git

when you push your project to github.

Which have to pushed and which don't have to be comes inside gitignore.

So you ignore this too!

In package.json all the packages are there which are installed in node modules.

If, whenever you want to replicate this node modules folder

then these two files will be used package.json and package-lock.json.

Readme.md simple gives you a basic readme.

Whenever you're pushing your project to github

then what should be shown in place of readme? This should be shown.

And here basic stuffs are written here.

You'll modify this in most of the cases if you're serious about project.

So we'll not mess up the readme for the time being.

We'll not mess package-lock and also not with gitignore.

Right now we'll not deal with git.

We'll not disturb node modules too!

So in total there are only two folders left!

One is public and the other is src.

So we have these two folders only.

These files are there in public and these are the files in src.

You'll keep you react components into src folder.

And you'll send props in those components and there will be states of components.

Now these words like props and state might scare you.

Now you'll say that what did you just told me, I don't know them!

See, I'll tell you in short

about the meaning of component's props and states.

And after that I'll tell you in detail about it later.

It doesn't mean that you'll get it if I tell you in short.

I'm just giving it like a hint as to what are props and state?

What is prop? Let I made a template, I made this template of pen

or let say I made a form, it's a form, okay?

Inside this fome I wrote name, address, age, where do you want to go,

which train you want to pick, I wrote some fields like this.

So I can fill up this form with any details.

If this form is a component

so the details that I want to put inside the component are called props.

So as soon as I'll send this components with props,

means if I'll fill up this form with my details then this will be my form.

So props are exactly the same like that, okay?

Now, what are states?

Let it be a component,

right now it's heading is harry

so heading is a part of the state.

Means it's heading is harry or you can say that it's state is

something like this it's heading is harry and content is this.

Now you can change the heading and the content too

based on user interaction,

based on some http request response.

Means you can change it in any of the ways.

So the meaning of state of component is the details contained in it

and the meaning of the component's prop is

that I can the state of the component by sending some props.

And now these two things seem a lot confusing to people because props

the difference between props and states less understood to people with theory

So you're also not get it with theory, I also didn't get it,

I'm telling you very honestly, when I'll do it then only you'll

to know the difference between props and states.

For the time being just know that there's something called props in react.

You've heared about props and states.

We'll see later as to what are they.

Before we proceed further, I want to show you some files.

The first most file, index.html

and I'm removing these comments.

Obviously there is meaning of these comments,

they have written here to make you understand something.

But let me remove these comments, I'll try to make you understand

as to how react app works.

So if you see this fils, then see that there's an empty div in it.

Inside body only div id equal to root is there.

And obvioulsy there's a favicon added in it and with that.

And there's another favicon they have loaded.

And with that they have linked manifest.json.

So in total it's an html, okay?

And div id is equal to root will be populated with the help of JavaScript.

And you react app will be made.

But you don't have to do any sort of mess here,

you don't have to write any code on your own in most of the cases.

Yeah, if we want to add some bootstrap then we can do so.

But the major code which you'll write will be in components inside this src folder.

It won't matter if I delete this logo512, logo192, this favicon

then also there will be no affect.

There is only one most important file index.html

inside which all the rendering will be done at the end of the day.

This div will be populated with the help of JavaScript, okay?

I hope that makes sense.

So I close this now.

Now I'm coming inside src.

In src we've an app component, so app.js is an component.

So index.js is our entry point.

So what is index.js saying, it is saying to render that app component.

And after rendering bring this content inside of it here.

Now it's reacts code.

There is some logic written inside react which gives you some functionality

that you do changes in app.js and automatically with the help of index.js

will come in this document.getElementById.

Now most of you might be thinking that, I'm not getting this code.

What is it? React.dom.render?

What is it? I've never seen the syntax, my JavaScript is weak

I tell you one thing,

you don't have to wrote learn it!

People get scared of the files.

See don't get scared by seeing the files, I'm sitting here for you to tell all these.

I'll tell you each and everything.

Come inside app.js and see some code is written here.

At first I tell you as to how you can run it?

This is an react app?

You write npm start and as soon as you write npm start

your react app will start to server.

Now see at localhost:3000 my react app is being served.

Now it is saying to change this component and save it

and it will be automatically reloaded.

So I do one thing, I change this learn react here

to see if it changes.

If I write learn react with harry,

so will it be changed automatically if I save it?

Yeah! It did change to learn react with harry.

So here this component is coming from here.

So app.js is such a component which I'm directly able to see here.

Now I can make more components and put it inside app.js,

how? I'll tell you later.

I hope so far you have understood index.html, where does this file located?

It's inside the folder structure created by create react app.

And with that you got a rough idea, let say you didn't get a rough idea

then you know that there's something called props inside react.

And with that there's something called state inside react.

That's all I want from you. For the time being you only need to know this.

After that how you have to start your react app, npm start I've told you.

And when we've to build it for production then we use this command.

And right now I'll not build it for production.

Production build means that if you want an static html, css and JavaScript

optimized version of your website

then you can build it by using npm build, okay?

We put all of you components inside src folder,

like we've our app components inside src folder.

We can more components and put it in src.

Now inside react the components can be function based or class based.

Earlier react used to use class based components but now it used function based.

Now if any one among you is confusing between what is class based,

what is function based compoent.

Don't get confused, it's a very simple stuff.

Initially we'll edit this only and

after that I'll tell you about class based components.

And the extension which we've installed es7 react/redux/graphql/react-nativ-snippets

It's a very interesting extension. Things become so easier with it

that you have to write minimum code.

You'll ony type logic and boiler plate code will automatically do this for you.

It took a lot of effort to make this react course

If you haven't accessed this playlist yet then do access it.

Sometimes it has happened that I recorded the lecture and after that

I didn't got the feel if I can make this understood in any other better way.

I deleted the whole video and re-recorded it when I felt that I make it better.

So this also happens with me.

I don't finalize a video until I get 100% satisfaction

as to anyone can understand this concept.

Until then I don't finalize my video.

I hope you're understanding this video.

I hope the purpose of making you understood is being done.

By the end of this course I've planned to make you the react's master.

I hope you all have enjoyed.

And I taught you this folder structure, told you about npx,

told you about using create react app, I hope you've understood it all.

Now what you do, you make one one app with the help of create react app

and look at the folder structure carefully

go on doing it side by side the way I'm doing.

So that you get whatever I'm telling you here.

I'm repeating myself again and again, only two folders are there

in which you to take a look src and public.

For rest of the files you know what their roles are.

But inside src our main source code is there which we're going to edit.

And inside public, index.html is most important file, okay?

So I hope you've understood each and everything till now.

Only this much in this video for the time being.

Do access this playlist, save it by clicking here,

bookmark it by clicking here.

Thank you so much guys for watching this video and I'll see you next time.