[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:

    },

    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

巴特西

[React Fundamentals] Development Environment Setup

最新文章

热门文章