Welcome to the first tutorial followed by a series of tutorials on React to which, I promise, will be fun, concise, interesting, informative and will aim to cover most of React concepts with projects. These tutorials are a series of blogs which I learnt from lectures - FCC React, JVL Code Complete React. I would absolutely recommend these lectures, and would suggest to use these blogs as a notes for revision. Now let’s get started.

What’s React.

React is a javascript library to create user interfaces - according to the official React website definition. Why React? and how exactly it is useful? Let’s find out!

Why React?

The standard traditional HTML Websites sends a request to the web server and in return the web server sends back a response to the website. This way, for every refresh, there will be certain loading time to get the response back from the web server. You can notice it by checking “Inspect” option and response of traditional websites (without using React). Obviously, this is a major disadvantage right! That’s why React comes into picture.

Using React, along with the first response, there will be confined javascript codes, which only communicates again with the web server during every refresh. This reduces the loading time and in turn, increases the efficiency.

Difference between Angular and React

React App within HTML

Let’s design our first react application within our HTML.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        function HelloWorld(){
            return <h1>Hello World <br/>
               Hello Welcome </h1>
        }
        const {createRoot} = ReactDOM
        const root = createRoot(document.getElementById('root'));
        root.render(<HelloWorld/>)

    </script>
</body>
</html>

We first imported 3 scripts - 2 from CDN (https://legacy.reactjs.org/docs/cdn-links.html) and 1 from Babel CDN. By the way, CDN refers to ‘Content delivery networks’.
Later, we created a div with an id - ‘root’.
Inside a script tag, we created a component(In React, functions are called as components, Let’s deal it later) - Hello World, which has a JSX(Javascript XML). Babel, which we imported translates JSX to Javascript code.
Next, we created an object- ReactDOM. - from REACT-DOM Library which we imported. ReactDOM.createRoot is used to create a root for rendering React components. It's part of React 18+ and enables concurrent rendering (better performance).
document.getElementById('root'): This selects the <div> element with the ID root, where the React component will be rendered and is stored in variable root.
root.render(<HelloWorld />): This renders the HelloWorld component inside the #root element.

This sounded good, but what if when we are building some high level applications. A single HTML isn’t enough right? That’s when Components, Routers, Hooks, Models come into picture which we will see in further tutorial.

Creating a React App and running it.

Install Node.js from the official website and check ‘node -version’ in the command prompt/terminal for the node version installed.

Create a folder and open VS Code and within that folder > terminal > Type ‘npx create-react-app’.

Give ‘npm start’ and your application will run in localhost://port number, in the default browser.

Let’s analyse!

Once we executed the above commands. - we would get a series of folders and files inside it - public, src etc.

Inside public there will be a basic index.html file.

Inside src there will be a series of files, lets focus more on 2 files namely - App.js and index.js.

index.js :

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

This is the centralised React file which imports two major libraries - React and React-DOM. The code looks familiar right! Yes only difference is the “strictMode” which we will see later! Notice how an App.js file is imported as ‘App’ - and is used as a component.

App.js :

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

export default exports a single value, function, class, or object from a module, allowing it to be imported and used in other parts of your code or other modules.

This is all about the basics of React. Now let’s dive more into React through the upcoming tutorials. Stay tuned!s

React - Tutorial 1.