Pebellslearn by building
0%
RoadmapsMatrixCoursesSandboxSign in
Collaboration  ›  Lesson

React and Node.js

React 13 minReact builds the screen from components that run in the user's browser, while a Node.js server runs the code users must not read or change, such as secret keys, safety rules and limits.

React and Node.js

Asha's builder wrote Pantry Pal with React for the screens and Node.js for the server. She does not need to master either. She needs one line she can draw with confidence: which code runs on the user's device, which runs on her server, and why her secrets and safety rules belong on one side of it.

The rule

React draws the screen; Node runs what users must not see or change.

React is a JavaScript library for building screens out of components: reusable pieces that take data and return what to show.

function DinnerCard({ title, minutes }) {
  return (
    <article className="card">
      <h3>{title}</h3>
      <p>{minutes} min</p>
    </article>
  );
}

Pantry Pal shows one DinnerCard per suggestion. Change the component once and every card changes. In an app built like Pantry Pal, this code is sent to the user's browser and runs there, where anyone can read it. Some frameworks can also run React on the server first, but the rule holds: whatever reaches the browser is public.

Node.js runs JavaScript on a server: your machine, not theirs. Pantry Pal's server receives the item list, calls the model with a key kept in the server's own settings, removes allergens and sends back the dishes.

// Runs on the server. The browser never receives this value.
const key = process.env.MODEL_API_KEY;

process.env reads environment variables: settings stored on the server, outside the code, so secrets never have to be written into files you share.

The two sides talk through requests. The React screen sends the pantry to a server address such as /api/suggest and waits for the reply. That address is the border between them, and the next lesson shows you how to watch every message that crosses it.

The shortcut

Could a user mess with it? For each piece of logic, ask whether it would be a problem if a user could read it or change it. Yes → server. No → it can live in the browser.

Sorting Pantry Pal's logicStep 1 of 4

  1. The model's secret key

    If users can read it, someone else spends your money. Server.

Checks in the browser are still worth having for speed, such as "add at least one item" before sending anything. But they are conveniences. The server checks again.

Drills

Answer fast — trust the rule.

quick drill

What is a React component?

quick drill

In an app built like Pantry Pal, where does the DinnerCard component's code run?

quick drill

What does process.env.MODEL_API_KEY do in the Node server?

quick drill

The form checks "at least one item" in the browser. Does the server still need to check?

Remember

  • React draws the screen; Node runs what users must not see or change.
  • Ask "could a user mess with it?" Yes means server.
  • Trap: secrets, safety rules or limits that live only in browser code.

Practice — level up

0/1 solved

Write your answer, then compare it with a rubric and a model answer.

ExplainBrowser or server?

Pantry Pal adds a paid plan that allows 50 suggestions a day instead of 10. Decide where each piece belongs (the Upgrade button, the check of whether a user has paid, the daily count, and the payment provider's secret key) and explain each choice with the 'could a user mess with it?' test.