├── .github ├── CODEOWNERS ├── ISSUE_TEMPLATE │ ├── FEATURE.yml │ ├── FIX.yml │ └── config.yml └── PULL_REQUEST_TEMPLATE.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── images └── logo.png └── website ├── .gitignore ├── README.md ├── babel.config.js ├── blog ├── 2019-05-28-first-blog-post.md ├── 2019-05-29-long-blog-post.md ├── 2021-08-01-mdx-blog-post.mdx ├── 2021-08-26-welcome │ ├── docusaurus-plushie-banner.jpeg │ └── index.md └── authors.yml ├── docs ├── intro.md ├── tutorial-basics │ ├── _category_.json │ ├── congratulations.md │ ├── create-a-blog-post.md │ ├── create-a-document.md │ ├── create-a-page.md │ ├── deploy-your-site.md │ └── markdown-features.mdx └── tutorial-extras │ ├── _category_.json │ ├── img │ ├── docsVersionDropdown.png │ └── localeDropdown.png │ ├── manage-docs-versions.md │ └── translate-your-site.md ├── docusaurus.config.js ├── package-lock.json ├── package.json ├── sidebars.js ├── src ├── components │ └── HomepageFeatures │ │ ├── index.tsx │ │ └── styles.module.css ├── css │ └── custom.css └── pages │ ├── index.module.css │ ├── index.tsx │ └── markdown-page.md ├── static ├── .nojekyll └── img │ ├── docusaurus.png │ ├── favicon.ico │ ├── logo.svg │ ├── undraw_docusaurus_mountain.svg │ ├── undraw_docusaurus_react.svg │ └── undraw_docusaurus_tree.svg └── tsconfig.json /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | # This is a comment. 2 | # Each line is a file pattern followed by one or more owners. 3 | 4 | # These owners will be the default owners for everything in 5 | # the repo. Unless a later match takes precedence, 6 | # @global-owner1 and @global-owner2 will be requested for 7 | # review when someone opens a pull request. 8 | * @nabeel-shakeel @Sheraz064-ai 9 | 10 | # Order is important; the last matching pattern takes the most 11 | # precedence. When someone opens a pull request that only 12 | # modifies JS files, only @js-owner and not the global 13 | # owner(s) will be requested for a review. 14 | # *.js @js-owner 15 | 16 | # You can also use email addresses if you prefer. They'll be 17 | # used to look up users just like we do for commit author 18 | # emails. 19 | # *.go docs@example.com 20 | 21 | # Teams can be specified as code owners as well. Teams should 22 | # be identified in the format @org/team-name. Teams must have 23 | # explicit write access to the repository. In this example, 24 | # the octocats team in the octo-org organization owns all .txt files. 25 | # *.txt @octo-org/octocats 26 | 27 | # In this example, @doctocat owns any files in the build/logs 28 | # directory at the root of the repository and any of its 29 | # subdirectories. 30 | # /build/logs/ @doctocat 31 | 32 | # The `docs/*` pattern will match files like 33 | # `docs/getting-started.md` but not further nested files like 34 | # `docs/build-app/troubleshooting.md`. 35 | # docs/* docs@example.com 36 | 37 | # In this example, @octocat owns any file in an apps directory 38 | # anywhere in your repository. 39 | # apps/ @octocat 40 | 41 | # In this example, @doctocat owns any file in the `/docs` 42 | # directory in the root of your repository and any of its 43 | # subdirectories. 44 | # /docs/ @doctocat 45 | 46 | # In this example, any change inside the `/scripts` directory 47 | # will require approval from @doctocat or @octocat. 48 | # /scripts/ @doctocat @octocat 49 | 50 | # In this example, @octocat owns any file in the `/apps` 51 | # directory in the root of your repository except for the `/apps/github` 52 | # subdirectory, as its owners are left empty. 53 | # /apps/ @octocat 54 | # /apps/github -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/FEATURE.yml: -------------------------------------------------------------------------------- 1 | name: Feature Request 2 | description: Suggest a topic, expert or any idea for improving all-about-react 3 | title: "[Feature]: " 4 | labels: ["feature"] 5 | assignees: 6 | - nabeel-shakeel 7 | body: 8 | - type: markdown 9 | attributes: 10 | value: | 11 | Thanks for taking the time to fill out this feature request! To address this request as fast as possible, we need some information. 12 | - type: input 13 | id: contact 14 | attributes: 15 | label: Contact Details 16 | description: How can we get in touch with you if we need more info? 17 | placeholder: ex. nabeel.shakeel@techwards.co 18 | validations: 19 | required: false 20 | - type: dropdown 21 | id: feature_type 22 | attributes: 23 | label: Feature Type 24 | description: Select the feature type 25 | options: 26 | - Website Functionality 27 | - Documentation 28 | - CI/CD 29 | - Something else! 30 | validations: 31 | required: true 32 | - type: textarea 33 | id: description 34 | attributes: 35 | label: Description 36 | description: Provide a short description of what you are proposing 37 | placeholder: Give arguments for why the resource or expert should be included 38 | validations: 39 | required: true -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/FIX.yml: -------------------------------------------------------------------------------- 1 | name: Fix Report 2 | description: File a fix report 3 | title: "[Fix]: " 4 | labels: ["bug", "triage", "fix"] 5 | assignees: 6 | - nabeel-shakeel 7 | body: 8 | - type: markdown 9 | attributes: 10 | value: | 11 | Thanks for taking the time to fill out this fix report! To address this fix as fast as possible, we need some information 12 | - type: input 13 | id: contact 14 | attributes: 15 | label: Contact Details 16 | description: How can we get in touch with you if we need more info? 17 | placeholder: ex. nabeel.shakeel@techwards.co 18 | validations: 19 | required: false 20 | - type: textarea 21 | id: what-happened 22 | attributes: 23 | label: What happened? 24 | description: Also tell us, what did you expect to happen? 25 | placeholder: Tell us what you see! 26 | value: "A bug happened!" 27 | validations: 28 | required: true 29 | - type: markdown 30 | attributes: 31 | value: '## Screenshots' 32 | - type: markdown 33 | attributes: 34 | value: Add screenshot of bug or point to the portion where you want to fix -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: All About React Support 4 | url: https://github.com/Techwards/all-about-react/discussions/17 5 | about: Please ask and answer questions here. -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | ## Description 3 | This PR closes #ISSUE_NUMBER 4 | 5 | Changes proposed in this pull request: 6 | - Item 1 7 | - Item 2 8 | - Item 3 9 | 10 | ## Checklist 11 | - [ ] Make sure you are making a pull request against the **main branch** 12 | - [ ] Check the PR title and branch naming structure matched with our [guidelines](../CONTRIBUTING.md) 13 | - Please check the type of change your PR introduces: 14 | - [ ] New feature 15 | - [ ] Bug in content and documentation 16 | - [ ] Fix in content and documentation 17 | - [ ] Other changes 18 | 19 | ## Screenshots 20 | Add updated screenshots of `README.md` 21 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | * Demonstrating empathy and kindness toward other people 21 | * Being respectful of differing opinions, viewpoints, and experiences 22 | * Giving and gracefully accepting constructive feedback 23 | * Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | * Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | * The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | * Trolling, insulting or derogatory comments, and personal or political attacks 33 | * Public or private harassment 34 | * Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | * Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | nabeel.shakeel@techwards.co. 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Contributing 2 | You can contribute in the following ways: 3 | - Add a new react expert or topic 4 | - Suggest changes to the existing topic 5 | - Discuss ideas on github issues 6 | - Spread the word 7 | 8 | ## Guidelines 9 | - Adding everything about react is not the goal! 10 | - Right now we are focusing on the topics that are essential in every react project. 11 | - Do not add or suggest things you have not evaluated personally! 12 | - Do your research before suggesting any topic or expert. Give honest arguments for why the resource should be included. 13 | - One item per Pull Request 14 | - Adding one item like one topic or covering one expert per pull request makes it easy to maintain the repo. 15 | - Write meaningful commit messages 16 | - Look at the existing issues/pull requests before opening new ones 17 | 18 | ## Pull Request Protocols 19 | Please ensure your pull request adheres to the following guidelines: 20 | - For feature, follow this branch naming convention `feature-ISSUE_NUMBER-short-description-of-feature` 21 | - For example: `feature-1-contributor-guide-for-project` 22 | - For bug and doc update, follow `fix-ISSUE_NUMBER-short-description-of-fix` 23 | - PR title should follow the convention `Feature | ISSUE_NUMBER | Short Description Of Feature` 24 | - For example: `Feature | Issue #2 | Contributor Guide For Project` 25 | - For bugs and fixes, replace feature with `Fix` remaining will be the same 26 | - Keep PR descriptions short and simple 27 | - Link your PR with Github issue by using words `Closes #ISSUE_NUMBER` or `Fixes #ISSUE_NUMBER`, refer to this [doc](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword) 28 | - Make an individual pull request for each issue 29 | - Check your spelling and grammar 30 | 31 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Techwards 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 | 5 | Logo 6 | 7 |

All About React

8 |

9 | A curated list of react resources from industry experts 10 |

11 |
12 |
13 | 14 | 15 | 22 |
23 | 24 | [![Contributors][contributors-shield]][contributors-url] 25 | [![Forks][forks-shield]][forks-url] 26 | [![Stargazers][stars-shield]][stars-url] 27 | [![Issues][issues-shield]][issues-url] 28 | [![MIT License][license-shield]][license-url] 29 | 30 |
31 | 32 | 33 | ## About The Project 34 | This Project is created to help developers master their concepts and expertise in React by learning from articles, talks, and podcasts from industry experts in this domain. 35 | 36 | It serves as a curated list of React material and content to help in learning react in-depth and build a solid foundation of programming concepts. We organized the material topic-wise and categorized it into articles, talks, and podcasts for now. 37 | 38 | ![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/grass.png) 39 | 40 | 41 | ## Experts 42 | These are the react experts to whom content and resources we are referring 43 | 44 | 45 | 51 | 57 | 63 | 69 | 75 | 81 | 87 | 88 |
Andrew Clark
Andrew Clark
github handle  twitter handle 50 | 		Brian Vaughn
Brian Vaughn
github handle  twitter handle 56 | 		Dan Abramov
Dan Abramov
github handle  twitter handle 62 | 		Ryan Florence
Ryan Florence
github handle  twitter handle 68 | 		Kent C. Dodds
Kent C. Dodds
github handle  twitter handle 74 | 		Brad Westfall
Brad Westfall
github handle  twitter handle 80 | 		Michael Jackson
Michael Jackson
github handle  twitter handle 86 |
89 | 90 | ![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/grass.png) 91 | 92 | 93 | ## Table of Contents 94 | 95 | - **[State and Props](#state-and-props)** 96 | - **[Hooks](#hooks)** 97 | - [useState](#use-state) 98 | - [useEffect](#use-effect) 99 | - [useCallback](#use-callback) 100 | - [useContext](#use-context) 101 | - [useDebugValue](#use-debug-value) 102 | - [useDeferredValue](#use-deferred-value) 103 | - [useEvent](#use-event) 104 | - [useId](#use-id) 105 | - [useImperativeHandle](#use-imperative-handle) 106 | - [useInsertionEffect](#use-insertion-effect) 107 | - [useLayoutEffect](#use-layout-effect) 108 | - [useMemo](#use-memo) 109 | - [useReducer](#use-reducer) 110 | - [useRef](#use-ref) 111 | - [useSyncExternalStore](#use-sync-external-store) 112 | - [useTransition](#use-transition) 113 | - **[Routing](#routing)** 114 | - [React Router](#react-router) 115 | - **[Styling](#styling)** 116 | - [CSS-in-JS](#css-in-js) 117 | - [Inline Styling](#inline-styling) 118 | - [Styled Components](#styled-components) 119 | - [CSS Modules](#css-modules) 120 | - [React Router](#react-router) 121 | - [Tailwind CSS](#tailwind-css) 122 | - **[Global State Management](#global-state-management)** 123 | - [Redux](#redux) 124 | - [Recoil](#recoil) 125 | - [Jotai](#jotai) 126 | - [Rematch](#rematch) 127 | - [Hookstate](#hook-state) 128 | - [MobX](#mobx) 129 | - [Zustand](#zustand) 130 | - **[Data Fetching](#data-fetching)** 131 | - [React Query](#react-query) 132 | - [SWR](#swr) 133 | - [RTK Query](#rtk-query) 134 | - [Apollo](#apollo) 135 | - **[Rendering](#rendering)** 136 | - **[Patterns](#patterns)** 137 | - [Composition vs Inheritance](#com-vs-int) 138 | - [Custom Hooks](#custom-hooks) 139 | - [Compound Component Pattern](#cmd-comp-pattern) 140 | - [Composition Components vs Configuration Components](#cc-vs-cc) 141 | - **[Testing](#testing)** 142 | - [React Testing Library](#react-testing-library) 143 | - [Jest](#jest) 144 | - [Enzyme](#enzyme) 145 | - **[React in Typescript](#react-in-typescript)** 146 | - **[Server Side Rendering](#server-side-rendering)** 147 | - [React Dom Server](#react-dom-server) 148 | - [NextJS](#next-js) 149 | - [Remix](#remix) 150 | - [Gatsby](#gatsby) 151 | - **[Security](#security)** 152 | - [Cyber Attacks](#cyber-attacks) 153 | - [Vulnerabilities](#vulnerabilities) 154 | - [Best Practices](#sec-best-practices) 155 | - **[Architecture](#architecture)** 156 | - **[Toolchains](#toolchains)** 157 | - [Create React App](#create-react-app) 158 | - [Vite](#vite) 159 | - [Nx](#nx) 160 | - **[Dockerization](#dockerization)** 161 | 162 | ![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/grass.png) 163 | 164 | 165 | ## State and Props [🔝](#table-of-contents) 166 | 167 | ### Blogs and Articles 168 | - 📜 [You Probably Don't Need Derived State by Brian Vaughn](https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#when-to-use-derived-state) 169 | - 📜 [Props vs State by Kent C. Dodds](https://kentcdodds.com/blog/props-vs-state) 170 | - 📜 [Don't Sync State. Derive It by Kent C. Dodds](https://kentcdodds.com/blog/application-state-management-with-react) 171 | - 📜 [Application State Management with React by Kent C. Dodds](https://kentcdodds.com/blog/application-state-management-with-react) 172 | - 📜 [State Colocation will make your React app faster by Kent C. Dodds](https://kentcdodds.com/blog/understanding-reacts-key-prop) 173 | - 📜 [Understanding React's key prop by Kent C. Dodds](https://kentcdodds.com/blog/use-state-lazy-initialization-and-function-updates) 174 | - 📜 [useState lazy initialization and function updates by Kent C. Dodds](https://kentcdodds.com/blog/use-state-lazy-initialization-and-function-updates) 175 | - 📜 [Should I useState or useReducer? by Kent C. Dodds](https://kentcdodds.com/blog/should-i-usestate-or-usereducer) 176 | - 📜 [How to implement useState with useReducer by Kent C. Dodds](https://kentcdodds.com/blog/how-to-implement-usestate-with-usereducer) 177 | - 📜 [My State Management Mistake by Kent C. Dodds](https://epicreact.dev/my-state-management-mistake/) 178 | - 📜 [How To Use and Not Use State By Brad Westfall](https://reacttraining.com/blog/how-to-use-and-not-use-state/) 179 | - 📜 [How is state related to the declarative approach in React? by Brad Westfall](https://reacttraining.com/blog/state-and-the-declarative-approach/) 180 | 181 | ### Talks 182 | - 🎥 [Using Composition in React to Avoid "Prop Drilling" By Michael Jackson](https://www.youtube.com/watch?v=3XaXKiXtNjw) 183 | - 🎥 [The Actor Model: a new mental model for React by Farzad YousefZadeh](https://portal.gitnation.org/contents/the-actor-model-a-new-mental-model-for-react) 184 | - 🎥 [setState, We Need to Talk! by Nikhil Sharma](https://portal.gitnation.org/contents/setstate-we-need-to-talk) 185 | 186 | 187 | ## Hooks [🔝](#table-of-contents) 188 | 189 | ### Blogs and Articles 190 | - 📜 [Why Do React Hooks Rely on Call Order by Dan Abramov](https://overreacted.io/why-do-hooks-rely-on-call-order/) 191 | - 📜 [Before You memo() by Dan Abramov](https://overreacted.io/before-you-memo/) 192 | - 📜 [A Complete Guide to useEffect by Dan Abramov](https://overreacted.io/a-complete-guide-to-useeffect/) 193 | - 📜 [Synchronizing with Effects by Dan Abramov](https://beta.reactjs.org/learn/synchronizing-with-effects) 194 | - 📜 [Making setInterval Declarative with React Hooks by Dan Abramov](https://overreacted.io/making-setinterval-declarative-with-react-hooks/) 195 | - 📜 [Reconciling the useEffect Tree By Ryan Florence](https://reacttraining.com/blog/react-effect-tree/) 196 | - 📜 [Using Hooks in Classes By Ryan Florence](https://reacttraining.com/blog/using-hooks-in-classes/) 197 | - 📜 [useEffect vs useLayoutEffect by Kent C. Dodds](https://kentcdodds.com/blog/useeffect-vs-uselayouteffect) 198 | - 📜 [React Hooks: Compound Components by Kent C. Dodds](https://kentcdodds.com/blog/compound-components-with-react-hooks) 199 | - 📜 [5 Tips to Help You Avoid React Hooks Pitfalls by Kent C. Dodds](https://kentcdodds.com/blog/react-hooks-pitfalls) 200 | - 📜 [When to useMemo and useCallback by Kent C. Dodds](https://kentcdodds.com/blog/usememo-and-usecallback) 201 | - 📜 [Myths about useEffect by Kent C. Dodds](https://epicreact.dev/myths-about-useeffect/) 202 | - 📜 [useEffect(fn, []) is not the new componentDidMount() by Brad Westfall](https://reacttraining.com/blog/useEffect-is-not-the-new-componentDidMount/) 203 | - 📜 [When do I use functions in a Hooks Dependency Array? By Brad Westfall](https://reacttraining.com/blog/when-to-use-functions-in-hooks-dependency-array/) 204 | - 📜 [Wins for Hooks By Brad Westfall](https://reacttraining.com/blog/wins-for-hooks/) 205 | - 📜 [Blog Claps, and lessons on Hooks By Brad Westfall](https://reacttraining.com/blog/blog-claps-and-lessons-on-hooks/) 206 | 207 | ### Talks 208 | - 🎥 [React Today and Tomorrow and 90% Cleaner React With Hooks by Dan Abramov](https://www.youtube.com/watch?v=dpw9EHDh2bM&list=RDCMUCz5vTaEhvh7dOHEyd1efcaQ&start_radio=1&rv=dpw9EHDh2bM&t=4) 209 | - 🎥 [90% Cleaner React With Hooks by Ryan Florence](https://youtu.be/wXLf18DsV-I) 210 | - 🎥 [Fun with React Hooks by Michael Jackson and Ryan Florence](https://youtu.be/1jWS7cCuUXw) 211 | - 🎥 [Modern React Workshop: Hooks and Suspense (Part 1) by Kent C. Dodds](https://www.youtube.com/watch?v=xcZXS_VEJS0) 212 | - 🎥 [Modern React Workshop: Hooks and Suspense (Part 2) by Kent C. Dodds](https://www.youtube.com/watch?v=NKAfuguroRY) 213 | - 🎥 [Live with Kent: TypeScriptifying the "Advanced React Hooks" workshop by Kent C. Dodds](https://www.youtube.com/watch?v=wsTKYr2acl8) 214 | - 🎥 [React Hook Pitfalls - React Rally 2019 by Kent C. Dodds](https://www.youtube.com/watch?v=VIRcX2X7EUk) 215 | - 🎥 [React useEffect - What goes in the dependency array? What do functions sometimes go in the array? By Brad Westfall](https://www.youtube.com/watch?v=NbzDb15j_WU) 216 | - 🎥 [Composing Behavior in React or Why React Hooks are Awesome by Michael Jackson](https://www.youtube.com/watch?v=nUzLlHFVXx0) 217 | - 🎥 [Hooks are a great abstraction model by Calin Tamas](https://portal.gitnation.org/contents/hooks-are-a-great-abstraction-model) 218 | - 🎥 [We Don’t Know How React State Hooks Work by Adam Klein](https://portal.gitnation.org/contents/we-dont-know-how-react-state-hooks-work-456) 219 | - 🎥 [Don't Forget React Memo by Khrystyna Landvytovych](https://portal.gitnation.org/contents/dont-forget-react-memo) 220 | - 🎥 [Requisite React: Learn how to use React Hooks, Suspense & JSX by Kent C. Dodds](https://www.youtube.com/watch?v=tO8qHlr6Wqg&list=PLNBNS7NRGKMHLTeH4qfD3F320GXfj97kc&index=1) 221 | - 🎥 [React's Tackle Box, Using the Right Hooks for the Job by Bryan Pitt](https://www.youtube.com/watch?v=uDguyp13pl8) 222 | - 🎥 [Build Modern React apps with Hooks, Suspense, Context, and Firebase by Jeff Huleatt](https://www.youtube.com/watch?v=Mi9aKDcpRYA&list=PLNBNS7NRGKMH-zMH-MG7wSszTThAKFi3S&index=11) 223 | - 🎥 [The Psychological Effects of useEffect by Sara Vieira](https://www.youtube.com/watch?v=0Mfk9k1eXME) 224 | - 🎥 [React without memo by Xuan Huang](https://www.youtube.com/watch?v=lGEMwh32soc&t=404s) 225 | 226 | ### Podcasts 227 | - 🎙️ [Realigning Your Model of React After Hooks With Dan Abramov](https://kentcdodds.com/chats/01/03/realigning-your-model-of-react-after-hooks-with-dan-abramov) 228 | - 🎙️ [Trying React Hooks for the first time with Dan Abramov](https://www.youtube.com/watch?v=G-aO5hzo1aw) 229 | - 🎙️ [Hooks are Mixins with Ryan Florence](https://spec.fm/podcasts/reactpodcast/6495881a) 230 | 231 | ## Rendering [🔝](#table-of-contents) 232 | 233 | ### Blogs and Articles 234 | - 📜 [Introducing the React Profiler By Brian Vaughn](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) 235 | - 📜 [Introducing the New React DevTools By Brian Vaughn](https://reactjs.org/blog/2019/08/15/new-react-devtools.html) 236 | - 📜 [React Inline Functions And Performance By Ryan Florence](https://reacttraining.com/blog/react-inline-functions-and-performance/) 237 | - 📜 [React Context and Re-Renders: React Take the Wheel By Ryan Florence](https://medium.com/@ryanflorence/react-context-and-re-renders-react-take-the-wheel-cd1d20663647) 238 | - 📜 [Fix the slow render before you fix the re-render by Kent C. Dodds](https://kentcdodds.com/blog/fix-the-slow-render-before-you-fix-the-re-render) 239 | - 📜 [React: "mount" vs "render"? By Brad Westfall](https://reacttraining.com/blog/mount-vs-render/) 240 | - 📜 [Portals with Context By Brad Westfall](https://reacttraining.com/blog/portals-with-context/) 241 | - 📜 [Flow Control in React By Brad Westfall](https://reacttraining.com/blog/flow-control-in-react/) 242 | - 📜 [Use a render prop by Michael Jackson](https://reactjs.org/docs/render-props.html) 243 | 244 | ### Talks 245 | - 🎥 [Concurrent Rendering in React by Andrew Clark and Brian Vaughn](https://www.youtube.com/watch?v=ByBPyMBTzM0) 246 | - 🎥 [Creating More Efficient React Views with Windowing By Brian Vaughn](https://www.youtube.com/watch?v=t4tuhg7b50I) 247 | - 🎥 [React Developer tooling By Brian Vaughn](https://www.youtube.com/watch?v=Mjrfb1r3XEM) 248 | - 🎥 [React Developer Tooling React Conf 2021 By Brian Vaughn](https://www.youtube.com/watch?v=oxDfrke8rZg) 249 | - 🎥 [Playing with React suspense and DevTools By Brian Vaughn](https://www.youtube.com/watch?v=5RzOiibu8sg) 250 | - 🎥 [Deep dive with the React DevTools profiler By Brian Vaughn](https://www.youtube.com/watch?v=nySib7ipZdk) 251 | - 🎥 [Why The Form? Data Mutations on the Web - RenderATL 2022 by Ryan Florence](https://www.youtube.com/watch?v=CbW6gGfXUE8) 252 | - 🎥 [Never Write Another HoC by Michael Jackson](https://www.youtube.com/watch?v=BcVAq3YFiuc) 253 | - 🎥 [Road to a Better UX with Suspense and Concurrent UI by Nikhil Sharma](https://www.youtube.com/watch?v=mTCjvL3x04k) 254 | - 🎥 [Cracking the Concurrent Mode by Sudhanshu Yadav](https://portal.gitnation.org/contents/cracking-the-concurrent-mode) 255 | - 🎥 [Beyond Virtual Lists: How to Render 100K Items with 100s of Updates/sec in React by Michel Weststrate](https://portal.gitnation.org/contents/beyond-virtual-lists-how-to-render-100k-items-with-100s-of-updatessec-in-react) 256 | - 🎥 [The Worlds Most Expensive React Component and How to Stop Writing It by Michael Chan](https://portal.gitnation.org/contents/the-worlds-most-expensive-react-component-and-how-to-stop-writing-it) 257 | - 🎥 [Inside Fiber: the in-depth overview you wanted a TLDR for by Matheus Albuquerque](https://portal.gitnation.org/contents/inside-fiber-the-in-depth-overview-you-wanted-a-tldr-for) 258 | - 🎥 [Let's Talk about Re-renders by Nadia Makarevich](https://portal.gitnation.org/contents/lets-talk-about-re-renders) 259 | - 🎥 [React Advanced Keynote: Performance is magic by Ken Wheeler](https://www.youtube.com/watch?v=t8svxxtUTl8) 260 | - 🎥 [Track and increase speed of your apps by Jessica Leach](https://www.youtube.com/watch?v=vDXF7iGEGzo) 261 | - 🎥 [An Overview of React's Reconciliation Algorithm by Elad Tzemach](https://www.youtube.com/watch?v=3_g_kv1PWXI) 262 | 263 | ### Podcasts 264 | - 🎙️ [Decide with Your Human Brain, with Brian Vaughn. On the new React profiler, windowing, and intelligent performance tuning.](https://reactpodcast.com/episodes/37) 265 | - 🎙️ [Brian Vaughn on Fast Refresh for Web and Concurrent React Dev Tools](https://play.acast.com/s/the-react-podcast/dc1f412e-e108-4497-9c62-a152c21a488a) 266 | - 🎙️ [Brian Vaughn on Async Rendering System and New Component Lifecycle Methods](https://podcast.codingzeal.com/114820/696362-brian-vaughn-react-core-team-member) 267 | - 🎙️ [Michael Jackson on Async React with Andrew Clark](https://reactpodcast.com/6) 268 | 269 | ## Patterns [🔝](#table-of-contents) 270 | 271 | ### Blogs and Articles 272 | - 📜 [Advanced Element Composition in React by Ryan Florence](https://ryanflorence.dev/p/advanced-element-composition-in-react) 273 | - 📜 [The State Initializer Pattern by Kent C. Dodds](https://kentcdodds.com/blog/the-state-initializer-pattern) 274 | - 📜 [Advanced React Component Patterns by Kent C. Dodds](https://kentcdodds.com/blog/updated-advanced-react-component-patterns) 275 | - 📜 [The state reducer pattern by Kent C. Dodds](https://kentcdodds.com/blog/the-state-reducer-pattern) 276 | - 📜 [Stop using isLoading booleans by Kent C. Dodds](https://kentcdodds.com/blog/stop-using-isloading-booleans) 277 | - 📜 [Why you shouldn't put refs in a dependency array by Kent C. Dodds](https://epicreact.dev/why-you-shouldnt-put-refs-in-a-dependency-array/) 278 | - 📜 [The Latest Ref Pattern in React by Kent C. Dodds](https://epicreact.dev/the-latest-ref-pattern-in-react/) 279 | - 📜 [One React mistake that's slowing you down by Kent C. Dodds](https://epicreact.dev/one-react-mistake-thats-slowing-you-down/) 280 | - 📜 [Memoization and React by Kent C. Dodds](https://epicreact.dev/memoization-and-react/) 281 | 282 | ### Talks 283 | - 🎥 [When To Fetch: Remixing React Router by Ryan Florence](https://www.youtube.com/watch?v=95B8mnhzoCM) 284 | - 🎥 [The Curse Of React By Ryan Florence](https://www.youtube.com/watch?v=orq9XnHGTgQ) 285 | - 🎥 [Making The DOM Declarative by Michael Jackson](https://www.youtube.com/watch?v=vyO5wKHlWZg) 286 | - 🎥 [Components, Patterns and sh*t it's Hard to Deal with by Marco Cedaro](https://portal.gitnation.org/contents/components-patterns-and-sht-its-hard-to-deal-with) 287 | - 🎥 [Refactoring React: Which component pattern can improve your codebase? by Siddharth Kshetrapal](https://www.youtube.com/watch?v=2Dw8gA60d_k&list=PLNBNS7NRGKMHLTeH4qfD3F320GXfj97kc&index=3) 288 | - 🎥 [UI as API by Narendra Shetty](https://www.youtube.com/watch?v=VN43HsCU3qM) 289 | - 🎥 [How Many Ways to Say I'm Sorry, Error Handling in React by Jesse Martin](https://www.youtube.com/watch?v=ExC0N1XHaRQ) 290 | - 🎥 [Scalable React Development for Large Projects by Jason Jean](https://www.youtube.com/watch?v=Lr-u2ALSEQg) 291 | - 🎥 [Designing with Code in Mind by Elizabet Oliveira](https://www.youtube.com/watch?v=fYQoeaJMLjw) 292 | - 🎥 [Setting Up Feature Flags with React by Talia Nassi](https://www.youtube.com/watch?v=533cKBMyKWg) 293 | 294 | ### Podcasts 295 | - 🎙️ [Building Accessible UI Components by Ryan Florence](https://fullstackradio.com/97) 296 | 297 | ## Testing [🔝](#table-of-contents) 298 | 299 | ### Blogs and Articles 300 | - 📜 [Introducing the react-testing-library by Kent C. Dodds](https://kentcdodds.com/blog/introducing-the-react-testing-library) 301 | - 📜 [Static vs Unit vs Integration vs E2E Testing for Frontend Apps by Kent C. Dodds](https://kentcdodds.com/blog/static-vs-unit-vs-integration-vs-e2e-tests) 302 | - 📜 [React Hooks: What's going to happen to my tests? by Kent C. Dodds](https://kentcdodds.com/blog/react-hooks-whats-going-to-happen-to-my-tests) 303 | - 📜 [Common mistakes with React Testing Library by Kent C. Dodds](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library) 304 | - 📜 [How to test custom React hooks by Kent C. Dodds](https://kentcdodds.com/blog/how-to-test-custom-react-hooks) 305 | - 📜 [Testing Implementation Details by Kent C. Dodds](https://kentcdodds.com/blog/testing-implementation-details) 306 | - 📜 [Write fewer, longer tests by Kent C. Dodds](https://kentcdodds.com/blog/write-fewer-longer-tests) 307 | - 📜 [How to Test React.useEffect by Kent C. Dodds](https://epicreact.dev/how-to-test-react-use-effect/) 308 | 309 | ### Talks 310 | - 🎥 [Automating All the Code & Testing Things with GitHub Actions by Colby Fayock](https://portal.gitnation.org/contents/automating-all-the-code-and-testing-things-with-github-actions) 311 | - 🎥 [To Mock or Not to Mock - That's the Question by Rita Castro](https://portal.gitnation.org/contents/to-mock-or-not-to-mock-thats-the-question) 312 | - 🎥 [Don’t Let Your Unit Tests Slow You Down: Improve your front-end testing by Daniel Irvine](https://www.youtube.com/watch?v=1vDXRDQ9aJE&list=PLNBNS7NRGKMH7yfpYQD4TrFV25SMOCIPM&index=4) 313 | - 🎥 [Testing Is All About Principles by Alex Lobera](https://www.youtube.com/watch?v=xjP3Ll1UhEw) 314 | - 🎥 [BDD & TDD in React by Laura Beatris](https://www.youtube.com/watch?v=IbAiiHMD0Mg) 315 | - 🎥 [Write Tests. Generate UI. Profit! by Ed Bentley](https://www.youtube.com/watch?v=zy6qz5_CFc0) 316 | 317 | 318 | 319 | ## React in TypeScript [🔝](#table-of-contents) 320 | ### Blogs and Articles 321 | - 📜 [Wrapping React.useState with TypeScript by Kent C. Dodds](https://kentcdodds.com/blog/wrapping-react-use-state-with-type-script?ck_subscriber_id=363851721) 322 | - 📜 [How to write a React Component in TypeScript by Kent C. Dodds](https://kentcdodds.com/blog/how-to-write-a-react-component-in-typescript) 323 | 324 | ### Talks 325 | - 🎥 [TypeScript-ifying react-workshop-app by Kent C. Dodds](https://www.youtube.com/watch?v=3gGoV1TYmFk) 326 | - 🎥 [TypeScript-ifying EpicReact.dev workshops by Kent C. Dodds](https://www.youtube.com/watch?v=ouKooD-Afjo) 327 | - 🎥 [TypeScript-ifying the React Fundamentals workshop by Kent C. Dodds](https://www.youtube.com/watch?v=-p4RXvG9x-U) 328 | - 🎥 [TypeScript-ifying EpicReact.dev workshops by Kent C. Dodds](https://www.youtube.com/watch?v=N59_LYnf_SI) 329 | - 🎥 [TypeScriptifying the "Advanced React Hooks" workshop by Kent C. Dodds](https://www.youtube.com/watch?v=wsTKYr2acl8) 330 | 331 | ![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/grass.png) 332 | 333 | 334 | ## Contribution 335 | Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated!**. 336 | 337 | Please read the [contribution guidelines](CONTRIBUTING.md) first. 338 | 339 | ![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/grass.png) 340 | 341 | 342 | ## Maintainers 343 | 344 | 345 | 354 | 363 | 372 | 373 |
346 | Nabeel Shakeel
Nabeel Shakeel
347 | github handle   350 | linkedin handle 353 | 		355 | Sheraz Siddiqui
Sheraz Siddiqui
356 | github handle   359 | linkedin handle 362 | 		364 | Muhammad Abdullah
Muhammad Abdullah
365 | github handle   368 | linkedin handle 371 |
374 | 375 | ![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/grass.png) 376 | 377 | 378 | ## Star 379 | Don't forget to hit the ⭐, If you like this repository. 380 | 381 | ![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/grass.png) 382 | 383 | 384 | ## License 385 | Distributed under the MIT License. See `LICENSE` for more information. 386 | 387 | ![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/grass.png) 388 | 389 | 390 | 391 | 392 | [contributors-shield]: https://img.shields.io/github/contributors/Techwards/all-about-react.svg?style=for-the-badge 393 | [contributors-url]: https://github.com/Techwards/all-about-react/graphs/contributors 394 | [forks-shield]: https://img.shields.io/github/forks/Techwards/all-about-react.svg?style=for-the-badge 395 | [forks-url]: https://github.com/Techwards/all-about-react/network/members 396 | [stars-shield]: https://img.shields.io/github/stars/Techwards/all-about-react.svg?style=for-the-badge 397 | [stars-url]: https://github.com/Techwards/all-about-react/stargazers 398 | [issues-shield]: https://img.shields.io/github/issues/Techwards/all-about-react?style=for-the-badge 399 | [issues-url]: https://github.com/Techwards/all-about-react/issues 400 | [license-shield]: https://img.shields.io/github/license/Techwards/all-about-react?style=for-the-badge 401 | [license-url]: https://github.com/Techwards/all-about-react 402 | [good-first-issue-shield]: https://img.shields.io/github/labels/Techwards/all-about-react/good%20first%20issue?style=for-the-badge 403 | [good-first-issues]: https://github.com/Techwards/all-about-react/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22 -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techwards/all-about-react/9caeb052552e45bece9e66fdf5ffc44045ef8dcf/images/logo.png -------------------------------------------------------------------------------- /website/.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | /node_modules 3 | 4 | # Production 5 | /build 6 | 7 | # Generated files 8 | .docusaurus 9 | .cache-loader 10 | 11 | # Misc 12 | .DS_Store 13 | .env.local 14 | .env.development.local 15 | .env.test.local 16 | .env.production.local 17 | 18 | npm-debug.log* 19 | yarn-debug.log* 20 | yarn-error.log* 21 | -------------------------------------------------------------------------------- /website/README.md: -------------------------------------------------------------------------------- 1 | # Website 2 | 3 | This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator. 4 | 5 | ### Installation 6 | 7 | ``` 8 | $ yarn 9 | ``` 10 | 11 | ### Local Development 12 | 13 | ``` 14 | $ yarn start 15 | ``` 16 | 17 | This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server. 18 | 19 | ### Build 20 | 21 | ``` 22 | $ yarn build 23 | ``` 24 | 25 | This command generates static content into the `build` directory and can be served using any static contents hosting service. 26 | 27 | ### Deployment 28 | 29 | Using SSH: 30 | 31 | ``` 32 | $ USE_SSH=true yarn deploy 33 | ``` 34 | 35 | Not using SSH: 36 | 37 | ``` 38 | $ GIT_USER= yarn deploy 39 | ``` 40 | 41 | If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch. 42 | -------------------------------------------------------------------------------- /website/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [require.resolve('@docusaurus/core/lib/babel/preset')], 3 | }; 4 | -------------------------------------------------------------------------------- /website/blog/2019-05-28-first-blog-post.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: first-blog-post 3 | title: First Blog Post 4 | authors: 5 | name: Gao Wei 6 | title: Docusaurus Core Team 7 | url: https://github.com/wgao19 8 | image_url: https://github.com/wgao19.png 9 | tags: [hola, docusaurus] 10 | --- 11 | 12 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 13 | -------------------------------------------------------------------------------- /website/blog/2019-05-29-long-blog-post.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: long-blog-post 3 | title: Long Blog Post 4 | authors: endi 5 | tags: [hello, docusaurus] 6 | --- 7 | 8 | This is the summary of a very long blog post, 9 | 10 | Use a `` comment to limit blog post size in the list view. 11 | 12 | 13 | 14 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 15 | 16 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 17 | 18 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 19 | 20 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 21 | 22 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 23 | 24 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 25 | 26 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 27 | 28 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 29 | 30 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 31 | 32 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 33 | 34 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 35 | 36 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 37 | 38 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 39 | 40 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 41 | 42 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 43 | 44 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 45 | -------------------------------------------------------------------------------- /website/blog/2021-08-01-mdx-blog-post.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | slug: mdx-blog-post 3 | title: MDX Blog Post 4 | authors: [slorber] 5 | tags: [docusaurus] 6 | --- 7 | 8 | Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/). 9 | 10 | :::tip 11 | 12 | Use the power of React to create interactive blog posts. 13 | 14 | ```js 15 | 16 | ``` 17 | 18 | 19 | 20 | ::: 21 | -------------------------------------------------------------------------------- /website/blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techwards/all-about-react/9caeb052552e45bece9e66fdf5ffc44045ef8dcf/website/blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg -------------------------------------------------------------------------------- /website/blog/2021-08-26-welcome/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: welcome 3 | title: Welcome 4 | authors: [slorber, yangshun] 5 | tags: [facebook, hello, docusaurus] 6 | --- 7 | 8 | [Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog). 9 | 10 | Simply add Markdown files (or folders) to the `blog` directory. 11 | 12 | Regular blog authors can be added to `authors.yml`. 13 | 14 | The blog post date can be extracted from filenames, such as: 15 | 16 | - `2019-05-30-welcome.md` 17 | - `2019-05-30-welcome/index.md` 18 | 19 | A blog post folder can be convenient to co-locate blog post images: 20 | 21 | ![Docusaurus Plushie](./docusaurus-plushie-banner.jpeg) 22 | 23 | The blog supports tags as well! 24 | 25 | **And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config. 26 | -------------------------------------------------------------------------------- /website/blog/authors.yml: -------------------------------------------------------------------------------- 1 | endi: 2 | name: Endilie Yacop Sucipto 3 | title: Maintainer of Docusaurus 4 | url: https://github.com/endiliey 5 | image_url: https://github.com/endiliey.png 6 | 7 | yangshun: 8 | name: Yangshun Tay 9 | title: Front End Engineer @ Facebook 10 | url: https://github.com/yangshun 11 | image_url: https://github.com/yangshun.png 12 | 13 | slorber: 14 | name: Sébastien Lorber 15 | title: Docusaurus maintainer 16 | url: https://sebastienlorber.com 17 | image_url: https://github.com/slorber.png 18 | -------------------------------------------------------------------------------- /website/docs/intro.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Tutorial Intro 6 | 7 | Let's discover **Docusaurus in less than 5 minutes**. 8 | 9 | ## Getting Started 10 | 11 | Get started by **creating a new site**. 12 | 13 | Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**. 14 | 15 | ### What you'll need 16 | 17 | - [Node.js](https://nodejs.org/en/download/) version 16.14 or above: 18 | - When installing Node.js, you are recommended to check all checkboxes related to dependencies. 19 | 20 | ## Generate a new site 21 | 22 | Generate a new Docusaurus site using the **classic template**. 23 | 24 | The classic template will automatically be added to your project after you run the command: 25 | 26 | ```bash 27 | npm init docusaurus@latest my-website classic 28 | ``` 29 | 30 | You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor. 31 | 32 | The command also installs all necessary dependencies you need to run Docusaurus. 33 | 34 | ## Start your site 35 | 36 | Run the development server: 37 | 38 | ```bash 39 | cd my-website 40 | npm run start 41 | ``` 42 | 43 | The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there. 44 | 45 | The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/. 46 | 47 | Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes. 48 | -------------------------------------------------------------------------------- /website/docs/tutorial-basics/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Tutorial - Basics", 3 | "position": 2, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "5 minutes to learn the most important Docusaurus concepts." 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /website/docs/tutorial-basics/congratulations.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 6 3 | --- 4 | 5 | # Congratulations! 6 | 7 | You have just learned the **basics of Docusaurus** and made some changes to the **initial template**. 8 | 9 | Docusaurus has **much more to offer**! 10 | 11 | Have **5 more minutes**? Take a look at **[versioning](../tutorial-extras/manage-docs-versions.md)** and **[i18n](../tutorial-extras/translate-your-site.md)**. 12 | 13 | Anything **unclear** or **buggy** in this tutorial? [Please report it!](https://github.com/facebook/docusaurus/discussions/4610) 14 | 15 | ## What's next? 16 | 17 | - Read the [official documentation](https://docusaurus.io/) 18 | - Modify your site configuration with [`docusaurus.config.js`](https://docusaurus.io/docs/api/docusaurus-config) 19 | - Add navbar and footer items with [`themeConfig`](https://docusaurus.io/docs/api/themes/configuration) 20 | - Add a custom [Design and Layout](https://docusaurus.io/docs/styling-layout) 21 | - Add a [search bar](https://docusaurus.io/docs/search) 22 | - Find inspirations in the [Docusaurus showcase](https://docusaurus.io/showcase) 23 | - Get involved in the [Docusaurus Community](https://docusaurus.io/community/support) 24 | -------------------------------------------------------------------------------- /website/docs/tutorial-basics/create-a-blog-post.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 3 3 | --- 4 | 5 | # Create a Blog Post 6 | 7 | Docusaurus creates a **page for each blog post**, but also a **blog index page**, a **tag system**, an **RSS** feed... 8 | 9 | ## Create your first Post 10 | 11 | Create a file at `blog/2021-02-28-greetings.md`: 12 | 13 | ```md title="blog/2021-02-28-greetings.md" 14 | --- 15 | slug: greetings 16 | title: Greetings! 17 | authors: 18 | - name: Joel Marcey 19 | title: Co-creator of Docusaurus 1 20 | url: https://github.com/JoelMarcey 21 | image_url: https://github.com/JoelMarcey.png 22 | - name: Sébastien Lorber 23 | title: Docusaurus maintainer 24 | url: https://sebastienlorber.com 25 | image_url: https://github.com/slorber.png 26 | tags: [greetings] 27 | --- 28 | 29 | Congratulations, you have made your first post! 30 | 31 | Feel free to play around and edit this post as much you like. 32 | ``` 33 | 34 | A new blog post is now available at [http://localhost:3000/blog/greetings](http://localhost:3000/blog/greetings). 35 | -------------------------------------------------------------------------------- /website/docs/tutorial-basics/create-a-document.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Create a Document 6 | 7 | Documents are **groups of pages** connected through: 8 | 9 | - a **sidebar** 10 | - **previous/next navigation** 11 | - **versioning** 12 | 13 | ## Create your first Doc 14 | 15 | Create a Markdown file at `docs/hello.md`: 16 | 17 | ```md title="docs/hello.md" 18 | # Hello 19 | 20 | This is my **first Docusaurus document**! 21 | ``` 22 | 23 | A new document is now available at [http://localhost:3000/docs/hello](http://localhost:3000/docs/hello). 24 | 25 | ## Configure the Sidebar 26 | 27 | Docusaurus automatically **creates a sidebar** from the `docs` folder. 28 | 29 | Add metadata to customize the sidebar label and position: 30 | 31 | ```md title="docs/hello.md" {1-4} 32 | --- 33 | sidebar_label: 'Hi!' 34 | sidebar_position: 3 35 | --- 36 | 37 | # Hello 38 | 39 | This is my **first Docusaurus document**! 40 | ``` 41 | 42 | It is also possible to create your sidebar explicitly in `sidebars.js`: 43 | 44 | ```js title="sidebars.js" 45 | module.exports = { 46 | tutorialSidebar: [ 47 | 'intro', 48 | // highlight-next-line 49 | 'hello', 50 | { 51 | type: 'category', 52 | label: 'Tutorial', 53 | items: ['tutorial-basics/create-a-document'], 54 | }, 55 | ], 56 | }; 57 | ``` 58 | -------------------------------------------------------------------------------- /website/docs/tutorial-basics/create-a-page.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Create a Page 6 | 7 | Add **Markdown or React** files to `src/pages` to create a **standalone page**: 8 | 9 | - `src/pages/index.js` → `localhost:3000/` 10 | - `src/pages/foo.md` → `localhost:3000/foo` 11 | - `src/pages/foo/bar.js` → `localhost:3000/foo/bar` 12 | 13 | ## Create your first React Page 14 | 15 | Create a file at `src/pages/my-react-page.js`: 16 | 17 | ```jsx title="src/pages/my-react-page.js" 18 | import React from 'react'; 19 | import Layout from '@theme/Layout'; 20 | 21 | export default function MyReactPage() { 22 | return ( 23 | 24 |

My React page

25 |

This is a React page

26 | 27 | ); 28 | } 29 | ``` 30 | 31 | A new page is now available at [http://localhost:3000/my-react-page](http://localhost:3000/my-react-page). 32 | 33 | ## Create your first Markdown Page 34 | 35 | Create a file at `src/pages/my-markdown-page.md`: 36 | 37 | ```mdx title="src/pages/my-markdown-page.md" 38 | # My Markdown page 39 | 40 | This is a Markdown page 41 | ``` 42 | 43 | A new page is now available at [http://localhost:3000/my-markdown-page](http://localhost:3000/my-markdown-page). 44 | -------------------------------------------------------------------------------- /website/docs/tutorial-basics/deploy-your-site.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 5 3 | --- 4 | 5 | # Deploy your site 6 | 7 | Docusaurus is a **static-site-generator** (also called **[Jamstack](https://jamstack.org/)**). 8 | 9 | It builds your site as simple **static HTML, JavaScript and CSS files**. 10 | 11 | ## Build your site 12 | 13 | Build your site **for production**: 14 | 15 | ```bash 16 | npm run build 17 | ``` 18 | 19 | The static files are generated in the `build` folder. 20 | 21 | ## Deploy your site 22 | 23 | Test your production build locally: 24 | 25 | ```bash 26 | npm run serve 27 | ``` 28 | 29 | The `build` folder is now served at [http://localhost:3000/](http://localhost:3000/). 30 | 31 | You can now deploy the `build` folder **almost anywhere** easily, **for free** or very small cost (read the **[Deployment Guide](https://docusaurus.io/docs/deployment)**). 32 | -------------------------------------------------------------------------------- /website/docs/tutorial-basics/markdown-features.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 4 3 | --- 4 | 5 | # Markdown Features 6 | 7 | Docusaurus supports **[Markdown](https://daringfireball.net/projects/markdown/syntax)** and a few **additional features**. 8 | 9 | ## Front Matter 10 | 11 | Markdown documents have metadata at the top called [Front Matter](https://jekyllrb.com/docs/front-matter/): 12 | 13 | ```text title="my-doc.md" 14 | // highlight-start 15 | --- 16 | id: my-doc-id 17 | title: My document title 18 | description: My document description 19 | slug: /my-custom-url 20 | --- 21 | // highlight-end 22 | 23 | ## Markdown heading 24 | 25 | Markdown text with [links](./hello.md) 26 | ``` 27 | 28 | ## Links 29 | 30 | Regular Markdown links are supported, using url paths or relative file paths. 31 | 32 | ```md 33 | Let's see how to [Create a page](/create-a-page). 34 | ``` 35 | 36 | ```md 37 | Let's see how to [Create a page](./create-a-page.md). 38 | ``` 39 | 40 | **Result:** Let's see how to [Create a page](./create-a-page.md). 41 | 42 | ## Images 43 | 44 | Regular Markdown images are supported. 45 | 46 | You can use absolute paths to reference images in the static directory (`static/img/docusaurus.png`): 47 | 48 | ```md 49 | ![Docusaurus logo](/img/docusaurus.png) 50 | ``` 51 | 52 | ![Docusaurus logo](/img/docusaurus.png) 53 | 54 | You can reference images relative to the current file as well, as shown in [the extra guides](../tutorial-extras/manage-docs-versions.md). 55 | 56 | ## Code Blocks 57 | 58 | Markdown code blocks are supported with Syntax highlighting. 59 | 60 | ```jsx title="src/components/HelloDocusaurus.js" 61 | function HelloDocusaurus() { 62 | return ( 63 |

Hello, Docusaurus!

64 | ) 65 | } 66 | ``` 67 | 68 | ```jsx title="src/components/HelloDocusaurus.js" 69 | function HelloDocusaurus() { 70 | return

Hello, Docusaurus!

; 71 | } 72 | ``` 73 | 74 | ## Admonitions 75 | 76 | Docusaurus has a special syntax to create admonitions and callouts: 77 | 78 | :::tip My tip 79 | 80 | Use this awesome feature option 81 | 82 | ::: 83 | 84 | :::danger Take care 85 | 86 | This action is dangerous 87 | 88 | ::: 89 | 90 | :::tip My tip 91 | 92 | Use this awesome feature option 93 | 94 | ::: 95 | 96 | :::danger Take care 97 | 98 | This action is dangerous 99 | 100 | ::: 101 | 102 | ## MDX and React Components 103 | 104 | [MDX](https://mdxjs.com/) can make your documentation more **interactive** and allows using any **React components inside Markdown**: 105 | 106 | ```jsx 107 | export const Highlight = ({children, color}) => ( 108 | { 117 | alert(`You clicked the color ${color} with label ${children}`) 118 | }}> 119 | {children} 120 | 121 | ); 122 | 123 | This is Docusaurus green ! 124 | 125 | This is Facebook blue ! 126 | ``` 127 | 128 | export const Highlight = ({children, color}) => ( 129 | { 138 | alert(`You clicked the color ${color} with label ${children}`); 139 | }}> 140 | {children} 141 | 142 | ); 143 | 144 | This is Docusaurus green ! 145 | 146 | This is Facebook blue ! 147 | -------------------------------------------------------------------------------- /website/docs/tutorial-extras/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Tutorial - Extras", 3 | "position": 3, 4 | "link": { 5 | "type": "generated-index" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /website/docs/tutorial-extras/img/docsVersionDropdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techwards/all-about-react/9caeb052552e45bece9e66fdf5ffc44045ef8dcf/website/docs/tutorial-extras/img/docsVersionDropdown.png -------------------------------------------------------------------------------- /website/docs/tutorial-extras/img/localeDropdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techwards/all-about-react/9caeb052552e45bece9e66fdf5ffc44045ef8dcf/website/docs/tutorial-extras/img/localeDropdown.png -------------------------------------------------------------------------------- /website/docs/tutorial-extras/manage-docs-versions.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Manage Docs Versions 6 | 7 | Docusaurus can manage multiple versions of your docs. 8 | 9 | ## Create a docs version 10 | 11 | Release a version 1.0 of your project: 12 | 13 | ```bash 14 | npm run docusaurus docs:version 1.0 15 | ``` 16 | 17 | The `docs` folder is copied into `versioned_docs/version-1.0` and `versions.json` is created. 18 | 19 | Your docs now have 2 versions: 20 | 21 | - `1.0` at `http://localhost:3000/docs/` for the version 1.0 docs 22 | - `current` at `http://localhost:3000/docs/next/` for the **upcoming, unreleased docs** 23 | 24 | ## Add a Version Dropdown 25 | 26 | To navigate seamlessly across versions, add a version dropdown. 27 | 28 | Modify the `docusaurus.config.js` file: 29 | 30 | ```js title="docusaurus.config.js" 31 | module.exports = { 32 | themeConfig: { 33 | navbar: { 34 | items: [ 35 | // highlight-start 36 | { 37 | type: 'docsVersionDropdown', 38 | }, 39 | // highlight-end 40 | ], 41 | }, 42 | }, 43 | }; 44 | ``` 45 | 46 | The docs version dropdown appears in your navbar: 47 | 48 | ![Docs Version Dropdown](./img/docsVersionDropdown.png) 49 | 50 | ## Update an existing version 51 | 52 | It is possible to edit versioned docs in their respective folder: 53 | 54 | - `versioned_docs/version-1.0/hello.md` updates `http://localhost:3000/docs/hello` 55 | - `docs/hello.md` updates `http://localhost:3000/docs/next/hello` 56 | -------------------------------------------------------------------------------- /website/docs/tutorial-extras/translate-your-site.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Translate your site 6 | 7 | Let's translate `docs/intro.md` to French. 8 | 9 | ## Configure i18n 10 | 11 | Modify `docusaurus.config.js` to add support for the `fr` locale: 12 | 13 | ```js title="docusaurus.config.js" 14 | module.exports = { 15 | i18n: { 16 | defaultLocale: 'en', 17 | locales: ['en', 'fr'], 18 | }, 19 | }; 20 | ``` 21 | 22 | ## Translate a doc 23 | 24 | Copy the `docs/intro.md` file to the `i18n/fr` folder: 25 | 26 | ```bash 27 | mkdir -p i18n/fr/docusaurus-plugin-content-docs/current/ 28 | 29 | cp docs/intro.md i18n/fr/docusaurus-plugin-content-docs/current/intro.md 30 | ``` 31 | 32 | Translate `i18n/fr/docusaurus-plugin-content-docs/current/intro.md` in French. 33 | 34 | ## Start your localized site 35 | 36 | Start your site on the French locale: 37 | 38 | ```bash 39 | npm run start -- --locale fr 40 | ``` 41 | 42 | Your localized site is accessible at [http://localhost:3000/fr/](http://localhost:3000/fr/) and the `Getting Started` page is translated. 43 | 44 | :::caution 45 | 46 | In development, you can only use one locale at a same time. 47 | 48 | ::: 49 | 50 | ## Add a Locale Dropdown 51 | 52 | To navigate seamlessly across languages, add a locale dropdown. 53 | 54 | Modify the `docusaurus.config.js` file: 55 | 56 | ```js title="docusaurus.config.js" 57 | module.exports = { 58 | themeConfig: { 59 | navbar: { 60 | items: [ 61 | // highlight-start 62 | { 63 | type: 'localeDropdown', 64 | }, 65 | // highlight-end 66 | ], 67 | }, 68 | }, 69 | }; 70 | ``` 71 | 72 | The locale dropdown now appears in your navbar: 73 | 74 | ![Locale Dropdown](./img/localeDropdown.png) 75 | 76 | ## Build your localized site 77 | 78 | Build your site for a specific locale: 79 | 80 | ```bash 81 | npm run build -- --locale fr 82 | ``` 83 | 84 | Or build your site to include all the locales at once: 85 | 86 | ```bash 87 | npm run build 88 | ``` 89 | -------------------------------------------------------------------------------- /website/docusaurus.config.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | // Note: type annotations allow type checking and IDEs autocompletion 3 | 4 | const lightCodeTheme = require('prism-react-renderer/themes/github'); 5 | const darkCodeTheme = require('prism-react-renderer/themes/dracula'); 6 | 7 | /** @type {import('@docusaurus/types').Config} */ 8 | const config = { 9 | title: 'All About React', 10 | tagline: 'A curated list of react resources from industry experts', 11 | url: 'https://your-docusaurus-test-site.com', 12 | baseUrl: '/', 13 | onBrokenLinks: 'throw', 14 | onBrokenMarkdownLinks: 'warn', 15 | favicon: 'img/favicon.ico', 16 | 17 | // GitHub pages deployment config. 18 | // If you aren't using GitHub pages, you don't need these. 19 | organizationName: 'facebook', // Usually your GitHub org/user name. 20 | projectName: 'docusaurus', // Usually your repo name. 21 | 22 | // Even if you don't use internalization, you can use this field to set useful 23 | // metadata like html lang. For example, if your site is Chinese, you may want 24 | // to replace "en" with "zh-Hans". 25 | i18n: { 26 | defaultLocale: 'en', 27 | locales: ['en'], 28 | }, 29 | 30 | presets: [ 31 | [ 32 | 'classic', 33 | /** @type {import('@docusaurus/preset-classic').Options} */ 34 | ({ 35 | docs: { 36 | sidebarPath: require.resolve('./sidebars.js'), 37 | // Please change this to your repo. 38 | // Remove this to remove the "edit this page" links. 39 | editUrl: 40 | 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/', 41 | }, 42 | blog: { 43 | showReadingTime: true, 44 | // Please change this to your repo. 45 | // Remove this to remove the "edit this page" links. 46 | editUrl: 47 | 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/', 48 | }, 49 | theme: { 50 | customCss: require.resolve('./src/css/custom.css'), 51 | }, 52 | }), 53 | ], 54 | ], 55 | 56 | themeConfig: 57 | /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ 58 | ({ 59 | navbar: { 60 | title: 'All About React', 61 | logo: { 62 | alt: 'All About React', 63 | src: 'img/logo.svg', 64 | }, 65 | items: [ 66 | { 67 | type: 'doc', 68 | docId: 'intro', 69 | position: 'left', 70 | label: 'Tutorial', 71 | }, 72 | {to: '/blog', label: 'Blog', position: 'left'}, 73 | { 74 | href: 'https://github.com/facebook/docusaurus', 75 | label: 'GitHub', 76 | position: 'right', 77 | }, 78 | ], 79 | }, 80 | footer: { 81 | style: 'dark', 82 | links: [ 83 | { 84 | title: 'Docs', 85 | items: [ 86 | { 87 | label: 'Tutorial', 88 | to: '/docs/intro', 89 | }, 90 | ], 91 | }, 92 | { 93 | title: 'Community', 94 | items: [ 95 | { 96 | label: 'Stack Overflow', 97 | href: 'https://stackoverflow.com/questions/tagged/docusaurus', 98 | }, 99 | { 100 | label: 'Discord', 101 | href: 'https://discordapp.com/invite/docusaurus', 102 | }, 103 | { 104 | label: 'Twitter', 105 | href: 'https://twitter.com/docusaurus', 106 | }, 107 | ], 108 | }, 109 | { 110 | title: 'More', 111 | items: [ 112 | { 113 | label: 'Blog', 114 | to: '/blog', 115 | }, 116 | { 117 | label: 'GitHub', 118 | href: 'https://github.com/facebook/docusaurus', 119 | }, 120 | ], 121 | }, 122 | ], 123 | copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`, 124 | }, 125 | prism: { 126 | theme: lightCodeTheme, 127 | darkTheme: darkCodeTheme, 128 | }, 129 | }), 130 | }; 131 | 132 | module.exports = config; 133 | -------------------------------------------------------------------------------- /website/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "all-about-react", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "docusaurus": "docusaurus", 7 | "start": "docusaurus start", 8 | "build": "docusaurus build", 9 | "swizzle": "docusaurus swizzle", 10 | "deploy": "docusaurus deploy", 11 | "clear": "docusaurus clear", 12 | "serve": "docusaurus serve", 13 | "write-translations": "docusaurus write-translations", 14 | "write-heading-ids": "docusaurus write-heading-ids", 15 | "typecheck": "tsc" 16 | }, 17 | "dependencies": { 18 | "@docusaurus/core": "2.2.0", 19 | "@docusaurus/preset-classic": "2.2.0", 20 | "@mdx-js/react": "^1.6.22", 21 | "clsx": "^1.2.1", 22 | "prism-react-renderer": "^1.3.5", 23 | "react": "^17.0.2", 24 | "react-dom": "^17.0.2" 25 | }, 26 | "devDependencies": { 27 | "@docusaurus/module-type-aliases": "2.2.0", 28 | "@tsconfig/docusaurus": "^1.0.5", 29 | "typescript": "^4.7.4" 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.5%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | }, 43 | "engines": { 44 | "node": ">=16.14" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /website/sidebars.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Creating a sidebar enables you to: 3 | - create an ordered group of docs 4 | - render a sidebar for each doc of that group 5 | - provide next/previous navigation 6 | 7 | The sidebars can be generated from the filesystem, or explicitly defined here. 8 | 9 | Create as many sidebars as you want. 10 | */ 11 | 12 | // @ts-check 13 | 14 | /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */ 15 | const sidebars = { 16 | // By default, Docusaurus generates a sidebar from the docs folder structure 17 | tutorialSidebar: [{type: 'autogenerated', dirName: '.'}], 18 | 19 | // But you can create a sidebar manually 20 | /* 21 | tutorialSidebar: [ 22 | 'intro', 23 | 'hello', 24 | { 25 | type: 'category', 26 | label: 'Tutorial', 27 | items: ['tutorial-basics/create-a-document'], 28 | }, 29 | ], 30 | */ 31 | }; 32 | 33 | module.exports = sidebars; 34 | -------------------------------------------------------------------------------- /website/src/components/HomepageFeatures/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import clsx from 'clsx'; 3 | import styles from './styles.module.css'; 4 | 5 | type FeatureItem = { 6 | title: string; 7 | Svg: React.ComponentType>; 8 | description: JSX.Element; 9 | }; 10 | 11 | const FeatureList: FeatureItem[] = [ 12 | { 13 | title: 'Easy to Use', 14 | Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default, 15 | description: ( 16 | <> 17 | Docusaurus was designed from the ground up to be easily installed and 18 | used to get your website up and running quickly. 19 | 20 | ), 21 | }, 22 | { 23 | title: 'Focus on What Matters', 24 | Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default, 25 | description: ( 26 | <> 27 | Docusaurus lets you focus on your docs, and we'll do the chores. Go 28 | ahead and move your docs into the docs directory. 29 | 30 | ), 31 | }, 32 | { 33 | title: 'Powered by React', 34 | Svg: require('@site/static/img/undraw_docusaurus_react.svg').default, 35 | description: ( 36 | <> 37 | Extend or customize your website layout by reusing React. Docusaurus can 38 | be extended while reusing the same header and footer. 39 | 40 | ), 41 | }, 42 | ]; 43 | 44 | function Feature({title, Svg, description}: FeatureItem) { 45 | return ( 46 |
47 |
48 | 49 |
50 |
51 |

{title}

52 |

{description}

53 |
54 |
55 | ); 56 | } 57 | 58 | export default function HomepageFeatures(): JSX.Element { 59 | return ( 60 |
61 |
62 |
63 | {FeatureList.map((props, idx) => ( 64 | 65 | ))} 66 |
67 |
68 |
69 | ); 70 | } 71 | -------------------------------------------------------------------------------- /website/src/components/HomepageFeatures/styles.module.css: -------------------------------------------------------------------------------- 1 | .features { 2 | display: flex; 3 | align-items: center; 4 | padding: 2rem 0; 5 | width: 100%; 6 | } 7 | 8 | .featureSvg { 9 | height: 200px; 10 | width: 200px; 11 | } 12 | -------------------------------------------------------------------------------- /website/src/css/custom.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Any CSS included here will be global. The classic template 3 | * bundles Infima by default. Infima is a CSS framework designed to 4 | * work well for content-centric websites. 5 | */ 6 | 7 | /* You can override the default Infima variables here. */ 8 | :root { 9 | --ifm-color-primary: #2e8555; 10 | --ifm-color-primary-dark: #29784c; 11 | --ifm-color-primary-darker: #277148; 12 | --ifm-color-primary-darkest: #205d3b; 13 | --ifm-color-primary-light: #33925d; 14 | --ifm-color-primary-lighter: #359962; 15 | --ifm-color-primary-lightest: #3cad6e; 16 | --ifm-code-font-size: 95%; 17 | --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); 18 | } 19 | 20 | /* For readability concerns, you should choose a lighter palette in dark mode. */ 21 | [data-theme='dark'] { 22 | --ifm-color-primary: #25c2a0; 23 | --ifm-color-primary-dark: #21af90; 24 | --ifm-color-primary-darker: #1fa588; 25 | --ifm-color-primary-darkest: #1a8870; 26 | --ifm-color-primary-light: #29d5b0; 27 | --ifm-color-primary-lighter: #32d8b4; 28 | --ifm-color-primary-lightest: #4fddbf; 29 | --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); 30 | } 31 | -------------------------------------------------------------------------------- /website/src/pages/index.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * CSS files with the .module.css suffix will be treated as CSS modules 3 | * and scoped locally. 4 | */ 5 | 6 | .heroBanner { 7 | padding: 4rem 0; 8 | text-align: center; 9 | position: relative; 10 | overflow: hidden; 11 | } 12 | 13 | @media screen and (max-width: 996px) { 14 | .heroBanner { 15 | padding: 2rem; 16 | } 17 | } 18 | 19 | .buttons { 20 | display: flex; 21 | align-items: center; 22 | justify-content: center; 23 | } 24 | -------------------------------------------------------------------------------- /website/src/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import clsx from 'clsx'; 3 | import Link from '@docusaurus/Link'; 4 | import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; 5 | import Layout from '@theme/Layout'; 6 | import HomepageFeatures from '@site/src/components/HomepageFeatures'; 7 | 8 | import styles from './index.module.css'; 9 | 10 | function HomepageHeader() { 11 | const {siteConfig} = useDocusaurusContext(); 12 | return ( 13 |
14 |
15 |

{siteConfig.title}

16 |

{siteConfig.tagline}

17 |
18 | 21 | Docusaurus Tutorial - 5min ⏱️ 22 | 23 |
24 |
25 |
26 | ); 27 | } 28 | 29 | export default function Home(): JSX.Element { 30 | const {siteConfig} = useDocusaurusContext(); 31 | return ( 32 | 35 | 36 |
37 | 38 |
39 | 40 | ); 41 | } 42 | -------------------------------------------------------------------------------- /website/src/pages/markdown-page.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Markdown page example 3 | --- 4 | 5 | # Markdown page example 6 | 7 | You don't need React to write simple standalone pages. 8 | -------------------------------------------------------------------------------- /website/static/.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techwards/all-about-react/9caeb052552e45bece9e66fdf5ffc44045ef8dcf/website/static/.nojekyll -------------------------------------------------------------------------------- /website/static/img/docusaurus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techwards/all-about-react/9caeb052552e45bece9e66fdf5ffc44045ef8dcf/website/static/img/docusaurus.png -------------------------------------------------------------------------------- /website/static/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techwards/all-about-react/9caeb052552e45bece9e66fdf5ffc44045ef8dcf/website/static/img/favicon.ico -------------------------------------------------------------------------------- /website/static/img/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /website/static/img/undraw_docusaurus_mountain.svg: -------------------------------------------------------------------------------- 1 | 2 | Easy to Use 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | -------------------------------------------------------------------------------- /website/static/img/undraw_docusaurus_react.svg: -------------------------------------------------------------------------------- 1 | 2 | Powered by React 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | -------------------------------------------------------------------------------- /website/static/img/undraw_docusaurus_tree.svg: -------------------------------------------------------------------------------- 1 | 2 | Focus on What Matters 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /website/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // This file is not used in compilation. It is here just for a nice editor experience. 3 | "extends": "@tsconfig/docusaurus/tsconfig.json", 4 | "compilerOptions": { 5 | "baseUrl": "." 6 | } 7 | } 8 | --------------------------------------------------------------------------------