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-loader1babel-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-react
The 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!