mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2026-03-13 02:01:57 +08:00
Compare commits
64 Commits
vue-roadma
...
interactiv
| Author | SHA1 | Date | |
|---|---|---|---|
|
9371d8b8e9 | ||
|
|
aa8e8daacb | ||
|
|
944c38736d | ||
|
|
d916319777 | ||
|
|
1c47773816 | ||
|
|
c52ea8d7f8 | ||
|
|
6c4d98d6a0 | ||
|
|
78d94cd4b0 | ||
|
|
25cf42eb47 | ||
|
|
7b11f49468 | ||
|
|
14f3a8b02d | ||
|
|
2cadbbee28 | ||
|
8879e694bf | ||
|
875b78007d | ||
|
a4eb636bd4 | ||
|
|
37bf6713b4 | ||
|
|
4b1fc37946 | ||
|
|
327b93ae26 | ||
|
|
a2eec9ff51 | ||
|
|
355c6f99f7 | ||
|
|
12d5500da6 | ||
|
|
f01b8ee272 | ||
|
|
e6fea586fe | ||
|
|
c95ed6400e | ||
|
|
503a5f793c | ||
|
|
76f33486c8 | ||
|
|
4b7ea2cce1 | ||
|
|
6a83ab598e | ||
|
|
960eb225e3 | ||
|
|
095f2b083f | ||
|
|
9b5b53d4d6 | ||
|
|
5e7a52d981 | ||
|
|
4706a8f37e | ||
|
|
c208219564 | ||
|
|
f8a207e8b7 | ||
|
|
8c5b9ae3ea | ||
|
|
229e515580 | ||
|
0b19be0a14 | ||
|
|
d4be159f35 | ||
|
|
2ec14cfb48 | ||
|
|
c984691429 | ||
|
01c4275315 | ||
|
|
608c8a2b00 | ||
|
b2bb10079a | ||
|
|
442e460b71 | ||
|
|
191f71566c | ||
|
|
49a82d073a | ||
|
|
4a15f59a17 | ||
|
|
1bbbc7d67c | ||
|
|
5388354493 | ||
|
|
ff063bd0d2 | ||
|
|
0feba5bed1 | ||
|
|
f6a721a4d0 | ||
|
|
b21e3a4aed | ||
|
|
df394605e6 | ||
|
|
aa3467430e | ||
|
|
2d591b63c4 | ||
|
|
0069be44f6 | ||
|
|
079f491c0f | ||
|
|
780fb66c8b | ||
|
|
3680e8f52c | ||
|
|
1676d156e7 | ||
|
|
de0894c83c | ||
|
|
d22fb3664f |
@@ -177,7 +177,6 @@
|
||||
"isTextHeavy": false,
|
||||
"isCommunity": false,
|
||||
"featured": true,
|
||||
"landingPath": "/roadmaps/103-react/landscape.md",
|
||||
"resourcesPath": "/roadmaps/103-react/resources.md",
|
||||
"jsonUrl": "/project/react.json",
|
||||
"versions": [
|
||||
@@ -190,6 +189,7 @@
|
||||
"url": "https://twitter.com/kamranahmedse"
|
||||
},
|
||||
"pdfUrl": "/pdfs/react.pdf",
|
||||
"contentPathsFilePath": "/roadmaps/103-react/content-paths.json",
|
||||
"id": "react",
|
||||
"metaPath": "/roadmaps/103-react/meta.json",
|
||||
"isUpcoming": false
|
||||
@@ -275,7 +275,6 @@
|
||||
"isCommunity": false,
|
||||
"featured": true,
|
||||
"jsonUrl": "/project/vue.json",
|
||||
"landingPath": "/roadmaps/105-vue/landscape.md",
|
||||
"resourcesPath": "/roadmaps/105-vue/resources.md",
|
||||
"versions": [
|
||||
"latest",
|
||||
@@ -287,6 +286,7 @@
|
||||
"url": "https://twitter.com/kamranahmedse"
|
||||
},
|
||||
"pdfUrl": "/pdfs/vue.pdf",
|
||||
"contentPathsFilePath": "/roadmaps/105-vue/content-paths.json",
|
||||
"id": "vue",
|
||||
"metaPath": "/roadmaps/105-vue/meta.json",
|
||||
"isUpcoming": false
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
# Jest
|
||||
|
||||
Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
|
||||
It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!
|
||||
|
||||
|
||||
@@ -3,4 +3,4 @@
|
||||
The React Testing Library is a very lightweight solution for testing React components. It provides light utility functions on top of react-dom and react-dom/test-utils, in a way that encourages better testing practices. Its primary guiding principle is: The more your tests resemble the way your software is used, the more confidence they can give you.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Getting Started' href='https://testing-library.com/docs/react-testing-library/intro/' />
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Getting Started' href='https://testing-library.com/docs/react-testing-library/intro/'>React Testing Library</BadgeLink>
|
||||
|
||||
@@ -1 +1,11 @@
|
||||
# Awk
|
||||
# awk
|
||||
|
||||
`awk` is a general-purpose scripting language used for manipulating data or text and generating reports in the Linux world. It is mostly used for pattern scanning and processing. It searches one or more files to see if they contain lines that match the specified patterns and then performs the associated actions.
|
||||
|
||||
It has the below syntax:
|
||||
|
||||
`awk options 'selection_criteria {action}' input-file > output-file` e.g. `$ awk '{print}' file.txt`
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.geeksforgeeks.org/awk-command-unixlinux-examples/'>What is AWK? How to use it?</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://linuxize.com/post/awk-command/'>How AWK works?</BadgeLink>
|
||||
@@ -1 +1,12 @@
|
||||
# Sed
|
||||
# sed
|
||||
|
||||
`sed`(**S**tream **Ed**itor) command in UNIX can perform lots of functions on file like searching, finding and replacing, insertion or deletion. By using SED you can edit files even without opening them in editors like [VI Editor](https://www.redhat.com/sysadmin/introduction-vi-editor).
|
||||
|
||||
It has the following syntax:
|
||||
|
||||
`$ sed [options].. [script] [input-file]` e.g. `$ sed 's/search-regex/replacement-txt/g' file.txt`
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.geeksforgeeks.org/sed-command-in-linux-unix-with-examples/'>What is SED? with examples</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Manual' href='https://www.gnu.org/software/sed/manual/sed.html'>Detailed Manual</BadgeLink>
|
||||
|
||||
|
||||
@@ -1 +1,11 @@
|
||||
# Grep
|
||||
# grep
|
||||
|
||||
The `grep` command (**g**lobal search for **r**egular **e**xpression and **p**rint out) searches file(s) for a particular pattern of characters, and displays all lines that contain that pattern. It can be used with other commands like `ps` making it more useful.
|
||||
|
||||
It has the following syntax:
|
||||
|
||||
`$ grep [options] pattern [files]` e.g. `$ grep "search-regex" file-1.txt`
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.geeksforgeeks.org/grep-command-in-unixlinux/'>What is Grep? with examples</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Manual' href='https://www.gnu.org/software/grep/manual/grep.html'>Detailed Manual</BadgeLink>
|
||||
@@ -1 +1,12 @@
|
||||
# Sort
|
||||
# sort
|
||||
|
||||
`sort` command is used to sort the contents of a file in a particular order. By default, it sorts a file assuming the contents are in ASCII. But it also can also be used to sort numerically by using appropriate options.
|
||||
|
||||
It has the following syntax
|
||||
|
||||
`$ sort [options].. input-file` e.g. `$ sort file.txt`
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.geeksforgeeks.org/sort-command-linuxunix-examples/'>Sort command with examples</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Wiki' href='https://en.wikipedia.org/wiki/Sort_(Unix)'>Options</BadgeLink>
|
||||
|
||||
|
||||
@@ -1 +1,16 @@
|
||||
# Cat
|
||||
# cat
|
||||
|
||||
`cat` (concatenate) command is very frequently used in Linux. It reads data from the file and gives its content as output. It helps us to create, view, and concatenate files.
|
||||
|
||||
|
||||
It has the following syntax:
|
||||
|
||||
* View : `$ cat [option] [input-file]`
|
||||
* Create : `$ cat [content] > [new-file]`
|
||||
* Append : `$ cat [append_content] >> [existing-file]`
|
||||
|
||||
e.g. `$ cat file.txt`
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.tecmint.com/13-basic-cat-command-examples-in-linux/'>Cat Command with examples</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Wiki' href='https://en.wikipedia.org/wiki/Cat_(Unix)'>Options</BadgeLink>
|
||||
@@ -1 +1,7 @@
|
||||
# Managing servers
|
||||
# Managing Servers
|
||||
|
||||
Server management includes all of the monitoring and maintenance required for servers to operate reliably and at optimal performance levels. Server management also involves the management of hardware, software, security, and backups all in service of keeping the IT environment operational and efficient. The primary goals of an effective server management strategy are to:
|
||||
|
||||
- Minimize server slowdowns and downtime while maximizing reliability.
|
||||
- Build secure server environments.
|
||||
- Scale servers and related operations to meet the needs of the organization over time.
|
||||
|
||||
@@ -1 +1,10 @@
|
||||
# Http
|
||||
# HTTP
|
||||
|
||||
HTTP is the `TCP/IP` based application layer communication protocol which standardizes how the client and server communicate with each other. It defines how the content is requested and transmitted across the internet.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.cloudflare.com/en-gb/learning/ddos/glossary/hypertext-transfer-protocol-http/'>What is HTTP?</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview'>An overview of HTTP</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://kamranahmed.info/blog/2016/08/13/http-in-depth'>Journey to HTTP/2</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.smashingmagazine.com/2021/08/http3-core-concepts-part1/'>HTTP/3 From A To Z: Core Concepts</BadgeLink>
|
||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=iYM2zFP3Zn0'>HTTP Crash Course & Exploration</BadgeLink>
|
||||
|
||||
@@ -1 +1,8 @@
|
||||
# Lxc
|
||||
# LXC
|
||||
|
||||
LXC is a well-known Linux container runtime that consists of tools, templates, and library and language bindings. It's pretty low level, very flexible and covers just about every containment feature supported by the upstream kernel.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://linuxcontainers.org/'>LXC Website</BadgeLink>
|
||||
<BadgeLink colorScheme='blue' badgeText='Documentation' href='https://linuxcontainers.org/lxc/documentation/'>LXC Documentation</BadgeLink>
|
||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=CWmkSj_B-wo'>Getting started with LXC containers</BadgeLink>
|
||||
|
||||
@@ -1 +1,8 @@
|
||||
# Ansible
|
||||
# Ansible
|
||||
|
||||
Ansible is an open-source configuration management, application deployment and provisioning tool that uses it's own declarative language in YAML. Ansible is agentlesse, meaning you only need remote connections via SSH or Windows Remote Management via Powershell in order to function
|
||||
|
||||
|
||||
<BadgeLink badgeText='Official Website' colorScheme='blue' href='https://www.ansible.com/'>Ansible Website</BadgeLink>
|
||||
<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://docs.ansible.com/'>Official Documentation</BadgeLink>
|
||||
<BadgeLink badgeText='Getting Started Guide' colorScheme='blue' href='https://www.ansible.com/resources/get-started'>Ansible Getting Started Guide</BadgeLink>
|
||||
|
||||
@@ -1 +1,8 @@
|
||||
# Salt
|
||||
# Salt
|
||||
|
||||
Salt is an open-source event-driven IT automation, remote task execution, and configuration management software service. Built on python, Salt uses simple and human-readable YAML combined with event-driven automation to deploy and configure complex IT systems.
|
||||
|
||||
<BadgeLink badgeText='Official Website' colorScheme='blue' href='https://docs.saltproject.io/en/latest/topics/about_salt_project.html'>Salt Project Website</BadgeLink>
|
||||
<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://docs.saltproject.io/en/latest/'>Official Documentation</BadgeLink>
|
||||
<BadgeLink badgeText='Introduction' colorScheme='blue' href='https://docs.saltproject.io/en/latest/topics/index.html'>Introduction to Salt</BadgeLink>
|
||||
<BadgeLink badgeText='Install' colorScheme='blue' href='https://docs.saltproject.io/en/latest/topics/installation/index.html#installation'>Salt Installation</BadgeLink>
|
||||
|
||||
@@ -1 +1,7 @@
|
||||
# Puppet
|
||||
# Puppet
|
||||
|
||||
Puppet, an automated administrative engine for your Linux, Unix, and Windows systems, performs administrative tasks (such as adding users, installing packages, and updating server configurations) based on a centralized specification.
|
||||
|
||||
<BadgeLink badgeText='Official Website' colorScheme='blue' href='https://puppet.com/'>Puppet Website</BadgeLink>
|
||||
<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://puppet.com/docs'>Official Documentation</BadgeLink>
|
||||
<BadgeLink badgeText='Introduction' colorScheme='blue' href='https://puppet.com/docs/puppet/6/puppet_overview.html'>Introduction to Puppet</BadgeLink>
|
||||
|
||||
@@ -1 +1,9 @@
|
||||
# Aws cdk
|
||||
# AWS CDK
|
||||
|
||||
The AWS Cloud Development Kit (AWS CDK) is an open-source software development framework used to provision cloud infrastructure resources in a safe, repeatable manner through AWS CloudFormation.
|
||||
|
||||
<BadgeLink badgeText='Official Website' colorScheme='blue' href='https://aws.amazon.com/cdk/'>AWS CDK Website</BadgeLink>
|
||||
<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://docs.aws.amazon.com/cdk/index.html'>Official Documentation</BadgeLink>
|
||||
<BadgeLink badgeText='AWS CDK Explained' colorScheme='blue' href='https://docs.aws.amazon.com/cdk/v2/guide/home.html'>What is the AWS CDK?</BadgeLink>
|
||||
<BadgeLink badgeText='Getting Started Guide' colorScheme='blue' href='https://docs.aws.amazon.com/cdk/v2/guide/getting_started.html'>AWS SDK Getting Started Guide</BadgeLink>
|
||||
<BadgeLink badgeText='AWS CDK Examples' colorScheme='blue' href='https://github.com/aws-samples/aws-cdk-examples'>AWS CDK Examples</BadgeLink>
|
||||
|
||||
@@ -1 +1,8 @@
|
||||
# Cloudformation
|
||||
# CloudFormation
|
||||
|
||||
CloudFormation is the AWS service that helps to define collections of AWS resources. CloudFormation lets you model, provision, and manage AWS and third-party resources by treating infrastructure as code.
|
||||
|
||||
<BadgeLink badgeText='Official Website' colorScheme='blue' href='https://aws.amazon.com/cloudformation/'>AWS CloudFormation Website</BadgeLink>
|
||||
<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://docs.aws.amazon.com/cloudformation/index.html'>Official Documentation</BadgeLink>
|
||||
<BadgeLink badgeText='Getting Started Guide' colorScheme='blue' href='https://aws.amazon.com/cloudformation/getting-started/'>AWS CloudFormation Getting Started Guide</BadgeLink>
|
||||
<BadgeLink badgeText='Templates' colorScheme='blue' href='https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/cfn-sample-templates.html'>CloudFormation Sample Templates</BadgeLink>
|
||||
|
||||
@@ -1 +1,7 @@
|
||||
# Pulumi
|
||||
# Pulumi
|
||||
|
||||
Pulumi is an open source Infrastructure as Code tool that can be written in TypeScript, JavaScript, Python, Go, .NET, Java, and YAML to model cloud infrastructure.
|
||||
|
||||
<BadgeLink badgeText='Official Website' colorScheme='blue' href='https://www.pulumi.com/'>Pulumi Website</BadgeLink>
|
||||
<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://www.pulumi.com/docs/'>Official Documentation</BadgeLink>
|
||||
<BadgeLink badgeText='Getting Started Guide' colorScheme='blue' href='https://www.pulumi.com/docs/get-started/'>Pulumi Getting Started Guide</BadgeLink>
|
||||
|
||||
@@ -1 +1,7 @@
|
||||
# Azure devops services
|
||||
# Azure DevOps
|
||||
|
||||
Azure DevOps is developed by Microsoft as a full scale application lifecycle management and CI/CD service. Azure DevOps provides developer services for allowing teams to plan work, collaborate on code development, and build and deploy applications.
|
||||
|
||||
<BadgeLink badgeText='Official Website' colorScheme='blue' href='https://azure.microsoft.com/en-us/services/devops/#overview'>Azure DevOps Website</BadgeLink>
|
||||
<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://docs.microsoft.com/en-us/azure/devops/?view=azure-devops&viewFallbackFrom=vsts'>Official Documentation</BadgeLink>
|
||||
<BadgeLink badgeText='Getting Started Guide' colorScheme='blue' href='https://docs.microsoft.com/en-us/azure/devops/user-guide/sign-up-invite-teammates?view=azure-devops'>Azure DevOps Getting Started Guide</BadgeLink>
|
||||
|
||||
@@ -1 +1,7 @@
|
||||
# Drone
|
||||
# Drone
|
||||
|
||||
Drone is a CI/CD service offering by [Harness](https://harness.io/). Each build runs on an isolated Docker container, and Drone integrates with many popular source code management repositories like GitHub, BitBucket and GitLab
|
||||
|
||||
<BadgeLink badgeText='Official Website' colorScheme='blue' href='https://www.drone.io/'>Drone Website</BadgeLink>
|
||||
<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://docs.drone.io/'>Official Documentation</BadgeLink>
|
||||
<BadgeLink badgeText='Getting Started Guide' colorScheme='blue' href='https://docs.drone.io/server/overview/'>Drone Getting Started Guide</BadgeLink>
|
||||
|
||||
@@ -1 +1,7 @@
|
||||
# Prometheus
|
||||
# Prometheus
|
||||
|
||||
Prometheus is a free software application used for event monitoring and alerting. It records real-time metrics in a time series database built using a HTTP pull model, with flexible queries and real-time alerting.
|
||||
|
||||
<BadgeLink badgeText='Official Website' colorScheme='blue' href='https://prometheus.io/'>Pulumi Website</BadgeLink>
|
||||
<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://prometheus.io/docs/introduction/overview/'>Official Documentation</BadgeLink>
|
||||
<BadgeLink badgeText='Getting Started Guide' colorScheme='blue' href='https://prometheus.io/docs/tutorials/getting_started/'>Getting Started with Prometheus</BadgeLink>
|
||||
|
||||
@@ -1 +1,8 @@
|
||||
# Nagios
|
||||
# Nagios
|
||||
|
||||
Nagios is a powerful tool that provides you with instant awareness of your organization’s mission-critical IT infrastructure. Nagios allows you to detect and repair problems and mitigate future issues before they affect end-users and customers.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Framework Website' href='https://www.nagios.org/'>Nagios Website</BadgeLink>
|
||||
<BadgeLink colorScheme='blue' badgeText='Read' href='https://www.nagios.org/documentation/'>Official Documentation</BadgeLink>
|
||||
<BadgeLink colorScheme='blue' badgeText='Read' href='https://support.nagios.com/kb/'>Nagios Support Knowledge Base</BadgeLink>
|
||||
|
||||
@@ -1 +1,9 @@
|
||||
# Grafana
|
||||
# Grafana
|
||||
|
||||
Grafana is the open-source platform for monitoring and observability. It allows you to query, visualize, alert on and understand your metrics no matter where they are stored.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Framework Website' href='https://grafana.com/'>Grafana Website</BadgeLink>
|
||||
<BadgeLink colorScheme='blue' badgeText='Read' href='https://grafana.com/docs/'>Grafana Official Documentation</BadgeLink>
|
||||
<BadgeLink colorScheme='blue' badgeText='Read' href='https://community.grafana.com/'>Grafana Community</BadgeLink>
|
||||
<BadgeLink badgeText='Course' colorScheme='green' href='https://grafana.com/videos/'>Grafana Webinars and Videos</BadgeLink>
|
||||
|
||||
@@ -1 +1,7 @@
|
||||
# Google cloud
|
||||
# Google Cloud
|
||||
|
||||
Google Cloud is Google's cloud computing service offering, providing over 150 products/services to choose from. Google Cloud runs on the same infrastructure that Google uses internally for its end-user products, such as Search, Gmail, Google Drive, and YouTube.
|
||||
|
||||
<BadgeLink badgeText='Official Website' colorScheme='blue' href='https://cloud.google.com/'>Google Cloud Website</BadgeLink>
|
||||
<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://cloud.google.com/docs'>Official Documentation</BadgeLink>
|
||||
<BadgeLink badgeText='Get Started Guide' colorScheme='blue' href='https://cloud.google.com/docs/get-started/'>Google Cloud Get Started Guide</BadgeLink>
|
||||
|
||||
@@ -1 +1,8 @@
|
||||
# Azure
|
||||
# Azure
|
||||
|
||||
Microsoft Azure is a is a cloud computing service operated by Microsoft. Azure currently provides more than 200 products and cloud services.
|
||||
|
||||
<BadgeLink badgeText='Official Website' colorScheme='blue' href='https://azure.microsoft.com/en-us/'>Azure Website</BadgeLink>
|
||||
<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://docs.microsoft.com/en-us/azure/'>Official Documentation</BadgeLink>
|
||||
<BadgeLink badgeText='Get Started Guide' colorScheme='blue' href='https://azure.microsoft.com/en-ca/get-started/#explore-azure'>Azure Get Started Guide</BadgeLink>
|
||||
<BadgeLink badgeText='Get to know Azure' colorScheme='blue' href='https://azure.microsoft.com/en-us/explore/'>Get to know Azure</BadgeLink>
|
||||
|
||||
@@ -1 +1,7 @@
|
||||
# Heroku
|
||||
# Heroku
|
||||
|
||||
Heroku is a cloud platform as a service subsidiary of Salesforce. Heroku officially supports Node.js, Ruby, Java, PHP, Python, Go, Scala and Clojure, along with any language that runs on Linux via a third-party build pack.
|
||||
|
||||
<BadgeLink badgeText='Official Website' colorScheme='blue' href='https://www.heroku.com/'>Heroku Website</BadgeLink>
|
||||
<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://devcenter.heroku.com/'>Official Documentation</BadgeLink>
|
||||
<BadgeLink badgeText='Get Started Guide' colorScheme='blue' href='https://devcenter.heroku.com/start'>Heroku Get Started Guide</BadgeLink>
|
||||
|
||||
@@ -1 +1,7 @@
|
||||
# Digital ocean
|
||||
# DigitalOcean
|
||||
|
||||
DigitalOcean is a cloud computing service offering products and services in Compute, Storage, Managed Databases, Containers & Images and Networking.
|
||||
|
||||
<BadgeLink badgeText='Official Website' colorScheme='blue' href='https://www.digitalocean.com/'>DigitalOcean Website</BadgeLink>
|
||||
<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://docs.digitalocean.com/products/'>Official Documentation</BadgeLink>
|
||||
<BadgeLink badgeText='Get Started Guide' colorScheme='blue' href='https://docs.digitalocean.com/products/getting-started/'>DigitalOcean Get Started Guide</BadgeLink>
|
||||
|
||||
65
content/roadmaps/103-react/content-paths.json
Normal file
65
content/roadmaps/103-react/content-paths.json
Normal file
@@ -0,0 +1,65 @@
|
||||
{
|
||||
"home": "/roadmaps/103-react/content/readme.md",
|
||||
"react-advanced-ecosystem": "/roadmaps/103-react/content/react-advanced-ecosystem/readme.md",
|
||||
"react-advanced-ecosystem:hooks": "/roadmaps/103-react/content/react-advanced-ecosystem/100-hooks/readme.md",
|
||||
"react-advanced-ecosystem:hooks:common-hooks": "/roadmaps/103-react/content/react-advanced-ecosystem/100-hooks/102-common-hooks.md",
|
||||
"react-advanced-ecosystem:hooks:writing-your-own-hooks": "/roadmaps/103-react/content/react-advanced-ecosystem/100-hooks/101-writing-your-own-hooks.md",
|
||||
"react-advanced-ecosystem:context": "/roadmaps/103-react/content/react-advanced-ecosystem/101-context.md",
|
||||
"react-advanced-ecosystem:refs": "/roadmaps/103-react/content/react-advanced-ecosystem/102-refs.md",
|
||||
"react-advanced-ecosystem:render-props": "/roadmaps/103-react/content/react-advanced-ecosystem/103-render-props.md",
|
||||
"react-advanced-ecosystem:high-order-components": "/roadmaps/103-react/content/react-advanced-ecosystem/104-high-order-components.md",
|
||||
"react-advanced-ecosystem:portals": "/roadmaps/103-react/content/react-advanced-ecosystem/105-portals.md",
|
||||
"react-advanced-ecosystem:error-boundaries": "/roadmaps/103-react/content/react-advanced-ecosystem/106-error-boundaries.md",
|
||||
"react-advanced-ecosystem:fiber-architecture": "/roadmaps/103-react/content/react-advanced-ecosystem/107-fiber-architecture.md",
|
||||
"react-fundamental-topics": "/roadmaps/103-react/content/100-react-fundamental-topics/readme.md",
|
||||
"react-fundamental-topics:create-react-app": "/roadmaps/103-react/content/100-react-fundamental-topics/100-create-react-app.md",
|
||||
"react-fundamental-topics:jsx": "/roadmaps/103-react/content/100-react-fundamental-topics/101-jsx.md",
|
||||
"react-fundamental-topics:components": "/roadmaps/103-react/content/100-react-fundamental-topics/102-components/readme.md",
|
||||
"react-fundamental-topics:components:functional-components": "/roadmaps/103-react/content/100-react-fundamental-topics/102-components/100-functional-components.md",
|
||||
"react-fundamental-topics:components:class-components": "/roadmaps/103-react/content/100-react-fundamental-topics/102-components/101-class-components.md",
|
||||
"react-fundamental-topics:props-vs-state": "/roadmaps/103-react/content/100-react-fundamental-topics/103-props-vs-state.md",
|
||||
"react-fundamental-topics:conditional-rendering": "/roadmaps/103-react/content/100-react-fundamental-topics/104-conditional-rendering.md",
|
||||
"react-fundamental-topics:component-life-cycle": "/roadmaps/103-react/content/100-react-fundamental-topics/105-component-life-cycle.md",
|
||||
"react-fundamental-topics:lists-and-keys": "/roadmaps/103-react/content/100-react-fundamental-topics/106-lists-and-keys.md",
|
||||
"react-fundamental-topics:composition-vs-inheritance": "/roadmaps/103-react/content/100-react-fundamental-topics/107-composition-vs-inheritance.md",
|
||||
"react-fundamental-topics:basic-hooks": "/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/readme.md",
|
||||
"react-fundamental-topics:basic-hooks:use-state": "/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/100-use-state.md",
|
||||
"react-fundamental-topics:basic-hooks:use-effect": "/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/101-use-effect.md",
|
||||
"react-advanced-topics": "/roadmaps/103-react/content/101-react-advanced-topics.md",
|
||||
"react-ecosystem": "/roadmaps/103-react/content/102-react-ecosystem/readme.md",
|
||||
"react-ecosystem:routers": "/roadmaps/103-react/content/102-react-ecosystem/100-routers/readme.md",
|
||||
"react-ecosystem:routers:react-router": "/roadmaps/103-react/content/102-react-ecosystem/100-routers/100-react-router.md",
|
||||
"react-ecosystem:routers:reach-router": "/roadmaps/103-react/content/102-react-ecosystem/100-routers/101-reach-router.md",
|
||||
"react-ecosystem:ssr": "/roadmaps/103-react/content/102-react-ecosystem/101-ssr/readme.md",
|
||||
"react-ecosystem:ssr:next-js": "/roadmaps/103-react/content/102-react-ecosystem/101-ssr/100-next-js.md",
|
||||
"react-ecosystem:ssg": "/roadmaps/103-react/content/102-react-ecosystem/102-ssg/readme.md",
|
||||
"react-ecosystem:ssg:gatsby": "/roadmaps/103-react/content/102-react-ecosystem/102-ssg/101-gatsby.md",
|
||||
"react-ecosystem:api-calls": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/readme.md",
|
||||
"react-ecosystem:api-calls:react-query": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/100-react-query.md",
|
||||
"react-ecosystem:api-calls:use-http": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/101-use-http.md",
|
||||
"react-ecosystem:api-calls:apollo": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/102-apollo.md",
|
||||
"react-ecosystem:api-calls:relay-modern": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/103-relay-modern.md",
|
||||
"react-ecosystem:api-calls:axios": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/104-axios.md",
|
||||
"react-ecosystem:api-calls:unfetch": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/105-unfetch.md",
|
||||
"react-ecosystem:api-calls:superagent": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/106-superagent.md",
|
||||
"react-ecosystem:mobile": "/roadmaps/103-react/content/102-react-ecosystem/104-mobile/readme.md",
|
||||
"react-ecosystem:mobile:react-native": "/roadmaps/103-react/content/102-react-ecosystem/104-mobile/100-react-native.md",
|
||||
"react-ecosystem:forms": "/roadmaps/103-react/content/102-react-ecosystem/105-forms/readme.md",
|
||||
"react-ecosystem:forms:react-hook-form": "/roadmaps/103-react/content/102-react-ecosystem/105-forms/100-react-hook-form.md",
|
||||
"react-ecosystem:forms:formik": "/roadmaps/103-react/content/102-react-ecosystem/105-forms/101-formik.md",
|
||||
"react-ecosystem:forms:final-form": "/roadmaps/103-react/content/102-react-ecosystem/105-forms/102-final-form.md",
|
||||
"react-ecosystem:testing": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/readme.md",
|
||||
"react-ecosystem:testing:jest": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/100-jest.md",
|
||||
"react-ecosystem:testing:react-testing-library": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/101-react-testing-library.md",
|
||||
"react-ecosystem:testing:cypress": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/102-cypress.md",
|
||||
"react-ecosystem:state-management": "/roadmaps/103-react/content/102-react-ecosystem/107-state-management/readme.md",
|
||||
"react-ecosystem:state-management:conext-state": "/roadmaps/103-react/content/102-react-ecosystem/107-state-management/100-conext-state.md",
|
||||
"react-ecosystem:state-management:redux": "/roadmaps/103-react/content/102-react-ecosystem/107-state-management/101-redux.md",
|
||||
"react-ecosystem:state-management:mobx": "/roadmaps/103-react/content/102-react-ecosystem/107-state-management/102-mobx.md",
|
||||
"react-ecosystem:styling": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/readme.md",
|
||||
"react-ecosystem:styling:chakra-ui": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/100-chakra-ui.md",
|
||||
"react-ecosystem:styling:material-ui": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/101-material-ui.md",
|
||||
"react-ecosystem:styling:ant-design": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/102-ant-design.md",
|
||||
"react-ecosystem:styling:styled-components": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/103-styled-components.md",
|
||||
"react-ecosystem:styling:emotion": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/104-emotion.md"
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
# Create React App
|
||||
|
||||
Create React App is the CLI based tool and is the best way to start building a new single-page application in React.
|
||||
|
||||
It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 14.0.0 and npm >= 5.6 on your machine.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://create-react-app.dev/docs/getting-started'>Official Website</BadgeLink>
|
||||
@@ -0,0 +1,8 @@
|
||||
# JSX
|
||||
|
||||
JSX stands for JavaScript XML. It allows writing HTML in JavaScript and converts the HTML tags into React elements.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Introduction' href='https://reactjs.org/docs/introducing-jsx.html'>Introduction to JSX</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/jsx-in-react-introduction/'>JSX in React – Explained with Examples</BadgeLink>
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
# Functional Components
|
||||
|
||||
Functional components are some of the more common components that will come across while working in React. These are simply JavaScript functions. We can create a functional component to React by writing a JavaScript function. These functions may or may not receive data as parameters. In the functional Components, the return value is the JSX code to render to the DOM tree. Functional components can also have state which is managed using React hooks.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/components-and-props.html#function-and-class-components'>Components and Props</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.geeksforgeeks.org/reactjs-functional-components/'>ReactJS Functional Components</BadgeLink>
|
||||
@@ -0,0 +1,10 @@
|
||||
# Class Components
|
||||
|
||||
Components can either be created using the class based approach or a functional approach. These components are simple classes (made up of multiple functions that add functionality to the application). All class based components are child classes for the Component class of ReactJS.
|
||||
|
||||
Although the class components are supported in React, it is encouraged to write functional components and make use of hooks in modern React applications.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/components-and-props.html#function-and-class-components'>Components and Props</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://medium.com/geekculture/is-there-any-reason-to-still-use-react-class-components-9b6a1e6aa9ef'>Is There Any Reason to Still Use React Class Components?</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/functional-components-vs-class-components-in-react'>Functional Components vs Class Components in React</BadgeLink>
|
||||
@@ -0,0 +1,9 @@
|
||||
# Components
|
||||
|
||||
Components are the building blocks of React applications. They let us split the UI into independent, reusable pieces, and think about each piece in isolation.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/components-and-props.html'>Components and Props</BadgeLink>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/react-component.html'>Components in Depth</BadgeLink>
|
||||
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
# Props vs State
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://stackoverflow.com/questions/27991366/what-is-the-difference-between-state-and-props-in-react'>What is the difference between state and props in React?</BadgeLink>
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
# Conditional rendering
|
||||
@@ -0,0 +1 @@
|
||||
# Component life cycle
|
||||
@@ -0,0 +1 @@
|
||||
# Lists and keys
|
||||
@@ -0,0 +1 @@
|
||||
# Composition vs inheritance
|
||||
@@ -0,0 +1 @@
|
||||
# Use state
|
||||
@@ -0,0 +1 @@
|
||||
# Use effect
|
||||
@@ -0,0 +1 @@
|
||||
# Basic hooks
|
||||
@@ -0,0 +1,7 @@
|
||||
# React
|
||||
|
||||
React is a JavaScript library for building user interfaces. It is an open-source, component-based front end library responsible only for the view layer of the application.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://reactjs.org/'>Official Website</BadgeLink>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/getting-started.html'>Official Documentation</BadgeLink>
|
||||
@@ -0,0 +1 @@
|
||||
# React advanced topics
|
||||
@@ -0,0 +1 @@
|
||||
# React router
|
||||
@@ -0,0 +1 @@
|
||||
# Reach router
|
||||
@@ -0,0 +1 @@
|
||||
# Routers
|
||||
@@ -0,0 +1 @@
|
||||
# Next js
|
||||
@@ -0,0 +1 @@
|
||||
# Ssr
|
||||
@@ -0,0 +1 @@
|
||||
# Gatsby
|
||||
@@ -0,0 +1 @@
|
||||
# Ssg
|
||||
@@ -0,0 +1 @@
|
||||
# React query
|
||||
@@ -0,0 +1 @@
|
||||
# Use http
|
||||
@@ -0,0 +1 @@
|
||||
# Apollo
|
||||
@@ -0,0 +1 @@
|
||||
# Relay modern
|
||||
@@ -0,0 +1 @@
|
||||
# Axios
|
||||
@@ -0,0 +1 @@
|
||||
# Unfetch
|
||||
@@ -0,0 +1 @@
|
||||
# Superagent
|
||||
@@ -0,0 +1 @@
|
||||
# Api calls
|
||||
@@ -0,0 +1 @@
|
||||
# React native
|
||||
@@ -0,0 +1 @@
|
||||
# Mobile
|
||||
@@ -0,0 +1 @@
|
||||
# React hook form
|
||||
@@ -0,0 +1 @@
|
||||
# Formik
|
||||
@@ -0,0 +1 @@
|
||||
# Final form
|
||||
@@ -0,0 +1 @@
|
||||
# Forms
|
||||
@@ -0,0 +1 @@
|
||||
# Jest
|
||||
@@ -0,0 +1 @@
|
||||
# React testing library
|
||||
@@ -0,0 +1 @@
|
||||
# Cypress
|
||||
@@ -0,0 +1 @@
|
||||
# Testing
|
||||
@@ -0,0 +1 @@
|
||||
# Conext state
|
||||
@@ -0,0 +1 @@
|
||||
# Redux
|
||||
@@ -0,0 +1 @@
|
||||
# Mobx
|
||||
@@ -0,0 +1 @@
|
||||
# State management
|
||||
@@ -0,0 +1 @@
|
||||
# Chakra ui
|
||||
@@ -0,0 +1 @@
|
||||
# Material ui
|
||||
@@ -0,0 +1 @@
|
||||
# Ant design
|
||||
@@ -0,0 +1 @@
|
||||
# Styled components
|
||||
@@ -0,0 +1 @@
|
||||
# Emotion
|
||||
@@ -0,0 +1 @@
|
||||
# Styling
|
||||
@@ -0,0 +1 @@
|
||||
# React ecosystem
|
||||
@@ -0,0 +1 @@
|
||||
# Writing your own hooks
|
||||
@@ -0,0 +1 @@
|
||||
# Common hooks
|
||||
@@ -0,0 +1 @@
|
||||
# Hooks
|
||||
@@ -0,0 +1 @@
|
||||
# Context
|
||||
@@ -0,0 +1 @@
|
||||
# Refs
|
||||
@@ -0,0 +1 @@
|
||||
# Render props
|
||||
@@ -0,0 +1 @@
|
||||
# High order components
|
||||
@@ -0,0 +1 @@
|
||||
# Portals
|
||||
@@ -0,0 +1 @@
|
||||
# Error boundaries
|
||||
@@ -0,0 +1 @@
|
||||
# Fiber architecture
|
||||
@@ -0,0 +1 @@
|
||||
# React advanced ecosystem
|
||||
1
content/roadmaps/103-react/content/readme.md
Normal file
1
content/roadmaps/103-react/content/readme.md
Normal file
@@ -0,0 +1 @@
|
||||
#
|
||||
@@ -1,7 +0,0 @@
|
||||
The intent of this guide is to give you an idea about the React ecosystem and to help guide your learning if you are confused. We have another [roadmap on the Frontend Development](/frontend) that focuses on the frontend development if you are interested in that.
|
||||
|
||||
Also, please note that the list below is exhaustive, and the items are listed in no particular order. You don't need to learn everything listed in the picture, however knowing what you don't know is as important as knowing things.
|
||||
|
||||
|
||||
|
||||
Please note that the list is opinionated, and you might have different opinions than those of the author. Having said that, [we would love to hear your opinions](https://github.com/kamranahmedse/developer-roadmap/issues/new) and incorporate them in the picture if suitable.
|
||||
@@ -26,7 +26,6 @@
|
||||
"isTextHeavy": false,
|
||||
"isCommunity": false,
|
||||
"featured": true,
|
||||
"landingPath": "./landscape.md",
|
||||
"resourcesPath": "./resources.md",
|
||||
"jsonUrl": "/project/react.json",
|
||||
"versions": [
|
||||
@@ -38,5 +37,6 @@
|
||||
"name": "Kamran Ahmed",
|
||||
"url": "https://twitter.com/kamranahmedse"
|
||||
},
|
||||
"pdfUrl": "/pdfs/react.pdf"
|
||||
}
|
||||
"pdfUrl": "/pdfs/react.pdf",
|
||||
"contentPathsFilePath": "./content-paths.json"
|
||||
}
|
||||
70
content/roadmaps/105-vue/content-paths.json
Normal file
70
content/roadmaps/105-vue/content-paths.json
Normal file
@@ -0,0 +1,70 @@
|
||||
{
|
||||
"home": "/roadmaps/105-vue/content/readme.md",
|
||||
"fundamental-topics": "/roadmaps/105-vue/content/100-fundamental-topics/readme.md",
|
||||
"fundamental-topics:vue-cli": "/roadmaps/105-vue/content/100-fundamental-topics/100-vue-cli.md",
|
||||
"fundamental-topics:components": "/roadmaps/105-vue/content/100-fundamental-topics/101-components/readme.md",
|
||||
"fundamental-topics:components:single-file-components": "/roadmaps/105-vue/content/100-fundamental-topics/101-components/100-single-file-components.md",
|
||||
"fundamental-topics:components:component-registration": "/roadmaps/105-vue/content/100-fundamental-topics/101-components/101-component-registration.md",
|
||||
"fundamental-topics:components:props": "/roadmaps/105-vue/content/100-fundamental-topics/101-components/102-props.md",
|
||||
"fundamental-topics:components:events": "/roadmaps/105-vue/content/100-fundamental-topics/101-components/103-events.md",
|
||||
"fundamental-topics:components:attribute-inheritance": "/roadmaps/105-vue/content/100-fundamental-topics/101-components/104-attribute-inheritance.md",
|
||||
"fundamental-topics:templates": "/roadmaps/105-vue/content/100-fundamental-topics/102-templates.md",
|
||||
"fundamental-topics:directives": "/roadmaps/105-vue/content/100-fundamental-topics/103-directives.md",
|
||||
"fundamental-topics:api-styles": "/roadmaps/105-vue/content/100-fundamental-topics/104-api-styles/readme.md",
|
||||
"fundamental-topics:api-styles:options-api": "/roadmaps/105-vue/content/100-fundamental-topics/104-api-styles/100-options-api.md",
|
||||
"fundamental-topics:api-styles:composition-api": "/roadmaps/105-vue/content/100-fundamental-topics/104-api-styles/101-composition-api.md",
|
||||
"fundamental-topics:app-configurations": "/roadmaps/105-vue/content/100-fundamental-topics/105-app-configurations.md",
|
||||
"fundamental-topics:rendering-lists": "/roadmaps/105-vue/content/100-fundamental-topics/106-rendering-lists.md",
|
||||
"fundamental-topics:conditional-rendering": "/roadmaps/105-vue/content/100-fundamental-topics/107-conditional-rendering.md",
|
||||
"fundamental-topics:lifecycle-hooks": "/roadmaps/105-vue/content/100-fundamental-topics/108-lifecycle-hooks.md",
|
||||
"fundamental-topics:forms-handling": "/roadmaps/105-vue/content/100-fundamental-topics/109-forms-handling.md",
|
||||
"fundamental-topics:events-handling": "/roadmaps/105-vue/content/100-fundamental-topics/110-events-handling.md",
|
||||
"fundamental-topics:computed-properties": "/roadmaps/105-vue/content/100-fundamental-topics/111-computed-properties.md",
|
||||
"advanced-topics": "/roadmaps/105-vue/content/101-advanced-topics/readme.md",
|
||||
"advanced-topics:ref": "/roadmaps/105-vue/content/101-advanced-topics/100-ref.md",
|
||||
"advanced-topics:torefs": "/roadmaps/105-vue/content/101-advanced-topics/101-torefs.md",
|
||||
"advanced-topics:reactive": "/roadmaps/105-vue/content/101-advanced-topics/102-reactive.md",
|
||||
"advanced-topics:computed": "/roadmaps/105-vue/content/101-advanced-topics/103-computed.md",
|
||||
"advanced-topics:watch": "/roadmaps/105-vue/content/101-advanced-topics/104-watch.md",
|
||||
"advanced-topics:next-tick": "/roadmaps/105-vue/content/101-advanced-topics/105-next-tick.md",
|
||||
"advanced-topics:composables": "/roadmaps/105-vue/content/101-advanced-topics/106-composables.md",
|
||||
"advanced-topics:async-components": "/roadmaps/105-vue/content/101-advanced-topics/107-async-components.md",
|
||||
"advanced-topics:teleport-components": "/roadmaps/105-vue/content/101-advanced-topics/108-teleport-components.md",
|
||||
"advanced-topics:provide-inject": "/roadmaps/105-vue/content/101-advanced-topics/109-provide-inject.md",
|
||||
"advanced-topics:custom-directives": "/roadmaps/105-vue/content/101-advanced-topics/110-custom-directives.md",
|
||||
"advanced-topics:custom-events": "/roadmaps/105-vue/content/101-advanced-topics/111-custom-events.md",
|
||||
"advanced-topics:plugins": "/roadmaps/105-vue/content/101-advanced-topics/112-plugins.md",
|
||||
"advanced-topics:watchers": "/roadmaps/105-vue/content/101-advanced-topics/113-watchers.md",
|
||||
"advanced-topics:slots": "/roadmaps/105-vue/content/101-advanced-topics/114-slots.md",
|
||||
"advanced-topics:transition": "/roadmaps/105-vue/content/101-advanced-topics/115-transition.md",
|
||||
"advanced-topics:transition-group": "/roadmaps/105-vue/content/101-advanced-topics/116-transition-group.md",
|
||||
"ecosystem": "/roadmaps/105-vue/content/102-ecosystem/readme.md",
|
||||
"ecosystem:routing": "/roadmaps/105-vue/content/102-ecosystem/100-routing/readme.md",
|
||||
"ecosystem:routing:vue-router": "/roadmaps/105-vue/content/102-ecosystem/100-routing/100-vue-router.md",
|
||||
"ecosystem:forms": "/roadmaps/105-vue/content/102-ecosystem/101-forms/readme.md",
|
||||
"ecosystem:forms:vue-formulate": "/roadmaps/105-vue/content/102-ecosystem/101-forms/100-vue-formulate.md",
|
||||
"ecosystem:forms:vee-validate": "/roadmaps/105-vue/content/102-ecosystem/101-forms/101-vee-validate.md",
|
||||
"ecosystem:forms:vuelidate": "/roadmaps/105-vue/content/102-ecosystem/101-forms/102-vuelidate.md",
|
||||
"ecosystem:ssr": "/roadmaps/105-vue/content/102-ecosystem/102-ssr/readme.md",
|
||||
"ecosystem:ssr:quasar": "/roadmaps/105-vue/content/102-ecosystem/102-ssr/100-quasar.md",
|
||||
"ecosystem:ssr:nuxt-js": "/roadmaps/105-vue/content/102-ecosystem/102-ssr/101-nuxt-js.md",
|
||||
"ecosystem:ssg": "/roadmaps/105-vue/content/102-ecosystem/103-ssg/readme.md",
|
||||
"ecosystem:ssg:gridsome": "/roadmaps/105-vue/content/102-ecosystem/103-ssg/100-gridsome.md",
|
||||
"ecosystem:ssg:vuepress": "/roadmaps/105-vue/content/102-ecosystem/103-ssg/101-vuepress.md",
|
||||
"ecosystem:state-management": "/roadmaps/105-vue/content/102-ecosystem/104-state-management/readme.md",
|
||||
"ecosystem:state-management:pinia": "/roadmaps/105-vue/content/102-ecosystem/104-state-management/100-pinia.md",
|
||||
"ecosystem:mobile-apps": "/roadmaps/105-vue/content/102-ecosystem/105-mobile-apps/readme.md",
|
||||
"ecosystem:mobile-apps:capacitor": "/roadmaps/105-vue/content/102-ecosystem/105-mobile-apps/100-capacitor.md",
|
||||
"ecosystem:api-calls": "/roadmaps/105-vue/content/102-ecosystem/106-api-calls/readme.md",
|
||||
"ecosystem:api-calls:apollo": "/roadmaps/105-vue/content/102-ecosystem/106-api-calls/100-apollo.md",
|
||||
"ecosystem:api-calls:vue-relay": "/roadmaps/105-vue/content/102-ecosystem/106-api-calls/101-vue-relay.md",
|
||||
"ecosystem:api-calls:axios": "/roadmaps/105-vue/content/102-ecosystem/106-api-calls/102-axios.md",
|
||||
"ecosystem:api-calls:unfetch": "/roadmaps/105-vue/content/102-ecosystem/106-api-calls/103-unfetch.md",
|
||||
"ecosystem:api-calls:superagent": "/roadmaps/105-vue/content/102-ecosystem/106-api-calls/104-superagent.md",
|
||||
"ecosystem:jest": "/roadmaps/105-vue/content/102-ecosystem/107-jest.md",
|
||||
"ecosystem:vue-testing-library": "/roadmaps/105-vue/content/102-ecosystem/108-vue-testing-library.md",
|
||||
"ecosystem:cypress": "/roadmaps/105-vue/content/102-ecosystem/109-cypress.md",
|
||||
"ecosystem:tailwind-css": "/roadmaps/105-vue/content/102-ecosystem/110-tailwind-css.md",
|
||||
"ecosystem:vuetify": "/roadmaps/105-vue/content/102-ecosystem/111-vuetify.md",
|
||||
"ecosystem:element-ui": "/roadmaps/105-vue/content/102-ecosystem/112-element-ui.md"
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
# Vue CLI
|
||||
|
||||
Vue CLI is a full system for rapid Vue.js development, providing:
|
||||
|
||||
- Interactive project scaffolding via `@vue/cli`.
|
||||
- A runtime dependency (`@vue/cli-service`) that is:
|
||||
- Upgradeable;
|
||||
- Built on top of webpack, with sensible defaults;
|
||||
- Configurable via in-project config file;
|
||||
- Extensible via plugins
|
||||
- A rich collection of official plugins integrating the best tools in the frontend ecosystem.
|
||||
- A full graphical user interface to create and manage Vue.js projects.
|
||||
|
||||
Vue CLI aims to be the standard tooling baseline for the Vue ecosystem. It ensures the various build tools work smoothly together with sensible defaults so you can focus on writing your app instead of spending days wrangling with configurations. At the same time, it still offers the flexibility to tweak the config of each tool without the need for ejecting.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://cli.vuejs.org/guide/'>Vue CLI Guide</BadgeLink>
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
# Single File Components
|
||||
|
||||
Vue Single-File Components (a.k.a. `*.vue` files, abbreviated as SFC) is a special file format that allows us to encapsulate the template, logic, and styling of a Vue component in a single file.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://vuejs.org/guide/scaling-up/sfc.html'>Single File Components</BadgeLink>
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
# Component Registration
|
||||
|
||||
A Vue component needs to be "registered" so that Vue knows where to locate its implementation when it is encountered in a template. There are two ways to register components: global and local.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://vuejs.org/guide/components/registration.html'>Component Registration</BadgeLink>
|
||||
@@ -0,0 +1,11 @@
|
||||
# Props
|
||||
|
||||
If we are building a blog, we will likely need a component representing a blog post. We want all the blog posts to share the same visual layout, but with different content. Such a component won't be useful unless you can pass data to it, such as the title and content of the specific post we want to display. That's where props come in.
|
||||
|
||||
Props are custom attributes you can register on a component.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://vuejs.org/guide/essentials/component-basics.html#passing-props'>Props Basics</BadgeLink>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://vuejs.org/guide/components/props.html'>Props in Depth</BadgeLink>
|
||||
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
# Events
|
||||
|
||||
As we develop our applications we may need to communicate with the parent component in order to notify of some actions e.g. when a user clicks on a button. In order to do this we need to use events.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://vuejs.org/guide/essentials/component-basics.html#listening-to-events'>Listening to Events</BadgeLink>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://vuejs.org/guide/components/events.html'>Events in Detail</BadgeLink>
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
# Attribute Inheritance
|
||||
|
||||
Attribute inheritance aka "fallthrough attributes" is a feature of Vue.js that allows you to inherit attributes from a parent component.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://vuejs.org/guide/components/attrs.html'>Fallthrough Attributes</BadgeLink>
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
# Components
|
||||
|
||||
Components allow us to split the UI into independent and reusable pieces, and think about each piece in isolation.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://vuejs.org/guide/essentials/component-basics.html'>Components Basics</BadgeLink>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://vuejs.org/guide/components/registration.html'>Components in Depth</BadgeLink>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user