ReactDOM.render()等基础

首先,React是一个用于构建用户界面的Javascript库,但Peact并不是一套完整的MVC或MVVM的框架,它仅涵盖V-view视图层。JSX是javascript的扩展,像Typescript,coffeeScript等一样,都是Javascript的语法糖,最终都要变编译成JS执行,建议使用JSX的代码进行React的开发。因为Javascript代码与JSX代码并不兼容,凡是使用JSX的地方我们都需要加上 type="text/babel"。
在使用React之前,我们必须要先引入三个库——react.js/react-dom.js/browser.min.js

<html>
  <head>
    <script src="../../react.js">script>
    <script src="../../react-dom.js">script>
    <script src="../../browser.min.js">script>
  head>
  <body>
  body>
html>

JSX比较特殊的是允许Javascript和HTML的混写,看一个简单的例子:

   <div id="container">div>

    <script type="text/babel">
    let value = "demo1";
    let buttonName = "submit";
      ReactDOM.render(
        <div>
          <input type="text" value={value}/> //注意单标签一定要闭合“/”,否则会报错
          <button>{buttonName}button>//在{}中插入变量
        div>,
        document.getElementById("container")
      )
    script>

ReactDOM.render是React的最基本方法用于将模板转为HTML语言,并插入指定的DOM节点。ReactDOM.render(template,targetDOM),该方法接收两个参数:第一个是创建的模板,多个dom元素外层需使用一个标签进行包裹,如

;第二个参数是插入该模板的目标位置。若要为创建的某个元素增加class属性,不能直接定义class而要用className,因为class是javascript中的保留字。例如给input添加className并更改样式:

    "text" className="userName" value={value}/> 
 
    .userName{background: yellow}//在CSS样式中定义

同样可以定义行内样式,将所有的样式包裹在一个对象中,以类似变量的形式给style属性赋值,注意样式属性要用驼峰命名法表示,如:backgroundColor而不是background-color;fongSize而不是font-size,

"text" style={{"backgroundColor":"yellow","color":"red"}} value={value}/> 

另外可以直接将样式赋值给一个变量,把变量赋值给style属性,如下:

    <div id="container">div>
    <script type="text/babel">
    let value = "demo1";
    let buttonName = "submit";
    let inputStyle = {
      "backgroundColor":"yellow",
      "color":"red"
    };
      ReactDOM.render(
        <div>
          <input type="text" style={inputStyle} value={value}/> 
          <button>{buttonName}button>
        div>,
        document.getElementById("container")
      )
    script>

你可能感兴趣的:(前端)