---
# System prepended metadata

title: '[React] Environment Setup'
tags: [docs]

---

# [React] Environment Setup
First, let us understand what React is, 
and how to set up the environment to develop React.

### What is React?
![image](https://hackmd.io/_uploads/SJuh0b3wR.png)
React^[1]^ is usually be misunderstood as a Javascript framework, but actually, React is just a library of Javascript that implement UI (user interface).

## Install Node.js

![image](https://hackmd.io/_uploads/r1C_9b2P0.png)

https://nodejs.org

### What is Node.js?
As you know, Javascript is the frontend programing language. 
Node.js^[2]^ is the backend environment that enable to run Javascript.

## Create React Project

1. Create the Vite
```shell!
npm create vite@latest
```

2. Enter your project name
3. Select your project framework: React
4. Select your project variant: Javascript
5. Run up your react project: 
```shell!
cd [your-project-name]
npm install
npm run dev
```
6. After you complete these operations, and you'll get a **localhost** link, 
that is your react project.

### What is Vite?
![image](https://hackmd.io/_uploads/Hkg8iWnvR.png)

- Introduce to Vite: https://youtu.be/vj8KSZjPTUU?si=mqBEvxagHahuPjGW

Vite^[3]^ is the package tool that make frontend development become more convenient.

### What is npm?
![image](https://hackmd.io/_uploads/rJO86ZnP0.png =30%x)
npm^[4]^ is a.k.a. node project manager, as you see, npm is a project menagement tool that let you install third party program quicker and more convenient.

### What is JSX
After you created a React project, you may see some JSX file, and what JSX is? 
JSX^[5]^ is a.k.a. Javascript syntax extension, let see an example first: 

```jsx=
const element = <h1>My calculus was failed.</h1>;
```

It just look like HTML, but it's not, 
and let see how the syntax extension work in JSX:

```jsx=
const subject = "calculus";
const element = <p>My {subject} was failed.</p>
```


## Reference
- [1] https://react.dev
- [2] https://nodejs.org
- [3] https://vitejs.dev
- [4] https://www.npmjs.com
- [5] https://zh-hant.legacy.reactjs.org/docs/introducing-jsx.html
- https://www.youtube.com/watch?v=CgkZ7MvWUAA


--- 

- Contributor: Ateto