A JavaScript project consists of bunch of .js files.

We work with "components" in JS project, and each component goes into its separate .js file. These are the files that we create for an application. E.g. component1.js_, component_2.js etc.

We also have "libraries" which we use in our project. E.g. React.js, Redux.js

These "components" and "libraries" are written in ES6 or JavaScript 2016. However, no browser yet fully support ES6. That means, the applications written in ES6 cannot be run in browsers at all, because browsers are not able to run code written in ES6.

To run ES6 applications in browser, we need to introduce an intermediate step called as "tooling" or "transpiling". This step converts ES6 code to vanilla JS, so that it can be run in any browser. To "transpile", we use a tool called as "Webpack", which is backed by another tool called as "Babel".

Webpack + Babel converts the application files into a single file (application.js in this example) which can be safely run in a browser.

React

React is a JS library that is used to produce HTML which is shown to user in a web browser. When we write react code, we write individual "components" or "views". Components / Views are snippets of code that produce HTML. Whenever we say "components" or "views", think of something that produces HTML.

When we write react code, we write different "components". We then nest this components one inside the other in different fashion to make complex applications relatively simple.

A "component" is a collection of JS functions that produces HTML. So, when we write a component, we are going to write JS which is going to produce HTML.

WHen we write React code, following steps are involved typically:

1. Create a component. It should produce some HTML.
2. Take this component's generated HTML and put it on the page i.e. in the DOM.

The component is a class, and we need to instantiate our components before we pass it to DOM to render.

React project now contains 2 main libraries:

1. React - The core react library which knows how to work with React components, how to nest them together, how to render them etc.
2. ReactDOM - It knows how to take a component and insert it into DOM.

Step -1: Writing a React Component

When we create a component, we create a class of a component.

const App = function() {
  return <div>Hi!</div>;
}

The HTML looking stuff in JS is called as JSX. JSX is a subset of JS that allows us to write the code what looks like HTML in JavaScript, but behind the scene, its really JavaScript.

JSX, just like ES6, cannot be understood by the browser. So, Webpack + Babel do some level of transpiling of this code to convert it to vanilla JavaScript before it gets rendered to browser.

We write JSX because JSX is something which produces actual HTML that gets rendered into the browser and the user ends up seeing. We can directly write vanilla JS instead of JSX (remember - JSX gets transpiled to vanilla JS in the end), but we don't want to do so, because the vanilla JS for above content would be:

const App = function () {
  return React.createElement(
    "div",
    null,
    "Hi!"
  );
};

JSX is not a requirement for using React. Using React without JSX is especially convenient when you don’t want to set up compilation in your build environment.

Each JSX element is just syntactic sugar for callingReact.createElement(component, props, ...children). So, anything you can do with JSX can also be done with just plain JavaScript.

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

The above JSX transpiles to:

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

Step 2: Rendering the HTML with DOM

The above component is a class and it can have many different instances. The function() can be thought of as a factory, that produces instances of the actual instances that gets rendered to the DOM.

In React, it is a good practice to code 1 component per JS file, no matter how small the component is!