Skip to content
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

Jump to bottom

Linking and updating html babel example #7117

Open
wants to merge 2 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
2 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
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>
2 changes: 1 addition & 1 deletion src/content/learn/installation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ Most pages in the React documentation contain sandboxes like this. Outside of th

### Try React locally {/*try-react-locally*/}

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!
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!

## Start a new React project {/*start-a-new-react-project*/}

Expand Down
Loading