React tutorial

About the tutorial

This short note is based and created assuming you are using a Linux (debian/ubuntu) system, most of the commands will run on other systems like Windows and Mac as well but may require some changes. In case you need to follow along and using a Windows system, you can use the Windows Subsystem for Linux to run the commands.

Installing react

In order to install react, node and npm are required. To install node and npm, run the following command:

1
2
sudo apt update
sudo apt install nodejs npm -y

Note: The above command may install a deprecated version of node and npm. To install the latest version of node and npm, run the following commands:

1
2
3
4
5
6
7
sudo apt update
sudo apt install curl
# replace .../setup_14.x with the latest version
# for example, if the latest version is 16.x, replace .../setup_20.x with .../setup_20.x
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt update
sudo apt install nodejs -y

To verify the installation run the following commands

1
2
node --version
npm --version

If installed sucessfully you should see the version of node and npm installed.

1
2
3
4
$ node -v
v20.5.1
$ npm -v
9.8.0

In order to install react, run the following command:

`1`	`sudo npm -g install create-react-app`

To verify the installation run the following command

`1`	`create-react-app --version`

Creating and running a react app

To create a react app, run the following command:

`1`	`npx create-react-app my-react-app`

This will create a react app named my-react-app in the current directory. To run the app, run the following commands:

1
2
cd my-react-app
npm start

This will start the react app and open it in the default browser. If it doesn’t open automatically, you can just click on the terminal link to open it in the browser.

File structure

Since we are using create-react-app, the file structure is already created for us.

`1`	`README.md node_modules/ package-lock.json package.json public/ src/`

node_modules/ conttains all the dependencies of the project. package.json contains the information about the project and the dependencies. src/ contains the source code of the project. public contains the static files of the project.
If we just cd into the src/ directory, we can see the following files:

`1`	`App.css App.js App.test.js index.css index.js logo.svg reportWebVitals.js setupTests.js`

Why to use react?

React is a JavaScript library for building user interfaces. With the standard HTML, CSS and JavaScript the browser engine creates a DOM (Document Object Model), which is a tree of objects. However with the complezity of applications increasing, the DOM becomes more and more complex. Here react comes into play, wherein all are arranged into components and it also creates something called as a virtual DOM, which is a copy of the actual DOM.

Standard practices in react

Components should be named with PascalCase
All the react components must be in the components/ directory. Source: /src/components

More about components

A component can be created using a function or a class. However using a function is more common. A component can be created using the following syntax:
1 2 3 4 5 6 7
function MyComponent() { return ( <div> <h1>My component</h1> </div> ); }

A component can be dynamically rendered using the following syntax:

1
2
3
4
5
6
7
8
function MyComponent() {
  const myVar = true;
  return (
    <div>
      {myVar && <h1>My component</h1>}
    </div>
  );
}

A jsx or tsx function can only return one component. If more are required, they must be wrapped in a div or a fragment. A fragment can be created using the following syntax:

1
2
3
4
5
6
7
8
9
function MyComponent() {
  return ( 
    <div>
        <h1>My component</h1>
        <h2>My component</h2>
    </div>
    // here div acts as a wrapper  
  );
}

Creating a basic hello world app

Create a file named Message.js in the src/ directory and add the following code:

1
2
3
4
5
function Message() {
  return <h1>Hello world</h1>;
}

export default Message;

Now in the App.js file, add the following code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
import Message from "./Message";

function App() {
  return (
    <div>
      <Message></Message>
    </div>
  );
}

export default App;

Now to run the app use

`1`	`npm start`

About react and JSX: React uses JSX, which is a syntax extension to JavaScript. Both JSX and TypeScript can be used in React but using JSX is more common.

Dynamic content Message.js can be updated to the following to display dynamic content:

1
2
3
4
5
6
function Message() {
  const myMessage = 'Bruh world';
  return <h1>Hello world {myMessage}</h1>;
}

export default Message;

Adding a button to the app

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
import Message from "./Message";

function MyButton() {
  return (
    <button>
      I'm a button
    </button>
  );
}

function App() {
  return (
    <div>
      <Message></Message>
      <MyButton />
    </div>
    
  );
}

export default App;

Using bootstrap

Bootstrap is a CSS framework that makes it easy to create responsive websites. To install bootstrap, run the following command

`1`	`npm i bootstrap@version`

example

`1`	`npm i bootstrap@5.2.3`

After installing bootstrap npm will automatically include it in the package.json file. To use bootstrap, add the following line to the App.js file.

contents of App.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import Message from "./Message";
import ListGroup from "./ListGroup";

function MyButton() {
  return (
    <button>
      I'm a button
    </button>
  );
}

function App() {
  return (
    <div>
      <Message></Message>
      <MyButton />
      <ListGroup />
    </div>
    

  );
}

export default App;

since we are using react its better to make a seperate file for each component. So create a file named ListGroup.js in the src/ directory and add the following code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
function ListGroup() {
	return 	<ul className="list-group">
	<li className="list-group-item">An item</li>
	<li className="list-group-item">A second item</li>
	<li className="list-group-item">A third item</li>
	<li className="list-group-item">A fourth item</li>
	<li className="list-group-item">And a fifth one</li>
	</ul>;
}

export default ListGroup;

React tutorial#

About the tutorial#

Installing react#

Creating and running a react app#

File structure#

Why to use react?#

Standard practices in react#

More about components#

Creating a basic hello world app#

Using bootstrap#