Processing math: 0%
\newcommand{\N}{\mathbb{N}} \newcommand{\R}{\mathbb{R}} \newcommand{\C}{\mathbb{C}} \newcommand{\Q}{\mathbb{Q}} \newcommand{\Z}{\mathbb{Z}} \newcommand{\P}{\mathcal P} \newcommand{\B}{\mathcal B} \newcommand{\F}{\mathbb{F}} \newcommand{\E}{\mathcal E} \newcommand{\brac}[1]{\left(#1\right)} \newcommand{\abs}[1]{\left|#1\right|} \newcommand{\matrixx}[1]{\begin{bmatrix}#1\end {bmatrix}} \newcommand{\vmatrixx}[1]{\begin{vmatrix} #1\end{vmatrix}} \newcommand{\lims}{\mathop{\overline{\lim}}} \newcommand{\limi}{\mathop{\underline{\lim}}} \newcommand{\limn}{\lim_{n\to\infty}} \newcommand{\limsn}{\lims_{n\to\infty}} \newcommand{\limin}{\limi_{n\to\infty}} \newcommand{\nul}{\mathop{\mathrm{Nul}}} \newcommand{\col}{\mathop{\mathrm{Col}}} \newcommand{\rank}{\mathop{\mathrm{Rank}}} \newcommand{\dis}{\displaystyle} \newcommand{\spann}{\mathop{\mathrm{span}}} \newcommand{\range}{\mathop{\mathrm{range}}} \newcommand{\inner}[1]{\langle #1 \rangle} \newcommand{\innerr}[1]{\left\langle #1 \right \rangle} \newcommand{\ol}[1]{\overline{#1}} \newcommand{\toto}{\rightrightarrows} \newcommand{\upto}{\nearrow} \newcommand{\downto}{\searrow} \newcommand{\qed}{\quad \blacksquare} \newcommand{\tr}{\mathop{\mathrm{tr}}} \newcommand{\bm}{\boldsymbol} \newcommand{\cupp}{\bigcup} \newcommand{\capp}{\bigcap} \newcommand{\sqcupp}{\bigsqcup} \newcommand{\re}{\mathop{\mathrm{Re}}} \newcommand{\im}{\mathop{\mathrm{Im}}} \newcommand{\comma}{\text{，}} \newcommand{\foot}{\text{。}}

Sunday, August 25, 2019

React and WebPack

We would not use
?
1
npm create-react-app
to initiate a react project any more because it is built by a bunch of CLI that we don't understand. Instead we can build a react object on our own by using webpack and babel (that transpiles ES6 Javascript into ES5, a version that is friendly to most browser).

The steps are essentially taken form a youtube tutorial:


but unforturnately a few amendment is required to make things work, so I go through what I have done below.

Before going any further, our directory will look like:


 We start off installing all necessary dependency:
?
1
2
3
4
npm i react react-dom
npm i --save-dev webpack-dev-server webpack-cli
npm install @babel/cli @babel/core @babel/node @babel/preset-env @babel/preset-react html-webpack-plugin -D
npm install npm install -D babel-loader
For html-webpack-plugin we need a template, let's save it in ./~src directory, which is written as
?
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>My React App</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
Here <div> element with id "app" is a destination to which we build our react component. Next we configure our webpack and babel as follows: Create webpack.config.js and write
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
 
module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "index_bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: { presets: ["@babel/preset-env", "@babel/preset-react"] }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    })
  ]
};
Next in babel.config.js we write
?
1
2
3
module.exports = {
  presets: ["@babel/preset-env", "@babel/preset-react"]
};
Last 2 steps: First we write index.js to call the react library to render <App> component into <div id="app"/>
?
1
2
3
4
5
6
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
 
ReactDOM.render(<app>, document.getElementById("app"));
</app>
and finally we write our App component as simple as:
?
1
2
3
4
5
6
7
8
9
10
11
12
import React, { Component } from "react";
 
class App extends Component {
  render() {
    return (
      <div>
        <h1>My React App</h1>
      </div>
    );
  }
}
export default App;
Now we can run our script by npm start, where start is defined by:
?
1
"start": "webpack-dev-server --mode development --open --hot"
where open means open on save, and --hot works similar to --watch. Moreover, if we build our application in IIS, then webpack-dev-server can be replaced just by webpack.

My next target is to study how react and .net MVC interact to each other, i.e., using react in ASP.net framework.
張貼者： 於
標籤：

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)