About React

React is a javascript library (not actually a framework like angular or next.js).
We use react as an abstraction to easily create reactive content in the browser.
Primarily we use React library and ReactDOM.

A simple react app.

On your computer, create a html file called index.html.
Inside of that html file, we need react library and babel. For now we can use CDN to acquire the package.
To create our react app we need a root to render our app.
Example below is how we can simply using react with inline HTML script.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple React</title>

    <!-- here we require the react and reactDOM from CDN -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

    <!-- Here we are using babel for JSX-->
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>

</head>

<body>
    <!-- here we declared the root of our application -->
    <div id="root"></div>
</body>

<script type="text/babel">
    class Main extends React.Component {
        render() {
            return (
                <h1>Hello From React </h1>
            )
        }
    }

    ReactDOM.render(<Main />, document.getElementById('root'));
</script>

</html>

Inside vscode, we can open our index.html with a live server extension to see our react app.
We’ll see that our Main component get rendered on the browser.

Using Vite.

Instead of using Live Server vscode extension, we can use vite.
Vite is a build tool that helps developers to easily create and deploy web applications with minimal configuration.
It offers development experience by providing server tools to easily preview and build our javascript app.
to use vite, we need node.js and npm.
inside a project folder, run the following in the terminal.

npm init -y

touch index.html

npm install --save-dev vite

after vite installed, add the following inisde the script section of our package.json

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },

our new package.json file will look something like this

{
  "name": "vanilla",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "vite": "^7.0.0"
  }
}

then for the content of our index.html we can just copy from previous example.
to preview our react application we can run npm run dev
we will see something like this on the console.
then we can click on link to see our application.

Install React as npm packages.

Because we already make use of npm to install vite, we should use it to install react and react dom as packages instead of requiring it from CDN.
to do this we can run the following comands:

npm install react react-dom

npm install --save-dev @vitejs/plugin-react

after that we can make few changes in our project structure by adding the following files.
we’ve added src/App.jsx , src/main.jsx, and vite.config.js.

Configure react plugin for vite.

inside our vite.config.js we add the react plugin we previously install using npm @vitejs/plugin-react

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react'; // import the plugin

export default defineConfig({
    plugins: [react()], // call the plugin
});

Update our index.html

In our index.html, we are no longer using Babel or requiring React from CDN.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple React</title>
</head>

<body>
    <!-- here we declared the root of our application -->
    <div id="root"></div>
</body>

<script type="module" src="/src/main.jsx"></script> 

</html>

main.jsx

we moved the code to render our app inside the main.jsx

import React from 'react'; // import react from node_modules
import ReactDOM from 'react-dom/client'; // import reactDOM from node_modules
import App from './App.jsx'; // our Main Component sits here, we renamed it as App

ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
);

App.jsx

import React from "react";

class Main extends React.Component {
    render() {
        return (
            <h1>Hello From React using Vite</h1>
        )
    }
}

export default Main;

with all these setups, we will get this

.rw-r--r--	github	github.com/nurbxfit
.rw-r--r--	linkedin	linkedin.com/in/nurfitri
.rw-r--r--	email	me@nurbxfit.com

React Basic

About React

A simple react app.

Using Vite.

Install React as npm packages.

Configure react plugin for vite.

Update our index.html

main.jsx

App.jsx

CONNECT