入门篇(一)

JSX语法:HTML语言直接写在JS语言中,不加任何引号

JSX基本语法规则(只有一个开头节点和一个结尾节点)
1.遇到HTML标签(以 < 开头),就用HTML规则解析
2.遇到代码块(以 { 开头),就用JS规则解析

React独有的JSX语法跟JS不兼容、凡事使用JSX的地方,都要加上

<script type="text/babel"></script>

使用React前必须首先加载

react.js         React的核心库
react-dom.js     提供与DOM相关的功能
Browser.js       将JSX语法转换为JS语法
注意:书写的顺序
<script type="text/babel">      
        var Hello = React.createClass({
            render: function() {
                return (
                    <div>Hello</div>
                );
            }
        });

        ReactDOM.render(
            <Hello/>,
            document.body
        );
</script>

React.createClass 生成一个组件类、组件名一定要大写,否则会报错
所有组件都必须有自己的render方法,用于输出组件

添加组件属性需注意(驼峰式命名规则)
1.class需写成className
2.for需写成htmlFor

ReactDOM.render() 是React的最基本方法、用于将模板转为HTML语言,并插入置顶的DOM节点(当前插入body中)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一、JS代码插入方法 1.使用<script></script>标签在html网页文档中插入javascript代...
    sophies阅读 3,146评论 0 0
  • 小程序也已经出来有一段时间啦,对于一些想去学习又无从下手的朋友们,欢迎和代码君一起去学习一下小程序! 准备工作 下...
    代码君_Coder阅读 12,651评论 1 51
  • JSX是React的核心组成部分,它使用XML标记的方式去直接声明界面,界面组件之间可以互相嵌套。可以理解为在JS...
    可乐爱上咖啡阅读 72,220评论 1 63
  • React 入门实例教程 转载(加入了自己的一些东西,推荐看原文):一看就懂的ReactJs入门教程(精华版) ...
    蓦然之间的阅读 3,068评论 0 0
  • 现在最热门的前端框架,毫无疑问是React。在基于React的React Native发布一天之内,就获得了 50...
    Mycro阅读 4,661评论 3 6

友情链接更多精彩内容