react环境搭建

发布时间：2020-12-15 20:33:28 所属栏目：百科来源：网络整理

导读：搭建开发环境 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

搭建开发环境

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>

<body>
    <div id="root"></div>
    <script src="index.js"></script>
</body>

</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‘)
)

package.json

"start": "webpack-dev-server --inline --hot --open --port 8090 --mode development"

React脚手架 (Facebook官方出品)

npm install -g create-react-app 全局全装脚手架工具

create-react-app my-testproject 生成项目模板，其中my-testproject是项目名称，随意定义

cd my-testproject

npm start or yarn start

React版hello world

import React,{ Component } from ‘react‘;
import ReactDOM from ‘react-dom‘;

// 强调组件的创建方式，里面模板jsx创建的方式
class App extends Component {
  render() {
    return (
      <div>
        <span>Hello,World.</span>
      </div>
    );
  }
}

ReactDOM.render(<App />,document.getElementById(‘root‘));

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!