lesson 05: understand react project files
. What is the use of readme.md file
. What is the use of package.json file
. What is the use of .lock file
. What is the use of .gitignore file
. What is the use of public folder
. What is the use of index.html file
. What is the use of minifist.json file
. What is the use of favicon.ico file
. What is the use of robits.txt file
. What is the use of src folder
. What is the use of index.js file
. What is the use of app.js file
. What is the use of .test.js file
README.md:
This is a markdown file that contains a description of your application used in Github.
package.json:
This file contains metadata relevant to the project. For example,
it contains the name , version and description of our app. It also contains the
dependencies list with external libraries that our app depends on.
yarn.lock:
This file is generated when you install the dependencies by running yarn
in your project root. The file contains resolved dependencies versions along with their
sub-dependencies. It is needed for consistent installations on different machines. If
you use npm to manage dependencies, you will have a package-lock.json instead.
tsconfig.json:
This contains the TypeScript configuration. We don’t need to edit this
file because the default settings work fine for us.
.gitignore:
This file contains the list of files and folders that shouldn’t end up in your git repository.
public folder:
contains the static files for our app. They are not included in the
compilation process and remain untouched during the build.
index.html:
This file contains a special div id="root" that will be a mounting point for our React application.
manifest.json:
This provides application metadata for Progressive Web Apps32. For
example, the file allows installation of your application on a mobile phone’s home
screen, similar to native apps. It contains the app name, icons, theme colors, and other
data needed to make your app installable.
favicon.ico, logo192.png, logo512.png:
These are icons for your application. There
is favicon.ico , a small icon that is shown on browser tabs. Also, there are two bigger
icons: logo192.png and logo512.png . They are referenced in manifest.json and will
be used on mobile devices if your app will be added to the home screen.
robots.txt:
This tells crawlers what resources they shouldn’t access. By default it allows everything.
src folder:
Files in this folder will be processed by webpack and will be added to your app’s bundle.
JSX:
is an html-like syntax used in React applications to describe the layout.
Read more about it in the React Docs.35
In a JavaScript React application, we could use either .jsx or .js extensions for such
files. It would make no difference.
With TypeScript, you should use .tsx extensions on files that have JSX code, and
.ts on files that don’t.
This is important because otherwise there can be a syntactic clash. Both TypeScript
and JSX use angle brackets, but for different purposes.
TypeScript has a type assertion operator that uses angle brackets:
index.tsx:
The most important file in the /src folder is index.tsx . It is an entry point for our
application. It means that webpack will start to build our application from this file,
and then will recursively include other files referenced by import statements.
reportWebVitals:
This module can be useful if you want to measure your app performance.
It is explained in more detail: https://create-react-app.dev/docs/mea...
React.StrictMode:
This component mostly checks that no deprecated methods are being used. All those checks are
performed only in development mode, and it is good practice to wrap your app into React.StrictMode .
react-app-env.d.ts:
Another file with an interesting extension is react-app-env.d.ts . Let’s take a look.
Files with *.d.ts extensions contain TypeScript types definitions. Usually, these are
needed for libraries that were originally written in JavaScript.
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Music: Ambient Corporate by RinkevichMusic
/ rinkevichmusic
https://protunes.net/
Video Link: • RinkevichMusic - ...
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Auf dieser Seite können Sie das Online-Video lesson 05: understand react project files mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Javascript For Everything 23 Juni 2023 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 61 Mal angesehen und es wurde von 2 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
