Better to know before learning React
Tags: react
Published: 2021-06-15 14:55:34

I thought it would be nice to know some of the main terms or useful tools before learning React. 
## React
React is front-end JavaScript library for building user interfaces or UI components.
reterence:
https://en.wikipedia.org/wiki/React_(JavaScript_library)

## React Tools
### Node.js
Node.js is a back-end JavaScript runtime environment (server environment) that executes JavaScript code outside a web browser. 

### npm (Node Package Manager)
npm is a collection of software tools that automates the process of installing, upgrading, configuring, and removing computer programs for the javaScript. All npm packages are defined in files called package.json(must be written in JSON).
reterence:
https://en.wikipedia.org/wiki/Npm_(software)

### npx (Node Package eXecute)
It comes with the npm 5.2.0 version. It is an npm package runner that can execute any package from npm registry.
reterence:
https://www.geeksforgeeks.org/what-are-the-differences-between-npm-and-npx/

#### npm vs npx
If you want to run certain package with **npm** then you have to specify that package to package.json and install it locally. But with **npx** package will automatically installed.  
```
npm install some-package
$ npm install -g create-react-app
$ create-react-app my-app
npx some-package
$ npx create-react-app my-app
```

### yarn
Yarn is new JavaScript Package Manager that is to solve a problems that has faced by teams(Facebook, Google, Exponent and Tilde) with npm.

### JSX (JavaScript XML)
**JSX is a syntax extension to javaScript.** It let us to write HTML elements in JavaScript. We don't have to use JSX, but it makes much easier to write react application as you can see in the below example:
```
//This example provided in https://www.w3schools.com/react/react_jsx.asp
//With JSX
const output = <h1>With JSX</h1>;
ReactDOM.render(output, document.getElementById('root'));

//Whitout JSX
const output  = React.createElement('h1', {}, 'Without JSX!');
ReactDOM.render(output , document.getElementById('root'));
```
reference:
https://www.w3schools.com/react/react_jsx.asp

### Babel
**Babel is a JavaScript compiler.** Transform ES6+ code into a backwards compatible version(older version) of JavaScript.
```
//This example provided in https://babeljs.io/docs/en/index.html
// Babel Input: ES6(ES2015) arrow function
[1, 2, 3].map(n => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});
```
reference:
https://babeljs.io/docs/en/index.html

### Webpack
**Webpack is an open-source JavaScript module bundler.** When compiling a React application with Webpack, It will outputting a single file which 'bundle' up all of our files with with dependencies properly placed.
reference:
https://webpack.js.org/

### React Router
By default, React comes without routing so to use it we need to install it. 
```
npm install react-router-dom
```

##BONUS tool
### Styling
#### React-Bootstrap
```
npm install react-bootstrap bootstrap@4.6.0
```
For detailed instruction of how to use visit the 
Link: https://react-bootstrap.github.io/getting-started/introduction/

#### Material-UI (implement Google's Material Design specification)
```
npm install @material-ui/core
```
For detailed instruction of how to use visit the
Link: https://material-ui.com/getting-started/usage/

## Create react app
Now you have all the basic source, to make a new project use following command.
```
$ npm install -g create-react-app
$ create-react-app < APP-NAME >  
//Once you have npm installed you can run the following both to install and upgrade Yarn:
$ npm install --global yarn
//To start up the server
$ cd < APP-NAME >
$ npm start 
or 
$ yarn start
```

As I learn, I will add more to this blog if I find more useful tools.