Skip to content

Linking and updating html babel example #7117

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Linking and updating html babel example #7117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8f4a110
Updating HTML babel example to valid HTML (W3C) and new react syntax
joseeloren Aug 20, 2024
67f0ae2
linking public html to react learn installation
joseeloren Aug 20, 2024
e922955
Merge branch 'main' into linking-and-updating-HTML-babel-example
joseeloren Mar 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 17 additions & 17 deletions public/html/single-file-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,36 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta charset="UTF-8">
<title>Hello World</title>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>

<!-- Don't use this in production—do this: https://reactjs.org/docs/add-react-to-a-website#add-jsx-to-a-project -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">

ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
function MyApp() {
return <h1>Hello, world!</h1>;
}

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<MyApp />);

</script>
<!--
Note: this page is a great way to try React but it's not suitable for production.
It slowly compiles JSX with Babel in the browser and uses a large development build of React.

Read this section for a production-ready setup with JSX:
https://reactjs.org/docs/docs/add-react-to-a-website#try-react-with-jsx

In a larger project, you can use an integrated toolchain that includes JSX instead:
https://reactjs.org/docs/start-a-new-react-project
Read this page for starting a new React project with JSX:
https://react.dev/learn/start-a-new-react-project

You can also use React without JSX, in which case you can remove Babel:
https://reactjs.org/docs/add-react-to-a-website#add-react-in-one-minute
Read this page for adding React with JSX to an existing project:
https://react.dev/learn/add-react-to-an-existing-project
-->
</body>
</html>
4 changes: 3 additions & 1 deletion src/content/learn/installation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,9 @@ You can edit it directly or open it in a new tab by pressing the "Fork" button i

Most pages in the React documentation contain sandboxes like this. Outside of the React documentation, there are many online sandboxes that support React: for example, [CodeSandbox](https://codesandbox.io/s/new), [StackBlitz](https://stackblitz.com/fork/react), or [CodePen.](https://codepen.io/pen?template=QWYVwWN)

To try React locally on your computer, [download this HTML page.](https://gist.githubusercontent.com/gaearon/0275b1e1518599bbeafcde4722e79ed1/raw/db72dcbf3384ee1708c4a07d3be79860db04bff0/example.html) Open it in your editor and in your browser!
### Try React locally {/*try-react-locally*/}

To try React locally on your computer, [download this HTML page.](../html/single-file-example.html) Open it in your editor and in your browser!

## Creating a React App {/*creating-a-react-app*/}

Expand Down