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
-[Visual Guide to State in React](https://daveceddia.com/visual-guide-to-state-in-react/) - Dave Ceddia's visual guide to React state.
16
16
-[The Hands-On Guide to Learning React Hooks](https://www.telerik.com/kendo-react-ui/react-hooks-guide/) - Eric Bishard's step-by-step guide to learning React Hooks.
17
17
-[How to Use the React Profiler Component to Measure Render Performance](https://medium.com/@adamhenson/how-to-use-the-react-profiler-component-to-measure-performance-improvements-from-hooks-d43b7092d7a8) - Adam Henson's article exemplifying a use case for `<React.Profiler />`.
18
+
-[Thinking in React Hooks](https://wattenberger.com/blog/react-hooks) - Amelia Wattenberger's provides visualizations and highlighting the mindset change needed switching from classes to functional components + hooks.
Copy file name to clipboardExpand all lines: content/community/examples.md
+3-1
Original file line number
Diff line number
Diff line change
@@ -22,4 +22,6 @@ There are many example projects created by the React community. Feel free to add
22
22
***[Builder Book](https://github.com/builderbook/builderbook)** Open source web app to write and host documentation or sell books. Built with React, Material-UI, Next, Express, Mongoose, MongoDB.
23
23
***[GFonts Space](https://github.com/pankajladhar/GFontsSpace)** A space which allows user to play with Google fonts. Built with React, Redux and React-Router.
24
24
***[Course Learn Page](https://github.com/ulearnpro/ulearn)** Open Source LMS script in Laravel 5.8 and ReactJS 16.9
25
-
***[Speedy math](https://github.com/pankajladhar/speedy-math)** An application which allows kids to practice basic Mathematics i.e Addition, Subtraction, Multiply, Comparison. It is a PWA (Progressive web app) with offline support and install as App features.
25
+
***[Speedy math](https://github.com/pankajladhar/speedy-math)** An application which allows kids to practice basic Mathematics i.e Addition, Subtraction, Multiply, Comparison. It is a PWA (Progressive web app) with offline support and install as App features.
26
+
***[Unit Converter](https://github.com/KarthikeyanRanasthala/react-unit-converter)** Minimal Yet Responsive Unit Converter Built With React, Material-UI & Convert-Units.
27
+
***[BMI Calculator](https://github.com/GermaVinsmoke/bmi-calculator)** A React Hooks app for calculating BMI
***[Amaze UI React](https://github.com/amazeui/amazeui-react) (in Chinese):**[Amaze UI](https://github.com/allmobilize/amazeui) components built with React.
10
10
***[Ant Design of React](https://github.com/ant-design/ant-design)** An enterprise-class UI design language and React-based implementation.
11
+
***[Base Web](http://baseweb.design):** A foundation for initiating, evolving, and unifying web products.
11
12
***[Belle](https://github.com/nikgraf/belle/):** Configurable React Components with great UX.
13
+
***[Chakra UI](https://chakra-ui.com/)**: Simple, modular and accessible component library.
12
14
***[chartify](https://github.com/kirillstepkin/chartify)**: Ultra lightweight and customizable React.js chart component.
13
15
***[Elemental UI](http://elemental-ui.com):** A UI toolkit for React websites and apps, themeable and composed of individually packaged components
14
16
***[Grommet](https://grommet.io/)** The most advanced open source UX framework for enterprise applications.
Copy file name to clipboardExpand all lines: content/docs/add-react-to-a-website.md
+3-3
Original file line number
Diff line number
Diff line change
@@ -69,13 +69,13 @@ The first two tags load React. The third one will load your component code.
69
69
70
70
Create a file called `like_button.js` next to your HTML page.
71
71
72
-
Open **[this starter code](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** and paste it into the file you created.
72
+
Open **[this starter code](https://gist.github.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** and paste it into the file you created.
73
73
74
74
>Tip
75
75
>
76
76
>This code defines a React component called `LikeButton`. Don't worry if you don't understand it yet -- we'll cover the building blocks of React later in our [hands-on tutorial](/tutorial/tutorial.html) and [main concepts guide](/docs/hello-world.html). For now, let's just get it showing on the screen!
77
77
78
-
After **[the starter code](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**, add two lines to the bottom of `like_button.js`:
78
+
After **[the starter code](https://gist.github.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**, add two lines to the bottom of `like_button.js`:
Don't wait for it to finish -- this command starts an automated watcher for JSX.
197
197
198
-
If you now create a file called `src/like_button.js` with this **[JSX starter code](https://cdn.rawgit.com/gaearon/c8e112dc74ac44aac4f673f2c39d19d1/raw/09b951c86c1bf1116af741fa4664511f2f179f0a/like_button.js)**, the watcher will create a preprocessed `like_button.js` with the plain JavaScript code suitable for the browser. When you edit the source file with JSX, the transform will re-run automatically.
198
+
If you now create a file called `src/like_button.js` with this **[JSX starter code](https://gist.github.com/gaearon/c8e112dc74ac44aac4f673f2c39d19d1/raw/09b951c86c1bf1116af741fa4664511f2f179f0a/like_button.js)**, the watcher will create a preprocessed `like_button.js` with the plain JavaScript code suitable for the browser. When you edit the source file with JSX, the transform will re-run automatically.
199
199
200
200
As a bonus, this also lets you use modern JavaScript syntax features like classes without worrying about breaking older browsers. The tool we just used is called Babel, and you can learn more about it from [its documentation](https://babeljs.io/docs/en/babel-cli/).
Copy file name to clipboardExpand all lines: content/docs/code-splitting.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -62,8 +62,8 @@ it so large that your app takes a long time to load.
62
62
63
63
To avoid winding up with a large bundle, it's good to get ahead of the problem
64
64
and start "splitting" your bundle.
65
-
[Code-Splitting](https://webpack.js.org/guides/code-splitting/) is a feature
66
-
supported by bundlers like Webpack and Browserify (via
65
+
Code-Splitting is a feature
66
+
supported by bundlers like [Webpack](https://webpack.js.org/guides/code-splitting/), [Rollup](https://rollupjs.org/guide/en/#code-splitting) and Browserify (via
67
67
[factor-bundle](https://github.com/browserify/factor-bundle)) which can create
68
68
multiple bundles that can be dynamically loaded at runtime.
@@ -111,7 +111,7 @@ Mutations, subscriptions, timers, logging, and other side effects are not allowe
111
111
112
112
Instead, use `useEffect`. The function passed to `useEffect` will run after the render is committed to the screen. Think of effects as an escape hatch from React's purely functional world into the imperative world.
113
113
114
-
By default, effects run after every completed render, but you can choose to fire it[only when certain values have changed](#conditionally-firing-an-effect).
114
+
By default, effects run after every completed render, but you can choose to fire them[only when certain values have changed](#conditionally-firing-an-effect).
115
115
116
116
#### Cleaning up an effect {#cleaning-up-an-effect}
0 commit comments