Better to know before learning React

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.