How to start your first React App

Create React Project

Create Project by Step

Reference: https://react.dev/learn/start-a-new-react-project

Pre Requirements: install Node.js

Run the command suggested:

npx create-next-app nextjs

Then create a project named nextjs.

Then write app/* as the import alias.

Then run command:

npx create-react-app myproj

About npx

BTW, the meaning of the command npx:

The npx command is a tool that is bundled with the Node.js package manager (npm) since version 5.2.0. It allows you to run a package binary without having to install it globally on your system.

When you run npx followed by a package name and a command, it will first check if the package is installed locally in your project's node_modules directory. If it is not found, npx will download the latest version of the package and run the specified command using that version.

For example, running npx create-react-app my-app will download the latest version of the create-react-app package, and then use it to create a new React application called my-app. This avoids the need to install the create-react-app globally beforehand.

Additionally, npx also allows you to specify the version of the package you want to use, run a command from a specific file within a package, or even execute a GitHub repository directly.

So when we are trying to run npx create-react-app myproj, it means that there's a repository create-react-app that exists somewhere and we can execute it directly without having that repository locally. (Which may be found here: https://github.com/facebook/create-react-app)

React and DOM

Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web. (from: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)

We can say it comes from the HTML Tag.

Typically traversing DOM takes long, so people are trying to use DFS or BFS to make the traversal faster, or trying to re-organize the DOM. But reorganizing DOM is impossible because in HTML the DOM has its structure.

What React do is that it creates virtual DOM and only when there's a difference, React patch it to the actual DOM. So that only the updated part is changed.

When using jQuery, when we are trying to run document.getElementById(), the language traverse all the dom, finding the one that matches and return it. For React it is always partial update, that what makes it faster.

For information:

https://www.wikitechy.com/interview-questions/reactjs/what-is-react-dom/

To add some more information:

React DOM also handles the differences in the DOM API between different browsers, making it easier for developers to write cross-browser compatible code. Additionally, it provides methods for working with forms, events, and other aspects of the DOM that are necessary for building modern web applications.

Run React Project

cd myproj goes to the project we just created

What do npm start do?

npm start is a command used in Node.js projects to start the development server. When you run npm start, it will look for a script called "start" in the "scripts" section of the package.json file in the root directory of the project.

So we may try to find package.json first:

and we can see this part inside:

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

It shows that when we try to run npm start, what actually happen is the project is trying to run react-scripts (can be found in the node_modules).

We do not go further with that for now.

Back to the point, after running the command, we may see react is running in the below url:

http://localhost:3000/

So the advantage of this process is that there's already a built project so that we do not have to worry about how to build it, we just easily run it.

Something just like SpringBoot and its start.spring.io.

Index

The entry point of the application is index.html. (always this for web)

in the file we can see:

<div id="root"></div>

This div is empty and is taken control by the React, user are not supposed to write anything inside.

and in a corresponding file index.js, we can find:

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();

and if we try to inspect the page, we can see:

it shows that there are something automatically rendered into the root, and is also called App.

Although we are using React, but the browser only understand HTML, so anything that shows on a page should be in the HTML somewhere.

The App is a dom.

As suggested on the page:

Let's try to change something.

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>
          Hello World, Here is Qi Ren.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Then we can see:

The content showing is changed to Hello World, Here is Qi Ren.

Write a Component

We create a new folder components first.

Then we create HelloWorld.js.

After that we have to export, see this:

https://www.delftstack.com/howto/react/export-default-in-react/

So we write like this:

function HelloWorld() {
    return <div>Hello World</div>;   
}

export default HelloWorld;

about the diff between named and default export:

we can have multiple named exports in one module, but default only one.

But here's a question:

Is the export happening first? If so, how do the project do the package scan? Like how do we know the HelloWorld.js is need to be executed, so that it can be exported?

What can be the order between import and export? do we import first and then search for export?

After we changed something like:

import HelloWorld from './components/HelloWorld';

// ...

<p>
  <HelloWorld />
</p>

The page is changed like:

One thing need to be mentioned is that in the component path (full path), there cannot be any space inside.

This can be a good structure because inside the component, it's only doing something it need to do, like displaying.

About Component

The advantage of component can be it can be easily reused, and easily changed.

We can also easily reuse our previous work.

Route

How to navigate from one to the other.

https://medium.com/front-end-weekly/choosing-a-router-in-react-apps-85ae72fe9d78

There are four types of Router:

  • Browser Router

  • Hash Router

    • Similay with Browser Router with a little diff that there's a '#' between the domain and path

  • Memory Router

    • The component will change when you click on a link but the url will remain the same

    • Good for application that has a security requirement

  • Static Router

Choose the Router based on need.

A diff between React and Angular

Angular is like more JS-Based, React is like more Tag-Based

If error shows with react-router-dom, we do

npm install react-router-dom

Remember to install versions in 5xx (like npm install react-router-dom@5.2.0, or add it in package.json), because in v6 the Switch will be deleted.

https://www.moreonfew.com/attempted-import-error-switch-is-not-exported-from-react-router-dom/

The header:

import React from "react";
import { NavLink } from "react-router-dom";

function PageHeader() {
    return (
        <nav>
            <NavLink exact activeClassName="active" to="/">
                Home|
            </NavLink>
            <NavLink activeClassName="active" to="/register">
                Register
            </NavLink>
        </nav>
    )
}

export default PageHeader;

This is for creating hyperlink to navigate, when user click on the link, the page url will change correspondingly.

The main part:

// import './App.css';
import { BrowserRouter, Routes, Route, Switch } from 'react-router-dom';
import Home from './components/Home'
import PageHeader from './components/page-header';
import Register from './components/register';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <BrowserRouter>
          <PageHeader />
          <Switch>
            <Route path='/register' exact>
              <Register />
            </Route>
            <Route path='/' exact>
              <Home />
            </Route>
          </Switch>
        </BrowserRouter>
      </header>
    </div>
  );
}


export default App;

This part is using BrowserRouter to return the corresponding component of each url.

The header and footer is somewhere for us to put the common UI.

UseState

Let us add some code to register:

import { useState } from "react"

function Register() {

    const [id, setId] = useState("")
    const [firstName, setFname] = useState("")

    return <h2>Register</h2>
}

export default Register

The useState hook is a built-in React hook that allows you to add state to a functional component. It returns an array containing two elements: 1). The current state value 2). A function to update the state value

For const [id, setId] = useState(""),

This means create a state variable id with default value "", and if we want to update its value, we can do like this:

setId("12345");

What's more important, if we are displaying the state value, when we use the method to update it, React will re-render the component to the new value.

UseEffect

To test the effect of useEffect, we can update the code of Home.js:

The code:

import React, { useEffect, useState } from "react";

function Home() {

    const [userName, setUserName] = useState("qren");

    useEffect(() => {
        console.log("will mount called username: ", userName);
    }, [userName])

    useEffect(() => {
        console.log("will mount called: ");
    }, []) // will mount?

    const onClickMe = () => {
        console.log("clicked button");
        setUserName("qren clicked");
    }

    return (
        <div id="home">
            <h2>Home Page</h2>
            <button onClick={onClickMe}>Click Me</button>
        </div>
    )
};

export default Home;

Here's the log output:

will mount called username:  qren
Home.js:12 will mount called: 
Home.js:8 will mount called username:  qren
Home.js:12 will mount called: 
Home.js:16 clicked button
Home.js:8 will mount called username:  qren clicked

As we can see, for each time when we updated the useState value, the useEffect will be called.

Then we add one culumn to test the useState:

<p id="username">UserName: {userName}</p>

Then the output also changed correspondingly:

From:

UserName: qren

To:

UserName: qren clicked

We can also do similar things to read the user input and update it to the useState.

Combine the frontend and the backend

The below code will work like getting the user input and send it to remote server (not implemented)

import { useEffect, useState } from "react";

function Register() {
    const [id, setId] = useState("");
    const [firstName, setFname] = useState("");

    useEffect(() => {
        console.log("will mount called id: ", id);
    }, [id])

    async function handleSubmit(event) {
        data = {
            id: id
        }
        fetch("http://localhost:8081/server/user")
    }

    return (
        <div>
            <h2>Register</h2>
            <form onSubmit={handleSubmit}>
                <input
                    type="text"
                    name="id"
                    placeholder="id"
                    onChange={(event) => {
                        setId(event.target.value);
                    }}
                />
                <input type="submit" value="submit" />
            </form>
        </div>
    );
}

export default Register;
PreviousReactNextBig Data

Last updated