Convert site to React #21
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Convert the static HTML site into a React-based site. * Add `src/components/Navbar.js` to create a new React component for the navigation bar. * Add `src/components/Hero.js` to create a new React component for the hero section. * Add `src/components/Featurette.js` to create a new React component for the featurettes. * Add `src/components/Footer.js` to create a new React component for the footer. * Add `src/App.js` to create a new React component for the main app, importing and using the Navbar, Hero, Featurette, and Footer components. * Add `src/index.js` to create a new React component for the entry point of the app, importing and using the App component and using ReactDOM to render the App component. * Add `public/index.html` to update the title to "SimpleITK - Home" and add a div with id "root" for rendering the React app. * Modify `css/styles.css` to update the styles to work with the new React components and remove any styles that are no longer needed. * Modify `js/main.js` to update the JavaScript to work with the new React components and remove any JavaScript that is no longer needed. * Delete `index.html`, `about.html`, and `privacy_policy.html` as they are no longer needed. --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/SimpleITK/SimpleITK.github.io?shareId=XXXX-XXXX-XXXX-XXXX).
* **Dependencies** - Include React, ReactDOM, React Bootstrap, Bootstrap, FontAwesome, and React FontAwesome * **DevDependencies** - Include React Scripts * **Scripts** - Add scripts for starting, building, testing, and ejecting the React app * **Browserslist** - Specify supported browsers for production and development
* **Routing** - Import `BrowserRouter`, `Route`, and `Switch` from `react-router-dom` in `src/App.js` - Add routes for the About and Privacy Policy pages in `src/App.js` * **About Component** - Create `src/components/About.js` with content from the original `about.html` - Use Bootstrap classes for styling * **Privacy Policy Component** - Create `src/components/PrivacyPolicy.js` with content from the original `privacy_policy.html` - Use Bootstrap classes for styling
* **Hero component**: Add featurettes array with imageSrc, description, and reverse properties. Update return statement to include featurettes mapping. * **App.js**: Remove import and usage of Featurettes component. Update routing to include Hero component. * **package.json**: Add react-router-dom dependency.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Convert the static HTML site into a React-based site.
src/components/Navbar.jsto create a new React component for the navigation bar.src/components/Hero.jsto create a new React component for the hero section.src/components/Featurette.jsto create a new React component for the featurettes.src/components/Footer.jsto create a new React component for the footer.src/App.jsto create a new React component for the main app, importing and using the Navbar, Hero, Featurette, and Footer components.src/index.jsto create a new React component for the entry point of the app, importing and using the App component and using ReactDOM to render the App component.public/index.htmlto update the title to "SimpleITK - Home" and add a div with id "root" for rendering the React app.css/styles.cssto update the styles to work with the new React components and remove any styles that are no longer needed.js/main.jsto update the JavaScript to work with the new React components and remove any JavaScript that is no longer needed.index.html,about.html, andprivacy_policy.htmlas they are no longer needed.For more details, open the Copilot Workspace session.