React from Scratch

This repo contains the source code for each lesson of the React from Scratch Laracasts series with intemediate steps to view commit changes.

Some differences between HTML and JSX syntax

• We must return a single node element (multiple nodes throws errors). Use fragments instead.

return <React.Fragment>{/* multiple nodes */}</React.Fragment>

or simpler

return <>{/* multiple nodes */}</>

• Use className instead of class, because class is a reserved word in javascript.
• Use htmlFor instead of for in form labels, because for is a reserved word in javascript to iterations.
• All tags must end with a closing tag including html void elements as input, img, meta, etc. Closing tags is required in JSX
• Node elements (from native html) must be in lowercase, for example <h1>. If we use <H1> is understood as a javascript function or a React component.
• style tag is different to html, we use an object with map properties like

<h1 style={{ color: "red", fontStyle: "italic" }}>React & Vite</h1>

instead of

<h1 style="color: red; font-style: italic">React & Vite</h1>

If you need transform syntax from html or css to jsx, we can use an online tool as transform.tools.

Set up project

• Clone this project https://github.com/luisprmat/react-from-scratch.git
• Clone template design project https://github.com/luisprmat/luisprmat-react-from-scratch-template and copy folder public/images in this project in public/images. This project doesn't contain images to avoid duplication (save space in github)
• Install dependecies: npm install
• Run vite dev server: npm run dev

Connect to API

From lesson 21, we need to connect to API built in Laravel framework, this allow us fetch Puppies, create new Puppy and save likes in data base. To connect to API we must clone repo https://github.com/luisprmat/react-from-scratch-api, follow instructions to setup app.