react

Posted 2021-01-05 sunlili

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react相关的知识，希望对你有一定的参考价值。

搭建开发环境

mkdir react-demo

cd react-demo

npm init -y

npm install react react-dom -S

npm install webpack webpack-cli webpack-dev-server babel babel-cli babel-core [email protected] babel-preset-react babel-preset-env babel-preset-es2015 -D （解析jsx和es6语法）

注意：babel 6.x版本必须安装[email protected] babel 7.x 必须安装[email protected]

webpack.config.js

module.exports = {
entry: ‘./main.js‘,
output: {
path: ‘/‘,
filename: ‘index.js‘,
},
module: {
rules: [{
test: /.js?$/,
exclude: /(node_modules)/,
use: {
loader: ‘babel-loader‘,
options: {
presets: [‘env‘, ‘react‘, ‘es2015‘]
}
}
}]
}
}

index.html

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>React App</title>
</head>

</html>

main.js

// React 是 React 库的入口
// React组件可以通过扩展 React.Component来定义
import React, { Component } from ‘react‘;
// react-dom 包提供了 DOM 特定的方法，可以在你的应用程序的顶层使用，如果你需要的话，也可以作为 React模型之外的特殊操作DOM的接口。但大多数组件应该不需要使用这个模块。
import ReactDom from ‘react-dom‘;

class App extends Component {
render() {
return <h1> Hello, world! </h1>
}
}

// 渲染一个 React 元素到由 container 提供的 DOM 中，并且返回组件的一个引用
ReactDom.render(
<App />,
document.getElementById(‘root‘)
)