Full Stack (linking it all)

Greetings!

I’m a little confused because the web development path teaches react, express and sqlite separately but doesn’t quite give a practical example of how to connect the three at the end if we want to setup a web app using them.
What is recommended way to proceed?

Hey @emanuelgf

I’m generalising slightly, but if you think of it like this it might be a bit clearer:

  • React is great for building user interfaces (“front end”), so can be used to put together the bits of your web app that the end user gets to see,
  • Express is the server-side (“back end”) JavaScript that does the heavy lifting, like querying data, processing user input and so forth,
  • and SQLite is the data store that holds the goods.

To put it in the context of a small blog application, the web pages that your readers see would be made with React, the work involved in fetching all your blog entries from the month of June, 2019 would be processed by Express, and the actual content of your blog posts - the title, body, tags, comments etc - would be stored in tables in SQLite.

That help at all?

3 Likes

Thanks for the reply. :smile:
So, lets say that the front end could change over time or there could be multiple front ends. How should the project be structured?
I’m guessing the express api and database in one totally separate project with its own git repository and package.json file. Is this correct?

That’s certainly one approach you could take if you wanted, equally if you wanted to treat the entire application as a single project that would probably also work.

You may find it helpful to look at examples of how others have built their sites. For example, here’s a React starter kit project on GitHub which uses a React front-end and Express back-end.

That project is meant to be a starting point you can flesh out to produce your own project, so should be helpful. :slight_smile:

If you want to look for more stuff on GitHub using React, it’s here: https://github.com/topics/react
Also, if you wanted Express: https://github.com/topics/express

Hope that helps. :slight_smile:

2 Likes

Thanks for the help. :+1: