A few days ago I started rebuilding my side project's web UI in React.js, mostly because I want to learn one of the new front-end libraries/frameworks, and because it will be good to remove the server side rendering and communicate between the frontend and backend using only an API.<p>Building components in React, using JSX is pretty straightforward. I can see a lot of potential value in separating my UI into many small components which I then compose.<p>What I'm lost at is three things.<p>1) How should I handle what I know as nested templates, or nested layouts? In case that isn't super clear I mean the homepage styling and header/footer, the user page styling and menu bar, and other concerns like that.<p>2) I've been using seed data to create my components so far, is using them with my API as simple as getting and posting what I need and passing it to the components?\<p>3) Navigation - I'm used to making a request to the server and having it return the correct view with all of the templates composed together in all their glory (boring I know :D). With react is there an official way of doing navigation? I've found some react-router libraries but none of them are officially from Facebook or the React.js team so I'm not sure if they are good, or if I am missing an official one.<p>Any advice or answers for these questions is appreciated!
1) A common pattern is having “page” components that render different layouts.<p>2) Yes, start out by learning to fetch data in componentDidMount and then calling set state with the result. It’s usually a good idea to do this at the top level of your app and pass it down to child components. Don’t look into Redux or MobX or anything like that until you run into problems. Most people do not need a separate library for managing state.<p>3. react-router is not “official” but it’s pretty damn close, probably the most popular. Look into next.js if you want client and server side routing.