什么是React？ React是一个JavaScript库 - 最受欢迎的库之一，在GitHub上有超过100,000颗星。 React不是一个框架（与Angular不同，它更加自以为是）。 React是一个由Facebook创建的开源项目。 React用于在前端构建用户界面（UI）。 React是MVC应用程序的视图层（模型视图控制器） React最重要的一个方面是，您可以创建组件（类似于自定义，可重用的HTML元素），以快速有效地构建用户界面。React还使用状态和道具简化了数据的存储和处理方式。
设置和安装=>方法一：非工程化，也就是非脚手架模式
此方法不是设置React的流行方式，但是如果曾经使用过像jQuery这样的库，它将会很熟悉且易于理解，而且如果你不熟悉Webpack，Babel和Node.js，那么它是最简单的入门方法。 首先在不用脚手架模式开发时，我们要在index.html文件中引入三个CDN库 //React - React顶级API实列 <script src="https://unpkg.com/react@16/umd/react.development.js"></script> //React DOM - 操作DOM的方法 <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> //Babel - 一种JavaScript编译器，允许我们在旧浏览器中使用ES6 +，React中的组件都是一个对象class类 <script src="https://unpkg.com/[email protected]/babel.js"></script> React基本写法： html中创建一个根容器 <body> <div id="app"></div> </code> 注意：script标签类型一定要写"text/babel"，否则会报错误（只是正对非脚手架开发模式）。如下：（为了查询器简洁，后续贴出的js代码,会省略script标签对） // 使用react来进行页面渲染需要进行下面的三步 <script type="text/babel"> //1.获取页面真实的容器元素 const Div = document.getElementById("app") //2.创建dom元素 const cDiv = "<div>hello world</div>" //3.将虚拟dom渲染到页面（类似vue，将内容渲染到绑定的容器中） ReactDOM.render(cDiv,Div) //ReactDOM.render(类容,容器)。react固定方法 也可以这样写： //1.创建dom元素 const cDiv = "<div>hello world</div>" //2.将虚拟dom渲染到页面 ReactDOM.render(cDiv,document.getElementById("app")) </script> React JSX React 使用 JSX 来替代常规的 JavaScript 创建dom元素 JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。 我们不需要一定使用 JSX，但它有以下优点： 1.JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。 2.它是类型安全的，在编译过程中就能发现错误。 3.使用 JSX 编写模板更加简单快速。 4.我们先看下以下代码： 1.原生js创建dom元素 //字符串拼接 const cDiv = "<div>hello world</div>"+ "<span></span>" //模板字符串 const cDiv = `<div>hello world</div> <span></span>` 2.React 传统的创建dom元素Dom const cDiv = React.createElement("div",{className:"myclass"},"<span>React创建Dom</span>") 3.JSX创建dom元素 const cDiv = <div> <div>hello world</div> <span></span> </div> 从上面创建dom元素的写法上看，jsx更像是书写原生html一样，不错，就是跟原生html写法一样，以前怎么写html的，在JSX语法中就怎么写，但是JSX中，有以下几点需要注意： 1.JSX中书写class属性，要写成className,因为在js代码块中calss是关键保留字。 2.JSX中只存在一个根标签，书写多个标签时，一定要在外围包裹一层容器来作为唯一的根标签，类似于vue中templaten模板一样，只能有一个根标签. JSX中 变量,表达式,注释 要放在{}中 const str = 12; const cDiv = <div> {//注释也要放在{}内 /* 注释也要放在{}内*/ } <span>{str}</span> <p>1+3*5+4={1+3*5+4}</p> </div> 内联样式通过对象方式引入,jsx中是没有单位的 const myStyle = { background:"#800", fontSize:30 // 没有单位 } const str="今天天气"; const cDom =<div> <span>{str}</span> <p style={myStyle}>1+3*5+4={1+3*5+4}</p> </div> ReactDOM.render(cDom,document.getElementById("app")) // 如果不用变量的形式传参，我们要放在{{}}里面,如下： const cDom =<div> <span>{str}</span> <p style={{background:"#800",fontSize:30}}>1+3*5+4={1+3*5+4}</p> </div> ReactDOM.render(cDom,document.getElementById("app")) jsx数组遍历渲染列表 const Arr = [ {name:"A"}, {name:"B"}, {name:"C"}, {name:"D"}, ]; const vDom = ( // 用小括号包裹JSX代码，便于理解，表示此代码块属于vDom变量的，也可以不适用小括号，效果一样（建议使用小括号包裹）。 <ul> { Arr.map((item,index)=>{ console.log(item) return <li key={index}>{item.name}</li> }) } </ul> ); ReactDOM.render(vDom,document.getElementById("app"))