Javascript 客户端渲染_Javascript_Reactjs

Javascript 客户端渲染

javascript reactjs

Javascript 客户端渲染,javascript,reactjs,Javascript,Reactjs,我不熟悉React（角度背景），并尝试使用React进行客户端渲染。以下index.html由express应用程序发送： <html> <head> <title>My Web</title> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.

我不熟悉React（角度背景），并尝试使用React进行客户端渲染。以下index.html由express应用程序发送：

<html>
    <head>
        <title>My Web</title>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.min.js"></script>
        <script type="text/javascript" src="/static/src/js/firstComponent.js"></script>
    </head>

    <body id="mainBody">
    </body>

</html>


我的网络

以下是react组件文件（firstComponent.js）：

var FirstComponent=React.createClass({
“呈现”：函数（）{
回复你好；
}
});
render（，document.getElementById（'mainBody'）；

但是在加载页面时，react似乎不起作用。这里怎么了？

您有几个问题。向我扑来的是：

type=“text/js”

不是公认的js MIME类型之一，因此浏览器将忽略该脚本元素

firstComponent.js

是一个JSX文件，浏览器不支持它，您需要

看

你有几个问题。那些向我扑来跳去的是：

type=“text/js”

不是公认的js MIME类型之一，因此浏览器将忽略该脚本元素

firstComponent.js

是一个JSX文件，浏览器不支持它，您需要

看

就这么简单

const FirstComponent = <h1> Hello</h1>;
    }
});

ReactDOM.render(FirstComponent , document.getElementById('mainBody'));

const FirstComponent=Hello；
}
});
render（FirstComponent，document.getElementById（'mainBody'）；

这里有一些教程

就这么简单

const FirstComponent = <h1> Hello</h1>;
    }
});

ReactDOM.render(FirstComponent , document.getElementById('mainBody'));

const FirstComponent=Hello；
}
});
render（FirstComponent，document.getElementById（'mainBody'）；

这里有一些教程

终于开始工作了。以下是我采取的步骤：

安装了babel和babel preset react、babel-preset-es2015等插件-这是将react代码传输到浏览器可以理解的传统javascript所必需的

已安装webpack并创建包含所有必需模块的捆绑包-这是必需的，因为浏览器不理解commonjs，即require语句。Webpack基本上捆绑了自定义js文件和依赖项，如react、react dom等

将第2步中创建的bundle.js包含在身体而不是头部中。这是必需的，因为ReactDOM的render函数正在寻找一个元素，如果我们将bundle.js保留在head标记中，该元素将不会被渲染

HTML:


我的

组成部分：

import React from 'react'
import ReactDOM from 'react-dom'
class FirstComponent extends React.Component{
    render(){
        return (
            <h1> Hello</h1>
        );
    }
}

if(typeof window !== 'undefined')
    ReactDOM.render(<FirstComponent />, document.getElementById('root'));

从“React”导入React
从“react dom”导入react dom
类FirstComponent扩展了React.Component{
render（）{
返回(
你好
);
}
}
如果（窗口类型！==“未定义”）
ReactDOM.render（，document.getElementById（'root'））；

终于开始工作了。以下是我采取的步骤：

安装了babel和babel preset react、babel-preset-es2015等插件-这是将react代码传输到浏览器可以理解的传统javascript所必需的

HTML:


我的

组成部分：

import React from 'react'
import ReactDOM from 'react-dom'
class FirstComponent extends React.Component{
    render(){
        return (
            <h1> Hello</h1>
        );
    }
}

if(typeof window !== 'undefined')
    ReactDOM.render(<FirstComponent />, document.getElementById('root'));

从“React”导入React
从“react dom”导入react dom
类FirstComponent扩展了React.Component{
render（）{
返回(
你好
);
}
}
如果（窗口类型！==“未定义”）
ReactDOM.render（，document.getElementById（'root'））；

浏览器无法以本机方式理解JSX。你需要编译它。我已经将React和ReactDOM作为外部js导入，它不会在客户端编译吗？不，你需要使用Babel。你可能正在从过时的教程（

React.createClass

）学习React。我建议你从这个开始。要构建您的React应用程序，请使用。我想从头开始理解（出于好奇），因此不要使用create-React-app。浏览器无法以本机方式理解JSX。你需要编译它。我已经将React和ReactDOM作为外部js导入，它不会在客户端编译吗？不，你需要使用Babel。你可能正在从过时的教程（

React.createClass

）学习React。我建议你从这个开始。要构建你的React应用程序，请使用。我想从零开始理解事情（出于好奇），所以不要使用create-React-app。我对第一个不好。但是我需要了解传输。我对第一个不好。不过，我们需要了解有关传输的知识。