Bash Commands to Setup

# create project
npm create vite@latest my-app -- --template react

# move into project
cd my-app

# install dependencies
npm install

# start dev server
npm run dev

Then open the localhost URL it gives you.

After that, a very common workflow is:

# open VSCode
code .

# run dev server again later
npm run dev

Useful commands:

# install a package
npm install package-name

# install a dev-only package
npm install -D package-name

# stop server
CTRL + C

For example, installing React Router:

npm install react-router-dom

Or Tailwind later:

npm install tailwindcss @tailwindcss/vite

You can also make a super fast throwaway test app:

npm create vite@latest test-app -- --template react && cd test-app && npm install && npm run dev

That creates, installs, and runs everything in one shot.

React Basic Needs

function App() {
  return (
    <main>
      <h1>Hello React</h1>

      <section>
        <p>Start building here.</p>
      </section>
    </main>
  )
}

export default App

A slightly more realistic starter with state and an event:

import { useState } from "react"

function App() {
  const [count, setCount] = useState(0)

  function increment() {
    setCount(count + 1)
  }

  return (
    <main>
      <h1>React Test Page</h1>

      <p>Count: {count}</p>

      <button onClick={increment}>
        Increment
      </button>
    </main>
  )
}

export default App

And the matching main.jsx:

import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App"

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

The biggest syntax things to notice coming from LiveView:

HTML inside JavaScript = JSX
class becomes className
JS values go inside {}

Example:

const name = "Adam"

<h1>Hello {name}</h1>

Conditional rendering:

{count > 5 && <p>Big number</p>}

Loop rendering:

const players = ["Adam", "Bob", "Jane"]

<ul>
  {players.map(player => (
    <li key={player}>{player}</li>
  ))}
</ul>

That .map() pattern is the React equivalent of:

<%= for player <- @players do %>

in LiveView.

Let’s get Started

When we are using any sort of code within React we need to use className instead of class because class is a reserved name within JavaScript.

{/* Block Comments */}

The comments need to be wrapped in curly braces to make them literal. We also need to use the Capital letter for function names as they will be treated differently. Think lower-case for native HTML and upper-case for user made functions.

What Are Components in React, and How Do They Work?

For this we are going to work with the start of components. We need to define the function with a capital letter for the name and then set the return.

function Greeting() {
  const name = "John"
  {/* The result will be Hello John*/}
  return <h1 className="title">Hello {name}</h1>;
}

For a return with more than one line we need to wrap the return with <Fragment> or <> so that it knows that you are using more than 1 line.

function Greeting() {
  const name = "John";
  return (
    <Fragment>
      <h1>Hello {name}</h1>
      <p>Nice to meet you.</p>
    </Fragment>
  );
}

How Do Default and Named Exports Work in React Components?

Now we need to learn how to import and export components. Let’s make a Cat.jsx file that will house our Cat function. We will need to define it and then export it so that other files can see it.

function Cat() {
  return (
    <div className="card">
      <h2>Mr. Whiskers</h2>
      <img
        src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg"
        alt="Tuxedo cats running on dirt ground."
      />
    </div>
  );
}

export default Cat;

Then once inside your main App.jsx you can import it and then add it to the render on the page.

import { useState } from 'react'
import './App.css'
import Greeting from "./components/Greeting"
import Cat from "./components/Cat"

function App() {
  return (
    <main>
      <Greeting />
      <Cat />
    </main>
  )
}

export default App

Keep in mind that there are some keywords that you can use to assume that a function will be the default.

/* at the the function naming */
export default function Cat()


/* at the end */
export default Cat;

You can even nest imports within other children but try to keep this to a minimum so that you are not having to trace too many imports. Okay let’s create an other component file called Animals.jsx that will house a Dog and a Cat function.

// Animals.jsx
export function Cat() {
  return <h2>Mr. Whiskers</h2>;
}

export function Dog() {
  return <h2>Fido</h2>;
}

// App.jsx
import {Dog, Cat} from "./Animals"
// or 
import {Cat as Kitty, Dog} from "./Animals"
// or if the Cat was the default export
import Cat, {Dog} from "./Animals"

...

    <Kitty />
    <Dog />

What is Vite, and How Can It Be Used to Set Up a New React Project?

Okay we have the bash syntax above but there might be more information within this section.

The package.json file will hold all the meta data about your project.