preface

React – WebPack +React

Following the book, the author has been able to use Webpack to develop simple JS files, and real-time display in the browser; So what do authors do if they want to use a front-end library like React?

React front-end library development with WebPack

Support the React

Install the React


npm i react react-dom -S

Copy the code

Modify the SRC/index. Js

import React from "react"
import ReactDOM from "react-dom"
export default function App() {
  return (
    <div>
      <h2>I am the react</h2>
    </div>)}const root = document.getElementById("root")
ReactDOM.render(<App />, root)
Copy the code

Now run

npm start
Copy the code

This must be an error, because Webpack doesn’t know React and needs to convert React to normal, runnable Javascript, which uses Babel

Babel:Babel is a JavaScript compiler

Install Babel


npm i babel-loader @babel/core @babel/preset-react -D

Copy the code

Explanation:

  • @babel/core: is the core library of Babel. All the core apis are in this library. These apis are called by babel-loader1
  • babel-loader: @babel/core is doing es6 syntax converters and making up for missing functionality, but when webPack js, WebPack doesn’t know how to call these rules to compile JS. This is where the babel-loader comes in, which acts as an intermediate bridge to tell WebPack what to do with JS by calling the API in Babel /core1.
  • @babel/preset-reactThe React syntax is compiled using the Babel plugin2.

Dependencies continue after installation

Modify webpack.com mon. Js

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
  entry: {
    // other
  },
  output: {
    // other
  },
  plugins: [
    // other].module: {
    rules: [{test: /\.(js|jsx)/,
        loader: "babel-loader",},],},}Copy the code

new.babelrc

Create a new. Babelrc file in the root directory and edit the following code

{
  "presets": ["@babel/preset-react"]}Copy the code

This file tells WebPack to use @babel/preset-react when using Babel to parse react files

run

Now re-execute

npm start
Copy the code

Give it a try. Open http://localhost:8888/ in your browser and you’ll see the image below

What if you want to use Typescript in React? After all, Typescript is a trend right now; How to deal with it?

Support the Typescript

Simple, install @babel/preset-typescript and change the Webpack configuration

Install @ Babel/preset – typescript

Babel /preset-typescript: Several Babel plug-ins are preset to compile typescript syntax 2

npm i @babel/preset-typescript -D
Copy the code

Modify the. Babel file

{
  "presets": ["@babel/preset-react"."@babel/preset-typescript"]}Copy the code

Modify webpack.com mon. Js

// other
module: {
    rules: [{test: /\.(js|jsx|ts|tsx)/,
        loader: "babel-loader",}]},Copy the code

Modify the SRC/index. Js

import React from "react"
import ReactDOM from "react-dom"
import Home from "./Home.tsx"
export default function App() {
  return (
    <div>
      <h2>I am the react</h2>
      <Home />
    </div>)}const root = document.getElementById("root")
ReactDOM.render(<App />, root)
Copy the code

Since index.js introduces the Home component, you need to create a new home.tsx file

Create a new home.tsx file

import React from "react"

type Props = {}

export default function Home({}: Props) {
  return <div>I am a typescript</div>
}
Copy the code

Current directory structure

Restart the

perform

npm start

Copy the code

You should see the copy in the image below in your browser

conclusion

React+Typescript support is now available in webPack + React. I hope this article helped you.

In this article, the functions and uses of Babel are referred to the official Babel documentation. Here, I would like to thank the developers in the open source community, because of your contributions, I have learned a lot of front-end skills.

Due to the author’s limited level, if any inadequacy or error in the article, welcome to comment area. Thank you very much!