React Overview

Setting up a Development Environment

1. Create folder and package.json file

mkdir diy-react
cd diy-react
npm init --y

Install Main Dependencies

2. Install Express

npm i express

3. Install React and React-dom

npm i react react-dom

4. Install webpack

npm i webpack webpack-cli

Webpack is a module bunlder. A react application usually contains multiple modules and depends on many external modules too. When we ship the application to the browser we need to bundle all necessary files into a single bundle and ship it to the browser.

5. Install Babel

npm i babel-loader @babel/core @babel/node @babel/preset-env @babel/preset-react

Babel is the package that compiles JSX into regular React API calls.

Install Development Dependencies

6. Install nodemon

npm i -D nodemon

nodemon is a package that lets us automatically restart node when we change things in node.

7. Install ESLint

npm i -D eslint babel-eslint eslint-plugin-react eslint-plugin-react-hooks

ESLint will immediately analyze your code and tell you the problems, you can have consistent styling to your code by using ESLint.

8. Configure ESLint

Go to your project directory, create a new file called ‘.eslintrc.js’ and paste the below code.

module.exports = {
    parser: 'babel-eslint',
    env: {
      browser: true,
      commonjs: true,
      es6: true,
      node: true,
      jest: true,
    },
    parserOptions: {
      ecmaVersion: 2020,
      ecmaFeatures: {
        impliedStrict: true,
        jsx: true,
      },
      sourceType: 'module',
    },
    plugins: ['react', 'react-hooks'],
    extends: [
      'eslint:recommended',
      'plugin:react/recommended',
      'plugin:react-hooks/recommended',
    ],
    settings: {
      react: {
        version: 'detect',
      },
    },
    rules: {
      // You can do your customizations here...
      // For example, if you don't want to use the prop-types package,
      // you can turn off that recommended rule with: 'react/prop-types': ['off']
    },
  };

9. Configure Jest

jest is the package to test React applications

npm i -D jest babel-jest react-test-renderer

10. Basic React application structure

diy-react/
  dist/
    main.js
  src/
    index.js
    components/
      App.js
    server/
      server.js

dist: for distribution, webpack will put production-ready files to here
src: for React code files
components: for React components
server: for server files

11. Configure Webpack and Babel

Under project root directory, create a new file called ‘babel.config.js’ and paste the below code

module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react'],
};

Under project root directory, create a new file called ‘webpack.config.js’ and paste the below code
This will tell webpack to invoke babel for all files that end with .js. This is to convert JSX code to regular React API calls.

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};

12. Create npm scripts for development

"dev:server": "nodemon --exec ./node_modules/.bin/babel-node src/server/server.js --ignore dist/",

This script will run nodemon command, which is run babel-node on a server.js file

"dev:bundler": "webpack -w --mode=development"

This script will run the webpack command, in Watch mode(readable code, not minified) and in development node

Reference

1. Setting up React Development Environment

---

• For Angular, Vue and Ember they put fake JS in HTML. Whereas React put fake HTML in JS (JSX), React is Javascript-centric, makes JS more powerful to handle HTML

• React is lightweighted, you can slowly migrate your app from other technologies to React

• React is lean and you only import the package you want to use.

• React is one way data binding, it required more code, you need to expilictly declare a change handler. But this gives you more control and east to debug

The Basics

React’s Basic Concepts

Components

• Like functions
• Input: props, state | Output: UI
• Reusable and composable
• Can be used as normal HTML tags <Component />
• Can manage a private state

Reactive updates

• When the state of a React component, the input, changes, the user interface it represents, the output, changes as well

Virtual views in memory

• We don’t write HTML when building applications using React. We generate HTML using Javascript
• Build smaller components such as buttons, forms, then build more complex components using the smaller components. Each component consist of HTML and JS.

Tradeoffs

Framework vs Library

• Frameworks offer more opinion and standardization, but React’s library approach allows you to select only the tools that you need and pick the best tools for your use case.

Data Binding

• Other frameworks strive to be concise, using techniques like two‑way binding and abstractions over JavaScript operations. But React is explicit, so code is more readable and scalable at the admitted expense of doing a little more typing on the keyboard.

JS Centric

• React chooses to be JavaScript‑centric instead of template‑centric. React’s JavaScript‑centric approach is easier to understand and debug and requires learning less unique syntax, but at the cost of requiring modern JavaScript knowledge.

Separate vs Single File

• Many frameworks utilize a separate template file. In contrast, each React component is a single autonomous file that you can work with and test in isolation.

Standard vs Non-standard

• The web component standard has been around for years, yet it continues to lack broad adoption. Non‑standard approaches, like React and Angular, remain more popular because they offer the same power, more rapid innovation, and a superior developer experience.

Community vs Corporate

• And React is corporate‑backed, which means its design is influenced by Facebook’s needs. But Facebook continues to accept input from the community and has evolved React into a highly flexible and well‑supported system.

Decisions to make

1. Develop environment - create-react-app
2. Classes or Functions - Functions
3. Types - PropTypes, TypeScript, Flow

• TypeScript is a superset of JavaScript that adds strong typing support and compiles down to plain JavaScript
• Flow: adding static type checking to JavaScrWipt

4. States - Plain React, Flux, Redux, MobX

• Component State: Plain React
• Centralized State: Flux, Redux
• Observable State: MobX

5. Styling - Plain CSS/Sass/Less, CSS in JS
   W