React workshop

Let's build an app listing dev-friendly cafes in Tokyo ☕️

This tutorial covers the React frontend of the app. To learn how to build its Rails backend, jump on Doug Berkley's Rails API tutorial 💎.

Table of Contents

1. Workshop links
2. Getting Started
   • Setup the project
   • Setup the your code editor
   • ush your project to production with Github Pages
3. How was this boilerplate created?
4. Acknowledgments

Workshop links:

• Slides
• Final app example

Getting started

1. Setup the project

Open if you're not a Le Wagon student

You will need to install the softwares below if not done yet:

• Install NodeJS (https://nodejs.org/en/) version 16 or over

Open if you graduated more than 6 months ago

You need node v16 or over. Run the following in your terminal:

nvm install 16.15.1
nvm use 16.15.1

Follow these steps:

• In your terminal, go to the folder in which you would like to build your react app.

• Then, run the below code:

gh repo clone yannklein/react-workshop
cd react-workshop
rm -rf .git
cd ref
code .
cd ../workshop
git init
code .
rm -rf package-lock.json
rm -rf ./node_modules
npm install
npm run dev

It will open 2 VS codes!:

• The ref one is the final code of this workshop (with the app built already) for your reference.
• The workshop one is the code base you will use to build your app during this workshop.

You should see this on your terminal:

• Open http://localhost:5173/ in your browser, you should see this:

2. Setup the your code editor

Setup for VS code

Go to Code > Preferences > Extensions, search and install "Reactjs code snippets" (some doc here)

Setup for Sublime Text

1. Go to SublimeText > Preferences > Package Control, search for "Package Control: Install Package" and press Enter. In the appearing list, search for "Babel" and press Enter.

2. Same operations for "Babel Snippets" (some doc here)

3. Got to SublimeText > Preferences > Key Bindings

Add the code of this link on the right side.

Push your project to production with Github Pages

1. First decide of a Github repo name. Go to the workshop/vite.config.js file and replace the base folder with your repo name:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  base: "/your-repo-name-here/"
})

2. In the terminal, commit your work, create your gh repository and push your code:

Make sure you replace your-repo-name-here in the below command ⚠️

git add .
git commit -m "finish the workshop base app"
gh repo create your-repo-name-here --public --source=.
gh browse

The Github repo webpage will open. Go to Settings > Pages and change source into 'Github Action'. The below shows were to click:

Screen.Recording.2024-03-12.at.18.55.33.mov

Finally, run this command in your terminal:

git push origin master
gh browse

3. The github repo will open, your project should be building in the Action tab. Wait for a short while to see the URL appearing:

gh-actions-small.mov

How was this boilerplate created?

The boilerplate has been create with Vite a lightning fast Frontend framework builder.

To install Vite and create a react boilerplate, run the following code on your terminal:

npm create vite@latest

You will see a terminal step by step interface that will guide you through the creation process.

For this workshop, I used the following options:

• Project name: react-workshop-feb2024
• Select a framework: React
• Select a variant: Javascript

Then, run the sugggested 3 commands to start up the project.

Acknowledgments

Thanks to the teams of:

• React
• Vite
• Le Wagon Tokyo

And special thank to my backend teammate for this project, Doug Berkley. (@dmbf29) Check out his Rails backend API workshop repo to learn to build a backend to your React application. Find here the video of the workshop.