6- public
- The public folder contains static files such as index.html, the icon of the app, images, etc.
—————————————————————
——— Files inside public folder ———
—————————————————————
- index.html
(This is the main file that opens in your browser and holds the HTML template of your app)
- favicon.ico
(It’s the Favicon of the app)
- manifest.json
(It provides the information about the app such as name, author, icon, and description in a JSON text file. The purpose from the file is to install web applications to the home screen of the user’s device)
7- src
- This is the most important part of the app. This is where you do coding of your app.
- In this folder, you place all your files related to development like pages, components, CSS files, images, etc.
—————————————————————
——— Files inside src folder ———
—————————————————————
- App.js
(It’s the parent component of a react app and by default, it contains a basic component code and we can erase it and write our own)
- App.css
(It’s a CSS file that contains CSS related to App.js but you can use it globally as well)
- index.js
(It’s actually an entry point of our react app. It is where you render the main react component onto the root element)
- index.css
(A CSS file contains CSS related to index.js but can be used globally)
- App.test.js
(It’s a test file contains a basic test for App.js Component)
- logo.svg
(Logo of react rotating on the screen when you first runs the app)
- reportWebVitals.js
(create-react-app includes a built-in tool for measuring the real-life performance of your app. It is called reportWebVitals.js)
- The public folder contains static files such as index.html, the icon of the app, images, etc.
—————————————————————
——— Files inside public folder ———
—————————————————————
- index.html
(This is the main file that opens in your browser and holds the HTML template of your app)
- favicon.ico
(It’s the Favicon of the app)
- manifest.json
(It provides the information about the app such as name, author, icon, and description in a JSON text file. The purpose from the file is to install web applications to the home screen of the user’s device)
7- src
- This is the most important part of the app. This is where you do coding of your app.
- In this folder, you place all your files related to development like pages, components, CSS files, images, etc.
—————————————————————
——— Files inside src folder ———
—————————————————————
- App.js
(It’s the parent component of a react app and by default, it contains a basic component code and we can erase it and write our own)
- App.css
(It’s a CSS file that contains CSS related to App.js but you can use it globally as well)
- index.js
(It’s actually an entry point of our react app. It is where you render the main react component onto the root element)
- index.css
(A CSS file contains CSS related to index.js but can be used globally)
- App.test.js
(It’s a test file contains a basic test for App.js Component)
- logo.svg
(Logo of react rotating on the screen when you first runs the app)
- reportWebVitals.js
(create-react-app includes a built-in tool for measuring the real-life performance of your app. It is called reportWebVitals.js)
Best JavaScript Animation Libraries
- Three.js
Three.js is a WebGL-based 3D animation library. It allows you to create a scene with a camera and animate objects within it.
- GSAP
Professional-grade JavaScript animation for the modern web.
- Anime.js
Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API.
- Mo.js
Mo.js is a JavaScript library devoted to motion for the web. It offers a declarative syntax motion and the creation of elements for animation.
- Typed.js
Typed.js is a JavaScript library which is used to type a set of strings at the speed that you set, backspace what it's typed and begin the typing with another string you have set.
- Vivus
Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearance of being drawn.
- Proton
Proton is a lightweight and powerful JavaScript particle animation library.
- ScrollReveal
ScrollReveal is a JavaScript library for easily animating elements as they enter/leave the viewport. It was designed to be robust and flexible, but hopefully you’ll be surprised below at how easy it is to pick up.
———
@phoenixcoding
- Three.js
Three.js is a WebGL-based 3D animation library. It allows you to create a scene with a camera and animate objects within it.
- GSAP
Professional-grade JavaScript animation for the modern web.
- Anime.js
Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API.
- Mo.js
Mo.js is a JavaScript library devoted to motion for the web. It offers a declarative syntax motion and the creation of elements for animation.
- Typed.js
Typed.js is a JavaScript library which is used to type a set of strings at the speed that you set, backspace what it's typed and begin the typing with another string you have set.
- Vivus
Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearance of being drawn.
- Proton
Proton is a lightweight and powerful JavaScript particle animation library.
- ScrollReveal
ScrollReveal is a JavaScript library for easily animating elements as they enter/leave the viewport. It was designed to be robust and flexible, but hopefully you’ll be surprised below at how easy it is to pick up.
———
@phoenixcoding
👍1
CSS Libraries To Make Awesome Websites
- Hamburgers CSS
Tasty CSS-animated hamburgers
- CSS Layout
Popular layouts and patterns made with CSS
- Hover CSS
A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on.
- SpinKit
Simple loading spinners animated with CSS.
- Charts CSS
CSS data visualization framework.
- Pretty Checkbox
A pure CSS library to beautify checkbox and radio buttons.
- Izmir
Izmir is a mini CSS library allowing you to quickly create beautiful image hover elements.
- 30SecondsOfCode
The CSS snippet collection contains utilities and interactive examples for CSS3.
———
@phoenixcoding
- Hamburgers CSS
Tasty CSS-animated hamburgers
- CSS Layout
Popular layouts and patterns made with CSS
- Hover CSS
A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on.
- SpinKit
Simple loading spinners animated with CSS.
- Charts CSS
CSS data visualization framework.
- Pretty Checkbox
A pure CSS library to beautify checkbox and radio buttons.
- Izmir
Izmir is a mini CSS library allowing you to quickly create beautiful image hover elements.
- 30SecondsOfCode
The CSS snippet collection contains utilities and interactive examples for CSS3.
———
@phoenixcoding
Markdown Guide
- The Markdown Guide is a free and open-source reference guide that explains how to use Markdown, the simple and easy-to-use markup language you can use to format virtually any document.
———
https://www.markdownguide.org/basic-syntax/
———
If the website doesn’t work, This is the PDF version 👇🏻
———
@phoenixcoding
- The Markdown Guide is a free and open-source reference guide that explains how to use Markdown, the simple and easy-to-use markup language you can use to format virtually any document.
———
https://www.markdownguide.org/basic-syntax/
———
If the website doesn’t work, This is the PDF version 👇🏻
———
@phoenixcoding
Best GitHub Repos for Self-Taught
- Project-Based Learnings
A list of programming tutorials in which aspiring software developers learn how to build an application from scratch.
- Free Programming Books
List of Free Learning Resources In Many Languages.
- Developer Roadmap
Developer Roadmap is a community effort to create roadmaps, guides and other educational content to help guide the developers in picking up the path and guide their learnings.
- Public API’s
A collective list of free APIs for use in software and web development.
- Coding University
This repo is a short to-do list of study topics for becoming a software engineer.
- Awesome Python
A curated list of awesome Python frameworks, libraries, software and resources.
- Tensor-Flow
TensorFlow is an end-to-end open source platform for machine learning.
- FreeCodeCamp
freeCodeCamp.org is a friendly community where you can learn to code for free.
- Awesome
Awesome lists about all kinds of interesting topics.
———
@phoenixcoding
- Project-Based Learnings
A list of programming tutorials in which aspiring software developers learn how to build an application from scratch.
- Free Programming Books
List of Free Learning Resources In Many Languages.
- Developer Roadmap
Developer Roadmap is a community effort to create roadmaps, guides and other educational content to help guide the developers in picking up the path and guide their learnings.
- Public API’s
A collective list of free APIs for use in software and web development.
- Coding University
This repo is a short to-do list of study topics for becoming a software engineer.
- Awesome Python
A curated list of awesome Python frameworks, libraries, software and resources.
- Tensor-Flow
TensorFlow is an end-to-end open source platform for machine learning.
- FreeCodeCamp
freeCodeCamp.org is a friendly community where you can learn to code for free.
- Awesome
Awesome lists about all kinds of interesting topics.
———
@phoenixcoding
React JS Tools For Developers
- React Bootstrap
React Bootstrap is a framework that has been rebuilt to be able to use Bootstrap for React projects.
- Redux
Redux is an application that helps you easily manage the states in your react project in particular and general JavaScript application.
- Create React App
Create React App helps you to create projects quickly and easily with just one sentence command without having to perform complicated settings as usual.
- React Developer Tools
React Developer Tools is a tool created by Facebook that makes it easy for developers to control Check and develop the react project.
- Storybook
Storybook is an open source tool for building user interface components and pages in an intuitive way individual. It streamlines development, testing, and user interface documentation.
- React.js CheatSheet
React.js CheatSheet is a collection of common properties in react.
- Evergreen
Evergreen is a React UI framework for website development.
- Reactide
Reactide is an IDE dedicated to developing React web applications.
- React Hot Loader
React Hot Loader helps you refine React components in real time.
- React Styleguidist
React Styleguidist is an environment to help you develop components with a living style guide.
- React Testing Library
React Testing Library helps you to test components in your project.
- React Cosmos
React Cosmos helps you develop projects efficiently, build UI components easily, share quickly component libraries, automated testing.
- React Proto
React Proto is a React app prototyping tool for developers and designers.
- React Hook Form
React Hook Form is a tool that helps you to easily validate, test speed, provide useful APIs… for form.
- React Bits
React Bits is a collection of react patterns, techniques, and tips for react developers.
- Styled Components
Styled Components make it easy to incorporate CSS into JavaScript.
- React Starter Projects
React Starter Projects is a collection of useful libraries for programmers when developing projects react.
———
@phoenixcoding
- React Bootstrap
React Bootstrap is a framework that has been rebuilt to be able to use Bootstrap for React projects.
- Redux
Redux is an application that helps you easily manage the states in your react project in particular and general JavaScript application.
- Create React App
Create React App helps you to create projects quickly and easily with just one sentence command without having to perform complicated settings as usual.
- React Developer Tools
React Developer Tools is a tool created by Facebook that makes it easy for developers to control Check and develop the react project.
- Storybook
Storybook is an open source tool for building user interface components and pages in an intuitive way individual. It streamlines development, testing, and user interface documentation.
- React.js CheatSheet
React.js CheatSheet is a collection of common properties in react.
- Evergreen
Evergreen is a React UI framework for website development.
- Reactide
Reactide is an IDE dedicated to developing React web applications.
- React Hot Loader
React Hot Loader helps you refine React components in real time.
- React Styleguidist
React Styleguidist is an environment to help you develop components with a living style guide.
- React Testing Library
React Testing Library helps you to test components in your project.
- React Cosmos
React Cosmos helps you develop projects efficiently, build UI components easily, share quickly component libraries, automated testing.
- React Proto
React Proto is a React app prototyping tool for developers and designers.
- React Hook Form
React Hook Form is a tool that helps you to easily validate, test speed, provide useful APIs… for form.
- React Bits
React Bits is a collection of react patterns, techniques, and tips for react developers.
- Styled Components
Styled Components make it easy to incorporate CSS into JavaScript.
- React Starter Projects
React Starter Projects is a collection of useful libraries for programmers when developing projects react.
———
@phoenixcoding
🔥1
Tailwind CSS UI Kits
———
daisyUI
- The most popular, free and open-source Tailwind CSS component library.
Mamba UI
- Mamba UI is a free, open-source collection of UI components and templates based on Tailwind CSS.
Headless UI
- Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
Tailwind Starter Kit
- Tailwind Starter Kit is Free and Open Source. It does not change or add any CSS to the already one from Tailwind CSS.
@phoenixcoding
Material Tailwind
- Material Tailwind is an easy to use components library for Tailwind CSS and Material Design.
Gust UI
- A Free Tailwind UI kit for visionary applications.
TUK
- Build captivating experiences with accessible, fully responsive, drop-in-ready Tailwind CSS components and fast-track your workflow. Get started FREE with 250 COMPONENTS.
Kometa UI Kit
- We are giving away our first UI kit for free. It includes over 130 sections, built with Tailwind CSS, for your awesome projects.
Meraki UI
- Tailwind CSS Components That Support RTL Languages & Fully Responsive Based On Flexbox & CSS Grid With Elegant Dark Mode.
———
daisyUI
- The most popular, free and open-source Tailwind CSS component library.
Mamba UI
- Mamba UI is a free, open-source collection of UI components and templates based on Tailwind CSS.
Headless UI
- Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
Tailwind Starter Kit
- Tailwind Starter Kit is Free and Open Source. It does not change or add any CSS to the already one from Tailwind CSS.
@phoenixcoding
Material Tailwind
- Material Tailwind is an easy to use components library for Tailwind CSS and Material Design.
Gust UI
- A Free Tailwind UI kit for visionary applications.
TUK
- Build captivating experiences with accessible, fully responsive, drop-in-ready Tailwind CSS components and fast-track your workflow. Get started FREE with 250 COMPONENTS.
Kometa UI Kit
- We are giving away our first UI kit for free. It includes over 130 sections, built with Tailwind CSS, for your awesome projects.
Meraki UI
- Tailwind CSS Components That Support RTL Languages & Fully Responsive Based On Flexbox & CSS Grid With Elegant Dark Mode.
🔥1
GitHub Repos To Master React JS
———
Awesome React
- A collection of awesome things regarding the React ecosystem.
React in patterns
- A free book that talks about design patterns/techniques used while developing with React.
30-Days-Of-React
- A 30DaysOfReact challenge is a guide for both beginners and advanced JavaScript and React developers.
Real-world React apps
- Learn from React apps written by experienced developers.
React Bits
- A compilation of React Patterns, techniques, tips and tricks.
React & Redux in TypeScript - Complete Guide
- This guide is a living compendium documenting the most important patterns and recipes on how to use React (and its Ecosystem) in a functional style using TypeScript.
Awesome React Components
- This is a list of AWESOME components.
Ahooks
- A high-quality & reliable React Hooks library.
Beautiful React Hooks
- A collection of beautiful (and hopefully useful) React hooks to speed-up your components and hooks development.
React Use
- The essential collection of custom React Hooks, complete with documentation.
useHooks
- This is the repository for usehooks.com, a Gatsby powered blog that publishes easy to understand React Hook code recipes.
React TypeScript Cheatsheets
- Cheatsheets for experienced React developers getting started with TypeScript.
React JS coding challenges
- A series of React JS coding challenges with a variety of difficulties.
React Interview Questions & Answers
- List of top 500 React JS Interview Questions & Answers.
React Hooks Cheatsheet
- A Cheatsheet with live editable examples.
React - Redux Links
- Curated tutorial and resource links I've collected on React, Redux, ES6, and more, meant to be a collection of high-quality articles and resources for someone who wants to learn about the React-Redux ecosystem.
React Developer Roadmap
- In this repo you can find a chart demonstrating the paths that you can take and the libraries that you would want to learn to become a React developer.
Awesome React Hooks
- Awesome React Hooks Resources.
Awesome Next.js
- Curated list of resources: books, videos, articles about using Next.js.
———
@phoenixcoding
———
Awesome React
- A collection of awesome things regarding the React ecosystem.
React in patterns
- A free book that talks about design patterns/techniques used while developing with React.
30-Days-Of-React
- A 30DaysOfReact challenge is a guide for both beginners and advanced JavaScript and React developers.
Real-world React apps
- Learn from React apps written by experienced developers.
React Bits
- A compilation of React Patterns, techniques, tips and tricks.
React & Redux in TypeScript - Complete Guide
- This guide is a living compendium documenting the most important patterns and recipes on how to use React (and its Ecosystem) in a functional style using TypeScript.
Awesome React Components
- This is a list of AWESOME components.
Ahooks
- A high-quality & reliable React Hooks library.
Beautiful React Hooks
- A collection of beautiful (and hopefully useful) React hooks to speed-up your components and hooks development.
React Use
- The essential collection of custom React Hooks, complete with documentation.
useHooks
- This is the repository for usehooks.com, a Gatsby powered blog that publishes easy to understand React Hook code recipes.
React TypeScript Cheatsheets
- Cheatsheets for experienced React developers getting started with TypeScript.
React JS coding challenges
- A series of React JS coding challenges with a variety of difficulties.
React Interview Questions & Answers
- List of top 500 React JS Interview Questions & Answers.
React Hooks Cheatsheet
- A Cheatsheet with live editable examples.
React - Redux Links
- Curated tutorial and resource links I've collected on React, Redux, ES6, and more, meant to be a collection of high-quality articles and resources for someone who wants to learn about the React-Redux ecosystem.
React Developer Roadmap
- In this repo you can find a chart demonstrating the paths that you can take and the libraries that you would want to learn to become a React developer.
Awesome React Hooks
- Awesome React Hooks Resources.
Awesome Next.js
- Curated list of resources: books, videos, articles about using Next.js.
———
@phoenixcoding
❤2👍2
Chrome Extensions For Frontend Developers
Responsive Web Design Tester
- Responsive Web Design Tester is a quick and easy way to test your responsive website.
Dimensions
- A tool for designers to measure screen dimensions.
ColorZilla
- Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies.
WhatFont
- The easiest way to identify fonts on web pages.
PerfectPixel by WellDoneCode
- This extension helps develop your websites with pixel perfect accuracy!
Lightshot
- Simple and convenient screenshot tool. Select an area, edit your screenshot and upload it to the server.
UX Check
- Run a heuristic evaluation on your website.
Code Cola
- Code Cola is a chrome extension for editing online pages' CSS style visually.
Corporate Ipsum
- Generate random corporate double-speak for use as filler text.
GoFullPage - Full Page Screen Capture
- Capture a screenshot of your current page in entirety and reliably—without requesting any extra permissions!
———
@phoenixcoding
Responsive Web Design Tester
- Responsive Web Design Tester is a quick and easy way to test your responsive website.
Dimensions
- A tool for designers to measure screen dimensions.
ColorZilla
- Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies.
WhatFont
- The easiest way to identify fonts on web pages.
PerfectPixel by WellDoneCode
- This extension helps develop your websites with pixel perfect accuracy!
Lightshot
- Simple and convenient screenshot tool. Select an area, edit your screenshot and upload it to the server.
UX Check
- Run a heuristic evaluation on your website.
Code Cola
- Code Cola is a chrome extension for editing online pages' CSS style visually.
Corporate Ipsum
- Generate random corporate double-speak for use as filler text.
GoFullPage - Full Page Screen Capture
- Capture a screenshot of your current page in entirety and reliably—without requesting any extra permissions!
———
@phoenixcoding
👍1