[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
时间: 2024-10-18 07:06:51

[React Fundamentals] Development Environment Setup的相关文章

Azure Sphere Development Environment Setup

1. Visual Studio 目前,Visual Studio 2017/2019支持Azure Sphere开发,后续,微软会加入Visual Studio Code的支持.以Visual Studio 2019 Community为例(Pro版和Enterprise版也当然支持),用户需要先从官网下载.安装的时候,需要勾选Linux development with C++这个Workload,注意,还需要勾选C++ CMake tools for Linux和Embedded and

Setup iOS Development Environment.

Setup iOS Development Environment Install XCode and check-out source code from SVN XCode Please find document from Apple on how to install XCode. Check-out Source Code In XCode, Use menu "Source Control" -> "Check-out" to checkout s

Setup and configure an open source Fortran development environment on Windows

We must have already been familiar with proprietary Fortran programming environments, for example, Compaq Visual Fortran IDE (which is actually a combination of Microsoft’s Visual Studio 6 IDE and Compaq’s Fortran compiler along with commercial numer

[Blackberry]How To Setup a BlackBerry 10 Development Environment to Build Cascades Apps and Prevent IP DHCP for individual BB10 simulator setup

This is a step-by-step instructional guide on how to setup a BlackBerry 10 (BB10) development environment. This article includes instructions for downloading all the Cascades tools, installing them, and setting them up. You will learn how to get the

How to setup CI development environment in Linux

In the past 2 days, I setup a CI development environment in Linux: Git + Jenkins + Maven(Nexus)  + Tomcat I write the steps down to keep memo. Pre-installed software: 1. Java: I use JDK1.8.0_25 http://www.oracle.com/technetwork/java/javase/downloads/

Programming in Go (Golang) – Setting up a Mac OS X Development Environment

http://www.distilnetworks.com/setup-go-golang-ide-for-mac-os-x/#.V1Byrf50yM8 Programming in Go (Golang) – Setting up a Mac OS X Development Environment Published on February 4, 2015 At Distil, we have recently started to use Go (Golang) to expand the

How to set up Dynamics CRM 2011 development environment

Recently I have been starting to learn Microsoft Dynamics CRM 2011 about implement plugin and workflow with SDK. The first thing I face is how to set up a development environment for Visual Studio. If you are using Visual Studio 2012 or lower version

How to enable C development in a Windows 10 development environment VM

To enable C development in a Windows 10 development environment VM, follow these steps: Start VS in the Windows 10 development environment VM. Choose "File" -> "New" -> "Project", choose "Open Visual Studio Install

lubuntu development environment

sudo apt-get install vim* sudo apt-get install -y gvim* sudo apt-get install -y build-essential sudo apt-get install gfortran sudo apt-get install vim-fullsudo apt-get install gcc lubuntu development environment,布布扣,bubuko.com