Setting Up a React Project from Scratch

  • my website: ,
  • a simple page fetching data from an external API and using useState, useEffect, and useParams,
  • a blog website that allows users to read blogs, add them, and delete them. As a side note, I have coded this project while following an excellent React tutorial I highly recommend (Full React Tutorial by The Net Ninja),
  • the blog you are reading that is implemented with Gatsby.js, a React-based framework,
  • a wedding website I recently finalized for a client that is also made with Gatsby.js.

React and ReactDOM

  • React is the high-level API, it contains all the methods but doesn’t contain a way to render itself inside the browser.
  • ReactDOM is the library interacting with the DOM (duh..), necessary for our application to be visible inside the browser.
<script src=""></script>
<script src=""></script>

Creating the first component

const App = () => {
return React.createElement(
React.createElement("h1", { id: "my-brand" }, "Adopt me")




"scripts": {
"dev": "parcel src/index.html",
import React from "react";
import ReactDOM from "react-dom";
  • Webpack
  • Browserify
  • esbuild
  • Rollup

Babel (not the language learning app)

"presets": [
"runtime": "automatic"
const Pet = (props) => {
return React.createElement("div", {}, [
React.createElement("h1", {},,
React.createElement("h3", {}, props.animal),
React.createElement("h3", {}, props.breed),

/*When the JSX below runs through Babel and Parcel, it outputs the code above.
const Pet = (props) => {
return (

export default Pet;


"browserslist": [
"last 2 Chrome versions",
"last 2 Firefox versions"



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alice Moretti

Alice Moretti


Frontend-developer, nature addicted, runner, coffee & yoga lover living in Helsinki.