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

### What is React?
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


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

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:

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?

- 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?
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:

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:

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