React框架新手教程，小白前线必看
前端开发
浏览：1366 次
简介React是一个流行的前端开发框架。
React是一个用于构建用户界面的JAVASCRIPT库。
React主要用于构建UI。许多人认为React是MVC中的V（视图）。
React源于Facebook的内部项目，该项目用于建立Instagram网站，并于2013年5月开源。
React具有高性能和简单的代码逻辑。越来越多的人开始关注和使用它。
React具有声明性设计− React使用声明性范例来轻松描述app。
有效率的− React通过模拟DOM来最小化与DOM的交互。
灵活的− React可以很好地与已知的库或框架配合使用。
JSX公司− JSX是JavaScript语法的扩展。React开发不一定使用JSX，但我们建议使用它。
组件− 通过React构建组件，使代码更易于重用，并可以很好地应用于大型项目的开发。
单向响应数据流− React实现了单向响应数据流，从而减少了重复代码，这就是它比传统数据绑定更简单的原因。
反应堆安装1引线包
React.miin.js、React-dom.min.js和babel.min.js：
*React.min.js-React核心库
*React-dom.min.js-提供dom相关函数
*Babel.min.js-Babel可以将ES6代码转换为ES5代码，这样我们就可以在当前不支持ES6的ES6浏览器上执行React代码。通过将Babel和Babel聚合包一起使用，可以将源代码的语法呈现提升到一个新的级别。
ReactDOM.渲染(
书信电报；h1>你好，世界！<；/h1>，
；document.getElementById（'example'）
);
上面的代码在id=“example”节点中插入h1标题。
2通过npm使用React
$npm安装-g cnpm--注册表=https://registry.npm.taobao.org
$npm配置集注册表https://registry.npm.taobao.org
$cnpm安装[名称]
3使用create-reactapp快速构建react开发环境
$cnpm安装-g创建反应app
$create react app我的app
$cd我的应用/
$npm开始
反应JSX
我们不必使用JSX，但它具有以下优点：
*JSX执行速度更快，因为它在编译成JavaScript代码后得到了优化。
*它是类型安全的，在编译过程中可以发现错误。
*使用JSX编写模板更容易、更快。
使用JSX
ReactDOM.渲染(
书信电报；h1>你好，世界！<；/h1>，
；document.getElementById（'example'）
);
您可以在上面的代码中嵌套多个HTML标记，并且需要用div元素包装它；
ReactDOM.渲染(
书信电报；分区>
书信电报；h1>新手教程</h1>
书信电报；h2>欢迎使用React</h2>
lt；/分区>
，
；document.getElementById（'example'）
);
独立文件
您的React JSX代码可以放在一个单独的文件中，例如，我们创建了helloworld_React。Js文件，然后将Js文件导入HTML文件：
书信电报；div id=“example”>；<；/分区>
书信电报；script type=“text/babel”src=“helloworld_react.js”>；<；/脚本>
JavaScript表达式
我们可以在JSX中使用JavaScript表达式。表达式用大括号{}；
如果else语句不能在JSX中使用，但可以使用条件（三元运算）表达式。在以下示例中，如果变量i等于1，浏览器将输出true。如果修改了i的值，它将输出false
ReactDOM.渲染(
书信电报；分区>
nbsp；&书信电报；h1>｛1+1｝
nbsp；&书信电报；h1>{i==1？'真！'：'假'｝<；/h1>
lt；/分区>
，
；document.getElementById（'example'）
);
风格
React建议使用内联样式。我们可以使用camelCase语法来设置内联样式
React将在指定元素编号后自动添加px
var myStyle=变量myStyle={
；字体大小：100，
；颜色：'#FF0000'
};
ReactDOM.渲染(
书信电报；h1 style={myStyle}>新手教程</h1>，
；document.getElementById（'example'）
);
笔记
注释需要用大括号书写
ReactDOM.渲染(
书信电报；分区>
书信电报；h1>新手教程</h1>
；｛/*注释…*/｝
nbsp；<；/div>，
；document.getElementById（'example'）
);
大堆
JSX允许您在模板中插入一个数组，数组将自动展开所有成员：
变量arr=[
&铌
