A word about client side rendering

When reading up on react.dev, you will notice that pure client side rendering — like with Vite — is not mentioned at all.

We believe that pure client side rendering still has it's benefits for some usecases (e.g.. company internal app) and is a valid pick due to its reduced overall complexity. Thus our opinion might be different than the one communicated on many official React channels.

What is all this stuff?

JSX

You can use any JS expression within curly braces.

const name = 'John Wayne';

const header = <h1>Hello, {name}</h1>;

const math = <p>2 + 2 equals {2 + 2}</p>;

const formatted = <h1>Hello, {formatName(name)}</h1>;

const image = (
  <img
    src="./images/profile.png"
    alt="Profile picture"
    width={800}
    height={800 * 0.75}
  />
);

JSX

JSX is an expression too.

                    function getGreeting(user) {
    if (user) {
        return <h1>Hello, {formatName(user)}</h1>;
    }
    return <h1>Hello, stranger</h1>;
}
                

                    <div className="header">
    {getGreeting(user)}
</div>
                

JSX

JSX uses camelCase for most DOM element attributes, e.g. stroke-width becomes strokeWidth

                    regular HTML
<div class="header">hello, world!</div>
                

                    JSX
<div className="header">hello, world!</div>
                

JSX

Inline styles can be applied using object notation:

                    const styled = (
  <div style={{
    padding: "10px",
    backgroundColor: "dark-red",
    color: "white",
  }}>hello, world!</div>
);
                

The outer pair of curly braces belongs to JSX, while the inner pair comes from the object notation of JavaScript.

npm run build

Creates a production build of your app and puts it into in the dist folder.

npm run preview

Runs a local HTTP server that serves the production build from the dist folder.

npm run lint

ESLint is a tool that statically analyzes your code to discover potential problems (linting).

Vite comes preconfigured with ESLint. Problems are shown in the terminal.

Recommendation: Install the VS Code plugin for ESLint for highlighting and fix assistance in the editor.

• Explore React app like a DOM tree
• Modify state and props on the fly
• Tease out performance problems
• Programmatically manipulate components