Creating a Single-Page App in React using React Router | kirupa.com


#22

You can try adding the exact prop to your Route: <Route exact path="/about"/>

That should do it :slight_smile:


#23

hi i have upload this source to github


#24

can you implement all the react JS component life cycle in a single page which have home about and contact tabs?


#25

Thank you, this tutorial helped me a lot to get start with React.


#26

When i add the css it don’t load into the web, why this happened?


#27

Do you have the import statement for the CSS file specified? :slight_smile:


#28

yep of course, like u put it


#29

Strange. If you add something like the following into your CSS, does everything look bigger?

* {
   font-size: 200px;
}

Sometimes the selector names are misspelled or a random . or # has been added to a HTML tag selector :slight_smile:


#30

first & foremost, excellent series of posts - very informative and clear. Kudos to you !!

Just wondering - was there any reason you did not implement the styling in the ‘React way’ that you advocated in “Styling in React”, for this tutorial?

thanks


#31

Haha! I think you are referring to that I wrote here:

With that said, you should pick and choose the [styling] techniques that make the most sense for your situation. While I am biased towards React’s way of solving our UI development problems, I’ll do my best to highlight alternate or conventional methods as well. Tying that back to what we saw here, using CSS style rules with your React content is totally OK as long as you made the decision knowing the things you gain as well as lose by doing so.

There really is no “one true” approach haha:

  • For web sites like what we are basically dealing with in this example, the traditional CSS file with style rules is easier to maintain.

  • When I’m dealing with components used as part of a larger React app, then I lean towards the “React way” of styling using an object.

  • My preferred approach is to have a CSS file per component similar to what you see in the todolist tutorial. It provides the flexibility of CSS, specificity, the cascade, and other good things. It also keeps things isolated enough to have each component be independent-ish.

Use whatever approach makes sense for you. All of these approaches have their Pros and Cons :stuck_out_tongue:

(Glad you like these articles! Thanks for the nice comments!!!)

Cheers,
Kirupa


#32

Thanks for sharing your work. I see that you’re using css. I am wondering if I should use react-bootstrap?
Any advice?
Thanks again!


#33

Thanks for the tutorial. Need more help


#34

Thanks so much! So many of the React tutorials out there get so complex very quickly. I feel like you have a great balance of detail which is explained very clearly and in a way you don’t need to be an expert to implement. Exactly what I needed to carry learnings across to my own React SPA project - thanks again!!


#35

Glad you liked the content and the way it was presented :slight_smile: