特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
React是Facebook开源的一个JavaScript框架。大型Web应用或单页应用程序(SPA)中进行视图(View)的渲染,React是理想的选择。也就是说,React 主要只专注于 MVC 中的 V
,也就是视图层。对于初学者而言,多写React项目能更好的帮助我们学习React。那么有一个运行React的环境,能帮助初学者解决很多没有必要的烦恼。在这篇文章中,简单的介绍如何在Codepen上创建React组件或者项目。
React如何工作
React的主要概念是组件。React组件由React组件(React Component)和React元素(React Element)组成。在React中,根据功能和责任可以将你的应用程序分成几个部分。
React组件和React元素(ReactElements
)都是虚拟DOM(Virtual DOM),看起来就像是HTML DOM元素的标签。
Virtual DOM(React Components 和 ReactElements
)的语法将被编译并转换成普通的JavaScript代码。
class HelloWorld extends React.Component {
render () {
return (
<div>
<h3>Hello</h3>
<p>Nice to meet you!</p>
</div>
)
}
}
class App extends React.Component {
render () {
return (
<div>
<HelloWorld />
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
)
上面的代码经过编译之后在浏览器中呈现真实的HTML DOM元素,如下图所示:
最后渲染出来的效果如下:
写一个React 组件
如上所述,编写和运行React组件需要做两年事情。
- 引入
react.js
和react-dom.js
- 配置ES6的编译Babel。将ES6代码和虚拟DOM编译成ES5代码
为了方便起见,可以直接在Codepen这样的在线平台来写React组件,这也是React官方推荐的一个平台。如下图这样配置:
如果你对Webpack这样的构建工具熟悉的话,可以自己配置一个R
如需转载,烦请注明出处:https://www.w3cplus.com/react/create-react-component-on-codepen.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!