Hey, guys...I created the boilerplate for my webapp with create-react-app, then added Bootstrap, Styled-components, and React-router. I'm definitely new to coding, so even if you see stuff that's outside of the scope of my posted issues, definitely feel free to chime in with suggestions, pull requests, and any other manner of help. It's all much appreciated!
- 1 Mounting multiple image portfolio components within a single div on a page per user input
- 2 Found a pretty cool bug with my imports, which won't load certain aspects of the page without internet connectivity
First problem is with loading components dynamically. Here's what I ended up doing:
render() {
return(
<Styles>
<Container>
<Row>
<Nav
className="flex-column"
onSelect={selectedKey => {this.setState({ page: selectedKey })}}
>
<Nav.Link eventKey="PtfHome">Portfolio Home</Nav.Link>
<Nav.Link eventKey="Weddings">Weddings</Nav.Link>
<Nav.Link eventKey="Portraits">Portraits</Nav.Link>
<Nav.Link eventKey="School">High School Pictures</Nav.Link>
<Nav.Link eventKey="Family">Family and Children</Nav.Link>
<Nav.Link eventKey="Pets">Animals/Pets</Nav.Link>
</Nav>
{this.state.page === "" && <PtfHome />}
{this.state.page === "PtfHome" && <PtfHome />}
{this.state.page === "Weddings" && <Weddings />}
{this.state.page === "Portraits" && <Portraits />}
{this.state.page === "School" && <School />}
{this.state.page === "Family" && <Family />}
{this.state.page === "Pets" && <Pets />}
</Row>
</Container>
</Styles>
)
}
It seems to work fairly well; however, I'm assuming there is a much more elegant way to do it that I don't have enough experience to know about and/or implement. I originally was going to put another stateful component in alongside the nav that would do the functionality and clear up the code a little, but I couldn't wrap my head around it quite right. Here's what I mean:
render() {
return(
<Styles>
<Container>
<Row>
<Nav
className="flex-column"
onSelect={selectedKey => {this.setState({ page: selectedKey })}}
>
<Nav.Link eventKey="PtfHome">Portfolio Home</Nav.Link>
<Nav.Link eventKey="Weddings">Weddings</Nav.Link>
<Nav.Link eventKey="Portraits">Portraits</Nav.Link>
<Nav.Link eventKey="School">High School Pictures</Nav.Link>
<Nav.Link eventKey="Family">Family and Children</Nav.Link>
<Nav.Link eventKey="Pets">Animals/Pets</Nav.Link>
</Nav>
<AwesomeStatefulComponent /> //This would get updated whenever a Nav.Link would get clicked
</Row>
</Container>
</Styles>
)
}
I'm not entirely sure what I should do here, thoughts?
I was on a wifi-less flight from Connecticut to Denver when I realized this one - with no wifi, my chosen fonts (from Google Fonts) and my Bootstrap styling for my Navbar don't load. I'm hoping there is a way to code these into the webpack (sorry if my terminology is off, I'm teaching myself here), so that the client won't have to query third-party resources, they'll all be included in the source for my site. Does that make sense?
Here's the errors thrown when loading without wifi:
GET https://unpkg.com/react-image/umd/index.js net::ERR_INTERNET_DISCONNECTED localhost/:16
GET https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css net::ERR_INTERNET_DISCONNECTED injectStylesIntoStyleTag.js:201
GET https://fonts.googleapis.com/css?family=Bad+Script|Marck+Script&display=swap net::ERR_INTERNET_DISCONNECTED
applyToTag @ injectStylesIntoStyleTag.js:201
addStyle @ injectStylesIntoStyleTag.js:227
addStylesToDom @ injectStylesIntoStyleTag.js:94
push../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js.module.exports @ injectStylesIntoStyleTag.js:251
./src/Assets/fonts.css @ fonts.css?2ef2:12
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
./src/Components/Header.js @ fonts.css?2ef2:37
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
./src/App.js @ index.css:4
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
./src/index.js @ index.css?e32c:37
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
0 @ serviceWorker.js:135
__webpack_require__ @ bootstrap:785
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous)
I'm sure this is going to be something really silly, I just don't even know where to begin finding that info...
Thank you in advance for your help! My code in full can be found here! As I said before, please give any and all comments, and don't be afraid to pull request! Teach me something!