Often we need to create single-page web applications for various purposes, such as for our IoT projects or to create some server monitoring web page or just an informational web page for a GitHub repo.
Many of us tend to use PHP, Ruby, and Python even to create simple apps. When we need just to create an informational web page for a GitHub repo, then we edit some HTML templates. These methods are still great but today there are easier ways to create professional-looking webpages. There are some JavaScript libraries such as React.js, and Next.js which are created for building user interfaces based on components. These are far from difficult to learn when they are about simple things.
As because today there are things such as separate backend services (such as Firebase, AppWrite, Supabase etc) and application hosting service such as Netlify, this way of deployment is easier. Web applications developed in this way can easily be converted to Android or iOS apps. Also, Firebase and Supabase are popular ways to develop things with Arduino and ESP32.
---
So, let’s get started.
Install an IDE and the Required Components
It is convenient to use an IDE to write code and edit on localhost.
Visual Studio Code or VS Code is free to download and use. Please install it on your local computer. Next, download and install Node.js (installer for GUI) from their official site for your operating system.
Later you can install react, create-react-app, supabase, firebase and netlify via npm (npm is included in Node.js). Create React App is an officially supported method to create single-page React applications. This Create React App is the main thing. Usually, we need two more stuff, namely TailwindCSS and DaisyUI. We can install all of these using npm, but instead of npm, you can use npx. This will avoid odd errors (npx comes with npm 5.2+ and higher). Open Command Prompt if you are using Windows OR open the terminal app if you are using MacOS or Linux and run the commands to install.
1 | npm install -g create-react-app |
Get Started Developing With React app
Now, launch VSCode and choose File > Open. Then select the folder that was created by create-react-app. VSCode includes a terminal, which can be accessed by clicking Terminal > New Terminal on the top menu. Open src > App.js on the left menu. Run these commands:
1 2 3 4 | npm install --save supabase axios npm install daisyui tailwindcss postcss autoprefixer react-router-dom npx tailwindcss init -p npm start |
You should change the directory to somewhere else to create the example app, such as:
1 2 3 | cd Documents create-react-app my-basic-example # npx create-react-app my-basic-example |
This will create these files:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | my-basic-example ├── README.md ├── node_modules ├── package.json ├── .gitignore ├── tailwind.config.js ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src ├── App.css ├── App.js ├── App.test.js ├── index.css ├── index.js ├── logo.svg ├── serviceWorker.js └── setupTests.js |
The src directory is the place where the source code for our application lives.
The public directory contains files that will be read by our browser when we are developing the app; there will be the index.html. React’s backend will inject code into this file.
The package.json file contains information about our project. You don’t need to understand this file.
The above command will start open port 3000 and you can see your web application live at localhost:3000. Your command create-react-app my-basic-example created a template which includes a SVG logo of React.js. We could use this kind of command instead to use any other template:
1 | npx create-react-app my-app --template [template-name] |
You will get the list of templates here. You can search with TailwindCSS, DaisyUI, supabase, firebase, netlify etc.
Right-click src > New File and create canvas.jsx, supabase.jsx, and then style.css. What is .jsx? You can read this document :
1 | https://legacy.reactjs.org/docs/introducing-jsx.html |
style.css is for styling the application. For example, we added canvas.jsx, but there is no CSS for it.
canvas.jsx is for rendering an HTML5 canvas element which allows the creation of graphics on the web using JavaScript. You can search the web or read the document to learn about it.
supabase.jsx is an optional file to connect with the backend server of supabase. Alternatively, you can load the required info via index.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import { createClient } from "@supabase/supabase-js"; import { Provider } from "react-supabase"; import App from "./App"; import { BrowserRouter } from "react-router-dom"; const supabaseUrl = process.env.REACT_APP_SUPABASE_URL; const supabaseAnonKey = process.env.REACT_APP_SUPABASE_ANON_KEY; const client = createClient(supabaseUrl, supabaseAnonKey); ReactDOM.render( <React.StrictMode> <BrowserRouter> <Provider value={client}> <App /> </Provider> </BrowserRouter> </React.StrictMode>, document.getElementById("root") ); |
Next, navigate into your tailwind.config.js file and modify the following code to this (I have added plugins: [require("daisyui")]):
1 2 3 4 5 6 7 8 9 10 | module.exports = { darkMode: 'class', content: [ "./src/**/*.{js,jsx,ts,tsx}", ], theme: { extend: {}, }, plugins: [require("daisyui")], } |
DaisyUI has a theme generator and examples:
1 | https://github.com/daisyui/react-daisyui |
This article ends here since you have to study the documents and examples to create your own thing.
