diff --git a/beta/.husky/pre-commit b/beta/.husky/pre-commit new file mode 100755 index 00000000..038a9316 --- /dev/null +++ b/beta/.husky/pre-commit @@ -0,0 +1,6 @@ +#!/bin/sh +. "$(dirname "$0")/_/husky.sh" + +cd beta +yarn generate-ids +git add -u src/pages/**/*.md diff --git a/beta/package.json b/beta/package.json index 380d923a..c732efba 100644 --- a/beta/package.json +++ b/beta/package.json @@ -12,10 +12,11 @@ "nit:source": "prettier --config .prettierrc --list-different \"{plugins,src}/**/*.{js,ts,jsx,tsx}\"", "prettier": "yarn format:source", "prettier:diff": "yarn nit:source", - "generate-ids": "node scripts/generateHeadingIDs.js src/pages/docs && node scripts/generateHeadingIDs.js src/pages/blog", + "generate-ids": "node scripts/generateHeadingIDs.js src/pages/", "ci-check": "npm-run-all prettier:diff --parallel lint tsc", "tsc": "tsc --noEmit", - "start": "next start" + "start": "next start", + "postinstall": "is-ci || (cd .. && husky install beta/.husky)" }, "dependencies": { "@codesandbox/sandpack-react": "^0.1.20", @@ -66,6 +67,8 @@ "fs-extra": "^9.0.1", "globby": "^11.0.1", "gray-matter": "^4.0.2", + "husky": "^7.0.4", + "is-ci": "^3.0.1", "mdast-util-to-string": "^1.1.0", "npm-run-all": "^4.1.5", "patch-package": "^6.2.2", diff --git a/beta/src/pages/community/acknowledgements.md b/beta/src/pages/community/acknowledgements.md index 0aef7a8c..ba614c90 100644 --- a/beta/src/pages/community/acknowledgements.md +++ b/beta/src/pages/community/acknowledgements.md @@ -3,7 +3,7 @@ title: Acknowledgements layout: Home --- -## React +## React {#react} React was originally created by [Jordan Walke](https://github.com/jordwalke). Today, React has a [dedicated full-time team working on it](/community/team.html), as well as over a thousand [open source contributors](https://github.com/facebook/react/blob/main/AUTHORS). We'd like to recognize a few people who have made significant contributions to React and its documentation in the past and have helped maintain them over the years: @@ -46,21 +46,21 @@ This list is not exhaustive. We'd like to give special thanks to [Tom Occhino](https://github.com/tomocchino) and [Adam Wolff](https://github.com/wolffiex) for their guidance and support over the years. We are also thankful to all the volunteers who [translated React into other languages](https://translations.reactjs.org/). -## React Docs +## React Docs {#react-docs} -### Documentation +### Documentation {#documentation} * [Rachel Nabors](https://twitter.com/RachelNabors): editing, writing, illustrating * [Dan Abramov](https://twitter.com/dan_abramov): writing, curriculum design * [Sylwia Vargas](https://twitter.com/SylwiaVargas): example code -### Design +### Design {#design} * [Dan Lebowitz](https://twitter.com/lebo): design * [Razvan Gradinar](https://dribbble.com/GradinarRazvan): design * [Maggie Appleton](https://maggieappleton.com/): diagram system -### Development +### Development {#development} * [Jared Palmer](https://twitter.com/jaredpalmer): site development * [ThisDotLabs](https://www.thisdot.co/) ([Dane Grant](https://twitter.com/danecando), [Dustin Goodman](https://twitter.com/dustinsgoodman)): site development @@ -69,7 +69,7 @@ We'd like to give special thanks to [Tom Occhino](https://github.com/tomocchino) We'd also like to thank countless alpha testers and community members who gave us feedback along the way. -## Additional Thanks +## Additional Thanks {#additional-thanks} Additionally, we're grateful to: diff --git a/beta/src/pages/community/index.md b/beta/src/pages/community/index.md index 1eb3eaf8..68e8197a 100644 --- a/beta/src/pages/community/index.md +++ b/beta/src/pages/community/index.md @@ -9,11 +9,11 @@ React has a community of millions of developers. On this page we've listed some -## Code of Conduct +## Code of Conduct {#code-of-conduct} Before participating in React's communities, [please read our Code of Conduct](https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md). We have adopted the [Contributor Covenant](https://www.contributor-covenant.org/) and we expect that all community members adhere to the guidelines within. -## Stack Overflow +## Stack Overflow {#stack-overflow} Stack Overflow is a popular forum to ask code-level questions or if you're stuck with a specific error. Read through the [existing questions](https://stackoverflow.com/questions/tagged/reactjs) tagged with **reactjs** or [ask your own](https://stackoverflow.com/questions/ask?tags=reactjs)! @@ -21,7 +21,7 @@ Stack Overflow is a popular forum to ask code-level questions or if you're stuck TODO: decide on the criteria for inclusion before uncommenting. -## Popular Discussion Forums +## Popular Discussion Forums {#popular-discussion-forums} There are many online forums which are a great place for discussion about best practices and application architecture as well as the future of React. If you have an answerable code-level question, Stack Overflow is usually a better fit. @@ -34,6 +34,6 @@ Each community consists of many thousands of React users. --> -## News +## News {#news} For the latest news about React, [follow **@reactjs** on Twitter](https://twitter.com/reactjs) and the [official React blog](/blog/) on this website. diff --git a/beta/src/pages/community/meet-the-team.md b/beta/src/pages/community/meet-the-team.md index cef173ae..6b0d5a4a 100644 --- a/beta/src/pages/community/meet-the-team.md +++ b/beta/src/pages/community/meet-the-team.md @@ -8,13 +8,13 @@ React development is led by a small dedicated team working full time at Facebook -## React Core +## React Core {#react-core} The React Core team members work full time on the core component APIs, the engine that powers React DOM and React Native, React DevTools, and the React documentation website. Current members of the React team are listed in alphabetical order below. -### Andrew Clark +### Andrew Clark {#andrew-clark} ![Andrew Clark](../images/team/acdlite.jpg) @@ -22,7 +22,7 @@ Current members of the React team are listed in alphabetical order below. Andrew got started with web development by making sites with WordPress, and eventually tricked himself into doing JavaScript. His favorite pastime is karaoke. Andrew is either a Disney villain or a Disney princess, depending on the day. -### Brian Vaughn +### Brian Vaughn {#brian-vaughn} ![Brian Vaughn](../images/team/bvaughn.jpg) @@ -30,7 +30,7 @@ Andrew got started with web development by making sites with WordPress, and even Brian studied art in college and did programming on the side to pay for his education. Eventually, he realized that he enjoys working on open source. Brian has one [one-person band](https://soundcloud.com/brianvaughn/) and two [two-person](https://soundcloud.com/pilotlessdrone) [bands](https://soundcloud.com/pinwurm). He also takes care of the cutest cat in the world. -### Dan Abramov +### Dan Abramov {#dan-abramov} ![Dan Abramov](../images/team/gaearon.jpg) @@ -38,7 +38,7 @@ Brian studied art in college and did programming on the side to pay for his educ Dan got into programming after he accidentally discovered Visual Basic inside Microsoft PowerPoint. He has found his true calling in turning [Sebastian](#sebastian-markbåge)'s tweets into long-form blog posts. Dan occasionally wins at Fortnite by hiding in a bush until the game ends. -### Luna Ruan +### Luna Ruan {#luna-ruan} ![Luna](../images/team/lunaruan.jpg) @@ -46,7 +46,7 @@ Dan got into programming after he accidentally discovered Visual Basic inside Mi Luna learned programming because she thought it meant creating video games. Instead, she ended up working on the Pinterest web app, and now on React itself. Luna doesn't want to make video games anymore, but she plans to do creative writing if she ever gets bored. -### Marco Salazar +### Marco Salazar {#marco-salazar} ![Marco](../images/team/salazarm.jpeg) @@ -54,7 +54,7 @@ Luna learned programming because she thought it meant creating video games. Inst Marco's first programming language was Assembly because he could use it to hack video games. Now online games are much more secure so he settles for playing fairly (mostly). In his spare time he plays games on his treadmill desk and makes art that he never finishes. Hopefully his PRs don't have the same fate. -### Rachel Nabors +### Rachel Nabors {#rachel-nabors} ![Rachel](../images/team/rnabors.jpg) @@ -62,7 +62,7 @@ Marco's first programming language was Assembly because he could use it to hack Rachel wrote a [book about UI animation](https://abookapart.com/products/animation-at-work) once and worked with MDN and the W3C on the web animations API. Now she is busy with education materials and community engineering on the React team. Secretly, she is an award-winning cartoonist for teenage girls. Catch her making fancy tea with lukewarm water in the microkitchen. -### Rick Hanlon +### Rick Hanlon {#rick-hanlon} ![Ricky](../images/team/rickhanlonii.jpg) @@ -70,7 +70,7 @@ Rachel wrote a [book about UI animation](https://abookapart.com/products/animati Ricky majored in theoretical math and somehow found himself on the React Native team for a couple years before joining the React team. When he's not programming you can find him snowboarding, biking, climbing, golfing, or closing GitHub issues that do not match the issue template. -### Sebastian Markbåge +### Sebastian Markbåge {#sebastian-markbåge} ![Sebastian](../images/team/sebmarkbage.jpg) @@ -78,7 +78,7 @@ Ricky majored in theoretical math and somehow found himself on the React Native Sebastian majored in psychology. He's usually quiet. Even when he says something, it often doesn't make sense to the rest of us until a few months later. The correct way to pronounce his surname is "mark-boa-geh" but he settled for "mark-beige" out of pragmatism -- and that's how he approaches React. -### Seth Webster +### Seth Webster {#seth-webster} ![Seth](../images/team/sethwebster.jpg) @@ -86,7 +86,7 @@ Sebastian majored in psychology. He's usually quiet. Even when he says something Seth started programming as a kid growing up in Tucson, AZ. After school, he was bitten by the music bug and was a touring musician for about 10 years before returning to *work*, starting with Intuit. In his spare time, he loves [taking pictures](https://www.sethwebster.com) and flying for animal rescues in the northeastern United States. -## Past contributors +## Past contributors {#past-contributors} You can find the past team members and other people who significantly contributed to React over the years on the [acknowledgements](/community/acknowledgements) page. diff --git a/beta/src/pages/index.md b/beta/src/pages/index.md index 4f9ebf4b..8e56cb67 100644 --- a/beta/src/pages/index.md +++ b/beta/src/pages/index.md @@ -7,7 +7,7 @@ permalink: index.html -## What is this site? +## What is this site? {#what-is-this-site} We are rewriting the React documentation with a few differences: @@ -17,21 +17,21 @@ We are rewriting the React documentation with a few differences: This beta website contains the current draft of the new docs. -## This is a work in progress! +## This is a work in progress! {#this-is-a-work-in-progress} This is a **beta website**. There will be bugs, performance issues, and missing content. -## How much content is ready? +## How much content is ready? {#how-much-content-is-ready} * [Learn React](/learn): ~70% finished. * [API Reference](/reference): ~5% finished. You can track our progress [on GitHub](https://github.com/reactjs/reactjs.org/issues/3308). -## How can I provide feedback? +## How can I provide feedback? {#how-can-i-provide-feedback} Please use [this GitHub issue](https://github.com/reactjs/reactjs.org/issues/3308) or [this anonymous form](https://www.surveymonkey.co.uk/r/Y6GH986) for high-level feedback. Additionally, each page has a Feedback button in the corner. If you spot something that doesn't make sense, please tell us! -## Will this site replace the main site? +## Will this site replace the main site? {#will-this-site-replace-the-main-site} We aim to switch this site to be the main one once we reach content parity with the [existing React documentation](https://reactjs.org/). The old React website will be archived at a subdomain so you'll still be able to access it. Old content links will redirect to the archived subdomain, which will have a notice about outdated content. diff --git a/beta/src/pages/learn/add-react-to-a-website.md b/beta/src/pages/learn/add-react-to-a-website.md index c7c0a3a6..c014615c 100644 --- a/beta/src/pages/learn/add-react-to-a-website.md +++ b/beta/src/pages/learn/add-react-to-a-website.md @@ -9,11 +9,11 @@ React has been designed from the start for gradual adoption, and you can use as -## Add React in one minute +## Add React in one minute {#add-react-in-one-minute} You can add a React component to an existing HTML page in under a minute. Try this out with your own website or [an empty HTML file](https://gist.github.com/rachelnabors/7b33305bf33776354797a2e3c1445186/archive/859eac2f7079c9e1f0a6eb818a9684a464064d80.zip)—all you need is an internet connection and a text editor like Notepad (or VSCode—check out our guide on [how to set yours up](/learn/editor-setup/))! -### Step 1: Add an element to the HTML +### Step 1: Add an element to the HTML {#step-1-add-an-element-to-the-html} In the HTML page you want to edit, add an HTML element like an empty `
` tag with a unique `id` to mark the spot where you want to display something with React. @@ -27,7 +27,7 @@ You can place a "container" element like this `
` anywhere inside the ` ``` -### Step 2: Add the Script Tags +### Step 2: Add the Script Tags {#step-2-add-the-script-tags} In the HTML page, right before the closing `` tag, add three ` ``` -## Try React with JSX +## Try React with JSX {#try-react-with-jsx} The examples above rely on features that are natively supported by browsers. This is why **like_button.js** uses a JavaScript function call to tell React what to display: @@ -138,7 +138,7 @@ These two code snippets are equivalent. JSX is popular syntax for describing mar > You can play with transforming HTML markup into JSX using [this online converter](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.4.3). -### Try JSX +### Try JSX {#try-jsx} The quickest way to try JSX in your project is to add the Babel compiler to your page's `` along with React and ReactDOM like so: @@ -193,7 +193,7 @@ Here is [an example HTML file with JSX](https://raw.githubusercontent.com/reactj This approach is fine for learning and creating simple demos. However, it makes your website slow and **isn't suitable for production**. When you're ready to move forward, remove this new `