You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: beta/src/pages/community/acknowledgements.md
+6-6
Original file line number
Diff line number
Diff line change
@@ -3,7 +3,7 @@ title: Acknowledgements
3
3
layout: Home
4
4
---
5
5
6
-
## React
6
+
## React {#react}
7
7
8
8
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:
9
9
@@ -46,21 +46,21 @@ This list is not exhaustive.
46
46
47
47
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/).
*[Maggie Appleton](https://maggieappleton.com/): diagram system
62
62
63
-
### Development
63
+
### Development {#development}
64
64
65
65
*[Jared Palmer](https://twitter.com/jaredpalmer): site development
66
66
*[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)
69
69
70
70
We'd also like to thank countless alpha testers and community members who gave us feedback along the way.
Copy file name to clipboardExpand all lines: beta/src/pages/community/index.md
+4-4
Original file line number
Diff line number
Diff line change
@@ -9,19 +9,19 @@ React has a community of millions of developers. On this page we've listed some
9
9
10
10
</Intro>
11
11
12
-
## Code of Conduct
12
+
## Code of Conduct {#code-of-conduct}
13
13
14
14
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.
15
15
16
-
## Stack Overflow
16
+
## Stack Overflow {#stack-overflow}
17
17
18
18
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)!
19
19
20
20
<!--
21
21
22
22
TODO: decide on the criteria for inclusion before uncommenting.
23
23
24
-
## Popular Discussion Forums
24
+
## Popular Discussion Forums {#popular-discussion-forums}
25
25
26
26
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.
27
27
@@ -34,6 +34,6 @@ Each community consists of many thousands of React users.
34
34
35
35
-->
36
36
37
-
## News
37
+
## News {#news}
38
38
39
39
For the latest news about React, [follow **@reactjs** on Twitter](https://twitter.com/reactjs) and the [official React blog](/blog/) on this website.
Copy file name to clipboardExpand all lines: beta/src/pages/community/meet-the-team.md
+11-11
Original file line number
Diff line number
Diff line change
@@ -8,85 +8,85 @@ React development is led by a small dedicated team working full time at Facebook
8
8
9
9
</Intro>
10
10
11
-
## React Core
11
+
## React Core {#react-core}
12
12
13
13
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.
14
14
15
15
Current members of the React team are listed in alphabetical order below.
16
16
17
-
### Andrew Clark
17
+
### Andrew Clark {#andrew-clark}
18
18
19
19
20
20
21
21
[@acdlite on GitHub](https://github.com/acdlite)·[@acdlite on Twitter](https://twitter.com/acdlite)
22
22
23
23
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.
24
24
25
-
### Brian Vaughn
25
+
### Brian Vaughn {#brian-vaughn}
26
26
27
27
28
28
29
29
[@bvaughn on GitHub](https://github.com/bvaughn)·[@brian\_d\_vaughn on Twitter](https://twitter.com/brian_d_vaughn)
30
30
31
31
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.
32
32
33
-
### Dan Abramov
33
+
### Dan Abramov {#dan-abramov}
34
34
35
35
36
36
37
37
[@gaearon on GitHub](https://github.com/gaearon)·[@dan_abramov on Twitter](https://twitter.com/dan_abramov)
38
38
39
39
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.
40
40
41
-
### Luna Ruan
41
+
### Luna Ruan {#luna-ruan}
42
42
43
43
44
44
45
45
[@lunaruan on GitHub](https://github.com/lunaruan)·[@lunaruan on Twitter](https://twitter.com/lunaruan)
46
46
47
47
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.
48
48
49
-
### Marco Salazar
49
+
### Marco Salazar {#marco-salazar}
50
50
51
51
52
52
53
53
[@salazarm on GitHub](https://github.com/salazarm)·[@BkOptimism on Twitter](https://twitter.com/BkOptimism)
54
54
55
55
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.
56
56
57
-
### Rachel Nabors
57
+
### Rachel Nabors {#rachel-nabors}
58
58
59
59
60
60
61
61
[@rachelnabors on GitHub](https://github.com/rachelnabors)·[@rachelnabors on Twitter](https://twitter.com/rachelnabors)
62
62
63
63
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.
64
64
65
-
### Rick Hanlon
65
+
### Rick Hanlon {#rick-hanlon}
66
66
67
67
68
68
69
69
[@rickhanlonii on GitHub](https://github.com/rickhanlonii)·[@rickhanlonii on Twitter](https://twitter.com/rickhanlonii)
70
70
71
71
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.
72
72
73
-
### Sebastian Markbåge
73
+
### Sebastian Markbåge {#sebastian-markbåge}
74
74
75
75
76
76
77
77
[@sebmarkbage on GitHub](https://github.com/sebmarkbage)·[@sebmarkbage on Twitter](https://twitter.com/sebmarkbage)
78
78
79
79
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.
80
80
81
-
### Seth Webster
81
+
### Seth Webster {#seth-webster}
82
82
83
83
84
84
85
85
[@sethwebster on GitHub](https://github.com/sethwebster)·[@sethwebster on Twitter](https://twitter.com/sethwebster)
86
86
87
87
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.
88
88
89
-
## Past contributors
89
+
## Past contributors {#past-contributors}
90
90
91
91
You can find the past team members and other people who significantly contributed to React over the years on the [acknowledgements](/community/acknowledgements) page.
Copy file name to clipboardExpand all lines: beta/src/pages/index.md
+5-5
Original file line number
Diff line number
Diff line change
@@ -7,7 +7,7 @@ permalink: index.html
7
7
8
8
<HomepageHero />
9
9
10
-
## What is this site?
10
+
## What is this site? {#what-is-this-site}
11
11
12
12
We are rewriting the React documentation with a few differences:
13
13
@@ -17,21 +17,21 @@ We are rewriting the React documentation with a few differences:
17
17
18
18
This beta website contains the current draft of the new docs.
19
19
20
-
## This is a work in progress!
20
+
## This is a work in progress! {#this-is-a-work-in-progress}
21
21
22
22
This is a **beta website**. There will be bugs, performance issues, and missing content.
23
23
24
-
## How much content is ready?
24
+
## How much content is ready? {#how-much-content-is-ready}
25
25
26
26
*[Learn React](/learn): ~70% finished.
27
27
*[API Reference](/reference): ~5% finished.
28
28
29
29
You can track our progress [on GitHub](https://github.com/reactjs/reactjs.org/issues/3308).
30
30
31
-
## How can I provide feedback?
31
+
## How can I provide feedback? {#how-can-i-provide-feedback}
32
32
33
33
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!
34
34
35
-
## Will this site replace the main site?
35
+
## Will this site replace the main site? {#will-this-site-replace-the-main-site}
36
36
37
37
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.
Copy file name to clipboardExpand all lines: beta/src/pages/learn/add-react-to-a-website.md
+11-11
Original file line number
Diff line number
Diff line change
@@ -9,11 +9,11 @@ React has been designed from the start for gradual adoption, and you can use as
9
9
10
10
</Intro>
11
11
12
-
## Add React in one minute
12
+
## Add React in one minute {#add-react-in-one-minute}
13
13
14
14
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/))!
15
15
16
-
### Step 1: Add an element to the HTML
16
+
### Step 1: Add an element to the HTML {#step-1-add-an-element-to-the-html}
17
17
18
18
In the HTML page you want to edit, add an HTML element like an empty `<div>` tag with a unique `id` to mark the spot where you want to display something with React.
19
19
@@ -27,7 +27,7 @@ You can place a "container" element like this `<div>` anywhere inside the `<body
27
27
<!-- ... existing HTML ... -->
28
28
```
29
29
30
-
### Step 2: Add the Script Tags
30
+
### Step 2: Add the Script Tags {#step-2-add-the-script-tags}
31
31
32
32
In the HTML page, right before the closing `</body>` tag, add three `<script>` tags for the following files:
33
33
@@ -49,7 +49,7 @@ When deploying, replace "development.js" with "production.min.js".
49
49
</body>
50
50
```
51
51
52
-
### Step 3: Create a React component
52
+
### Step 3: Create a React component {#step-3-create-a-react-component}
53
53
54
54
Create a file called **like_button.js** next to your HTML page, add this code snippet, and save the file. This code defines a React component called `LikeButton`. [You can learn more about making components in our guides.](/learn/your-first-component)
55
55
@@ -73,7 +73,7 @@ function LikeButton() {
73
73
}
74
74
```
75
75
76
-
### Step 4: Add your React Component to the page
76
+
### Step 4: Add your React Component to the page {#step-4-add-your-react-component-to-the-page}
77
77
78
78
Lastly, add two lines to the bottom of **like_button.js**. These two lines of code find the `<div>` you added to your HTML in the first step and then display the "Like" button React component inside of it.
-[View the full example source code](https://gist.github.com/rachelnabors/c64b3aeace8a191cf5ea6fb5202e66c9)
88
88
-[Download the full example (2KB zipped)](https://gist.github.com/rachelnabors/c64b3aeace8a191cf5ea6fb5202e66c9/archive/7b41a88cb1027c9b5d8c6aff5212ecd3d0493504.zip)
89
89
90
-
#### You can reuse components!
90
+
#### You can reuse components! {#you-can-reuse-components}
91
91
92
92
You might want to display a React component in multiple places on the same HTML page. This is most useful while React-powered parts of the page are isolated from each other. You can do this by calling `ReactDOM.render()` multiple times with multiple container elements.
93
93
@@ -108,7 +108,7 @@ ReactDOM.render(
108
108
109
109
Check out [an example that displays the "Like" button three times and passes some data to it](https://gist.github.com/rachelnabors/c0ea05cc33fbe75ad9bbf78e9044d7f8)!
110
110
111
-
### Step 5: Minify JavaScript for production
111
+
### Step 5: Minify JavaScript for production {#step-5-minify-javascript-for-production}
112
112
113
113
Unminified JavaScript can significantly slow down page load times for your users. Before deploying your website to production, it's a good idea to minify its scripts.
114
114
@@ -120,7 +120,7 @@ Unminified JavaScript can significantly slow down page load times for your users
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:
126
126
@@ -138,7 +138,7 @@ These two code snippets are equivalent. JSX is popular syntax for describing mar
138
138
139
139
> 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).
140
140
141
-
### Try JSX
141
+
### Try JSX {#try-jsx}
142
142
143
143
The quickest way to try JSX in your project is to add the Babel compiler to your page's `<head>` along with React and ReactDOM like so:
144
144
@@ -193,7 +193,7 @@ Here is [an example HTML file with JSX](https://raw.githubusercontent.com/reactj
193
193
194
194
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 `<script>` tag and the `type="text/babel"` attributes you've added. Instead, in the next section you will set up a JSX preprocessor to convert all your `<script>` tags automatically.
195
195
196
-
### Add JSX to a project
196
+
### Add JSX to a project {#add-jsx-to-a-project}
197
197
198
198
Adding JSX to a project doesn't require complicated tools like a [bundler](/learn/start-a-new-react-project#custom-toolchains) or a development server. Adding a JSX preprocessor is a lot like adding a CSS preprocessor.
199
199
@@ -206,7 +206,7 @@ You only need npm to install the JSX preprocessor. You won't need it for anythin
206
206
207
207
Congratulations! You just added a **production-ready JSX setup** to your project.
208
208
209
-
### Run the JSX Preprocessor
209
+
### Run the JSX Preprocessor {#run-the-jsx-preprocessor}
210
210
211
211
You can preprocess JSX so that every time you save a file with JSX in it, the transform will be re-run, converting the JSX file into a new, plain JavaScript file.
0 commit comments