Javascript 如何将React.js呈现为portfolio的HTML_Javascript_Html_Css_Reactjs_Babeljs

Javascript 如何将React.js呈现为portfolio的HTML

javascript html css reactjs

Javascript 如何将React.js呈现为portfolio的HTML,javascript,html,css,reactjs,babeljs,Javascript,Html,Css,Reactjs,Babeljs,我想在公文包中使用React.js，但在将代码转换为HTML时遇到了问题。我试图用图片和p标签列出我的项目，显示每个项目的标题和我扮演的角色。另外，我希望React元素是可点击的，指向每个项目的链接。到目前为止，我不知道我的代码出了什么问题 import React from 'react'; import ReactDOM from 'react-dom'; import './styles.css'; 'use strict'; function Project(props) {

我想在公文包中使用React.js，但在将代码转换为HTML时遇到了问题。我试图用图片和p标签列出我的项目，显示每个项目的标题和我扮演的角色。另外，我希望React元素是可点击的，指向每个项目的链接。到目前为止，我不知道我的代码出了什么问题

import React from 'react';
import ReactDOM from 'react-dom';
import './styles.css'; 

'use strict';

function Project(props) {
    return React.createElement("div", {
      className: "workbox"
    }, React.createElement("img", {
      src: props.img
    }), React.createElement("p", null, props.title), 
    React.createElement("p", null, props.role));
  }
  
  var app = React.createElement("div", null, 
  React.createElement("a", {href: "moonlight.html"}, React.createElement(Project, {img: "images/moonlight.png", 
  title: "Moonlight Website Concept", role: "UI Designer"})), 
  
  React.createElement("a", {href: "dailyui.html"}, React.createElement(Project, {img: "images/dailyui.png",
  title: "DailyUI Challenge", role: "UI Designer"})), 
  
  React.createElement("a", {href: "poetry.html"}, React.createElement(Project, {img: "images/theartofchoice.png", 
  title: "Poetry",role: "Writer"})));

  ReactDOM.render(app, document.querySelector('#app'));

HTML

您需要调用

ReactDOM.render（app，document.querySelector（“#app”）仅当
准备就绪时。将您的
标签放在正文的末尾：


。。。

删除导入的s.

如果React是通过标记导入的，则不需要
导入
s<代码>导入
不适用于“普通”html页面，它只适用于需要大量设置的服务器
我真的希望我没有走错方向，如果是的话，很抱歉，但是您的环境看起来与典型的React环境非常不同。我强烈建议您按照以下说明创建第一个React应用程序：。编辑：我建议跳过模板部分。@Hoobs我最初是从一个HTML和CSS文件开始的，所以我试图在CreateReact应用程序之外使用react。你知道做这件事需要什么资源吗？这样我就不必从头开始了。我明白，但我真的认为，从长远来看，你会遇到更多的问题，并在不必要的斗争中以不同的方式做事。我真的不能给你任何指导，因为我不知道React在没有环境的情况下是如何工作的，我从来没有遇到过任何资源在没有环境的情况下运行React。createreact应用程序环境基本上在HTML/CSS之上添加了一些东西，因此一旦您对代码有了感觉，您就可以非常轻松地复制和粘贴代码。我不是故意说“你不能改变事情”，只是想帮忙。@Hoobs好吧，我理解。非常感谢你的帮助！没问题。无论你决定走哪条路，祝你好运。：）确切地说，如果您没有直接从服务器使用react，那么您不能使用“import”导入模块，对吗？我只是好奇的新手。你可以使用import导入JS模块，但你没有使用JS模块。而且它不仅使用服务器，通常还有更多的设置（例如webpack）。JS模块本身就是一个大话题。看见
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 

  <link rel="stylesheet" href="styles.css">
  <script src="https://unpkg.com/react@15.4.1/dist/react-with-addons.js"></script>
  <script src="https://unpkg.com/react-dom@15.4.1/dist/react-dom.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.19.0/babel.min.js"></script>
  <script src="scripts.js" type="text/babel"></script>
  
</head>

<body>

    <div id="showcontainer"> 
      <div id=app>
      </div>
  </div>
 
</body>
</html>

...
  <script src="https://unpkg.com/react@15.4.1/dist/react-with-addons.js"></script>
  <script src="https://unpkg.com/react-dom@15.4.1/dist/react-dom.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.19.0/babel.min.js"></script>
  <script src="scripts.js"></script>
</body>