javascript 从Scratch安装React

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript 从Scratch安装React相关的知识，希望对你有一定的参考价值。

import React, {Component} from 'react';

export default class App extends Component {
    render () {
        return <p>This is my new react app</p>
    }
}

<!DOCTYPE html>
<html>
    <head>
        <title> Ideal React Seed </title>
    </head>
    <body>
        <div id="app"></div>
        <script type="text/javascript" src="/bundle.js"></script>
    </body>
</html>

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

// main app
import App from './containers/App';

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

npm install --save-dev babel-cli babel-core babel-loader babel-plugin-transform-object-rest-spread babel-preset-es2015 babel-preset-react babel-preset-stage-0 babel-register

npm install --save react react-dom

npm install --save-dev style-loader css-loader less-loader
npm install --save-dev less

npm install --save webpack webpack-dev-server

"babel": {
    "presets": [
      "es2015",
      "react",
      "stage-0"
    ],
    "plugins": [
      "transform-object-rest-spread"
    ]
}

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "./node_modules/.bin/webpack-dev-server --config ./webpack/webpack.dev.config.js"
}

mkdir reactProject
cd reactProject
npm init // start a node project

mkdir containers
cd containers
touch App.js

mkdir webpack
cd webpack
touch webpack.dev.config.js


var webpack = require('webpack');
var path = require('path');

var parentDir = path.join(__dirname, '../');

module.exports = {
    entry: [
        path.join(parentDir, 'index.js')
    ],
    module: {
        loaders: [{
            test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },{
                test: /\.less$/,
                loaders: ["style-loader", "css-loder", "less-loader"]
            }
        ]
    },
    output: {
        path: parentDir + '/dist',
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: parentDir,
        historyApiFallback: true
    }
}

以上是关于javascript 从Scratch安装React的主要内容，如果未能解决你的问题，请参考以下文章

Scratch 3.9的两个亮点

蓝桥杯选拔赛真题28Scratch报数 少儿编程scratch蓝桥杯选拔赛真题讲解

scratch3.0教程1.2 下载安装scratch

Linux From Scratch（LFS11.0）构建 LFS 系统 - Make-4.3

scratch安装

Scratch2.0版本安装