客户端React.JS前端 - 这只是服务器端

时间:2016-05-10 18:05:05

标签: javascript html asp.net-mvc reactjs

这肯定是一个初学者的问题,但我感到很困惑,并且无法通过google方式解决问题/找到一篇不错的文章。

我是网络开发人员的新手,我已经构建了一个小型的ASP.NET MVC应用程序。我现在想让我的前端(视图)有吸引力和流畅,我想使用React来做到这一点。

所以我安装'通过在头部包含以下脚本来对html文档做出反应:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0-alpha1/JSXTransformer.js"></script>

我一直在寻找弹出工具提示的现有实现,并且遇到了:https://github.com/romainberger/react-portal-tooltip/tree/master/example我喜欢&#39;群组&#39;工具提示。

但是,我仍然坚持如何安装它。我认为这是我需要来自repro的唯一文件:

https://raw.githubusercontent.com/romainberger/react-portal-tooltip/master/src/index.js

正确?

所以我只是简单地包括这个 ` 导入反应来自&#39;反应&#39; 从&#39; https://raw.githubusercontent.com/romainberger/react-portal-tooltip/master/src/index.js&#39;导入工具提示 从&#39; react-image-placeholder&#39;

导入{NicolasCage}

export default class Style extends React.Component {   state = {     显示:false   }   getText(){     让base = Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

let text = []

for (let i = 0; i < 10; i++) {
  text.push(base)
}

return text

}   componentDidMount(){     setTimeout(()=&gt; this.setState({display:true}),0)   }   escape(html){     return document.createElement(&#39; div&#39;)。appendChild(document.createTextNode(html))。parentNode.innerHTML   }   getBasicExample(){     返回{       __html:this.escape(let style = { style: { background: 'rgba(0,0,0,.8)', padding: 20, boxShadow: '5px 5px 3px rgba(0,0,0,.5)' }, arrowStyle: { color: 'rgba(0,0,0,.8)', borderColor: false } } <ToolTip parent="#style-btn" active={true} position="bottom" arrow="center" style={style}> <NicolasCage/> </ToolTip>)     }   }   render(){     let style = {       风格:{         背景:&#39; rgba(0,0,0,.8)&#39;,         填充:20,         boxShadow:&#39; 5px 5px 3px rgba(0,0,0,.5)&#39;       },       arrowStyle:{         颜色:&#39; rgba(0,0,0,.8)&#39;,         borderColor:false       }     }

return (
  <div style={{padding: 20}}>
    <div style={{marginBottom: 20}}>
      <p>You can provide a <code>style</code> prop to customize some part of the tooltip. You can give it 

具有两个属性的对象:style,将应用于工具提示本身,

arrowStyle将应用于箭头。当制作箭头时,最后一个是棘手的

带边框的

因此定制可能会很痛苦。为了方便起见,arrowStyle.color属性

将更改箭头的背景颜色,并更改其arrowStyle.borderColor边框。要删除

完全边界使用假值。

          

tooltip / blob / master / example / src / style.js&#34;&gt;看一下这个例子来看看这个怎么做

                                                         谢谢react-image-

占位符!           

{样式}&GT;                                          {this.getText()}            )   } }

但是我看不出任何影响,并且认为此时我可能会犯了多次错误的转弯。

我很困惑,因为Github回购中的所有页面文件都是.js,而示例html文件并没有引用它们。我看到他们唯一引用的是bundle.js,我的直觉告诉我的是用于加速的所有JS脚本的连接(可能单独阻止请求JS文件中的往返/延迟)。我没有在任何地方直接看到嵌入式JS到html文件中。

注意,我还没有安装节点,我只是将此代码添加到我的视图代码 - html页面(实际上是cshtml页面)。我有限的理解是,如果我想进行服务器端JS开发,我只需要节点。

我对此非常陌生。我希望我已经混淆了很多概念,但我想谈谈我知道如何正确安装&#39;第三方React组件并开始编写我自己的React。

由于

0 个答案:

没有答案