diff options
Diffstat (limited to 'templates/react/README.md')
| -rw-r--r-- | templates/react/README.md | 33 |
1 files changed, 13 insertions, 20 deletions
diff --git a/templates/react/README.md b/templates/react/README.md index f88b8fe66..69d45bca2 100644 --- a/templates/react/README.md +++ b/templates/react/README.md @@ -1,32 +1,25 @@ -# React with Bun runtime +# React Bun App -This is a React project bootstrapped with [bun](https://bun.sh/). - -## Getting Started - -### Cloning the repo +This is a single-page application project template using React and [Bun](https://bun.sh/). Run the following commands to get started. ```sh bun create react ./react-bun-app +cd react-bun-app ``` -### Development +The `bun create` command will automatically install the required dependencies. To start the dev server: -First, run the development server. - -``` -bun dev +```sh +bun run dev ``` -Open http://localhost:3000 with your browser to see the result. - -You can start editing the page by modifying src/App.jsx. The page auto-updates as you edit the file. - -## Learn More +Then open http://localhost:3000 with your browser to see the result. -To learn more about React.js, take a look at the following resources: +This bundles `src/index.tsx` and starts a development server that serves from the `public` and `build` directories. When the incoming request to `localhost:3000/` comes in, the following exchange occurs: -- [React.js Documentation](https://reactjs.org/docs/getting-started.html) - learn about React.js features. -- [Learn React.js](https://reactjs.org/tutorial/tutorial.html) - an interactive React.js tutorial. +- The Bun server returns `public/index.html`. +- The browser renders this HTML, which contains a `script` tags with `src="/index.js"`. The browser requests this file. +- The server checks for this file, first in `public` (no match) then in `build`. It finds `build/index.js` and returns it to the browser. +- This file renders the React component in `src/App.tsx` inside the `div#root` element. The app is now ready to accept user input. -You can check out the [React.js GitHub repository](https://github.com/facebook/react) - your feedback and contributions are welcome! +Start building your app by editing `src/App.tsx`. |