[React Fundamentals] Development Environment Setup

In this lesson we'll setup a simple build process for converting our ES6 React components into ES5 using Babel and Webpack

 

Install:

npm i --save react react-dom
npm i -D babel-loader babel-core babel-preset-es2015 babel-preset-react
npm i -g babel webpack webpack-dev-server

 

Create files:

touch App.js main.js webpack.config.js

 

Webpack.config.js:

复制代码
module.exports = {
    entry: './main.js',
    output: {
        path: './',
        filename: "index.js"
    },
    devServer: {
        inline: true,
        port: 3336
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
};
复制代码

 

index.html

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Setup</title>
</head>
<body>
<div id="app"></div>
<script src="index.js"></script>
</body>
</html>
复制代码

 

App.js:

复制代码
import React from 'react';

export default class App extends React.Component {
    render() {
        return (
            <span>Hello React</span>
        )
    }
}
复制代码

 

main.js:

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(<App />, document.getElementById('app'));

 

Run: 

webpack-dev-server

 

posted @   Zhentiw  阅读(193)  评论(0)  编辑  收藏  举报
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
历史上的今天：
2014-08-14 [CSS] Pseduo
2014-08-14 [Backbone] First Application!!!!
点击右上角即可分享
微信分享提示
AI IDE Trae