Setting Up a React Project from Scratch

  • my website: https://www.alicemoretti.com/ ,
  • 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="https://unpkg.com/react@17.0.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.development.js"></script>

Creating the first component

<script>
const App = () => {
return React.createElement(
"div",
{},
React.createElement("h1", { id: "my-brand" }, "Adopt me")
);
};
ReactDOM.render(
React.createElement(App),
document.getElementById("root")
);
</script>

npm

Git

Parcel

"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": [
[
"@babel/preset-react",
{
"runtime": "automatic"
}
]
]
}
/*
const Pet = (props) => {
return React.createElement("div", {}, [
React.createElement("h1", {}, props.name),
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 (
<div>
<h2>{props.name}</h2>
<h3>{props.animal}</h3>
<h3>{props.breed}</h3>
</div>
);
};

export default Pet;

Browserslist

"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

69 Followers

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