最简单的REACT程序加CSS & SASS

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

//External SASS & CSS
import './scss/style.scss';
import './css/style.css';

//The styling is a object
const a = {
	color: 'red',
	fontSize: '18px'
};

//Component A
class A extends React.Component {
    render() {
          return (
                  <div className="main">
                    I am <span>Apple</span>, and you are <B />
                  </div>
                )
        }
};

//Component B
class B extends React.Component {
    render() {
          return (
                  <span style={a}>
                    the Banana
                  </span>
                )
        }
};

//Program is inited here
ReactDOM.render(<A />, document.getElementById('root'));

//# sourceMappingURL=main.js.map

这儿用了最简单的ReactDOM模块,加上CSS,SASS Loader,也用了inline-css的js object.

以下是index.html:

<!DOCTYPE html>
<html>
<head>
	
</head>
<body>	
	<div id="root"></div>
	<script src="./dist/main.js"></script>
</body>
</html>

Webpack.config.js:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
	  {
        test:/\.(s*)css$/,
        use:['style-loader','css-loader', 'sass-loader']
      }
    ]
  },
  stats: {
    colors: true
  },
  devtool: 'source-map'
};

package.json:

{
  "name": "reduks",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "dependencies": {
    "express": "^4.16.4",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.1",
    "node-sass": "^4.12.0",
    "react-redux": "^7.0.3",
    "redux": "^4.0.1",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.1"
  },
  "scripts": {
    "start": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC"
}

Node:server.js (Listening to port 80 …)

//Load Libraries
const express = require('express')
const app = express();
const path = require('path');

//Index.html
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname + '/index.html'));
});

//Main.js
app.get('/dist/main.js', (req, res) => {
  res.sendFile(path.join(__dirname + '/dist/main.js'));
});

app.listen(80, () => {
  console.log('Example app listening on port 80!')
});