标签：学习 root helloworld react let 笔记 JSX man
React 构建用户界面的JavaScript库，主要用于构建UI界面。
特点：
1、声明式的设计
2、高效，采用虚拟DOM来实现DOM的渲染，最大限度的减少DOM的操作。
3、灵活，跟其他库灵活搭配使用。
4、JSX，俗称JS里面写HTML，JavaScript语法的扩展。
5、组件化，模块化。代码容易复用，2016年之前大型项目非常喜欢react。
6、单向数据流。没有实现数据的双向绑定。数据-----视图------事件-----数据
react官网
https://react.docschina.org/
创建项目
1、通过script引入使用，仅用于学习调试使用
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
2、通过react的脚手架，创建项目进行开发，部署。
（1）安装脚手架Creact React App.
cnpm install -g create-react -app
(2) 创建项目
create-react-app 01reactapp(项目名称可以自定义)
创建项目是需要一些时间的，请耐心等待
React元素的渲染
let h2 = <h2>helloworld</h2>;
使用JSX的写法，可以创建JS元素对象
注意：JSX元素对象，或者组件对象，必须只有一个根元素（根节点）
例：
//实现页面时刻的显示
function clock(){
// toLocaleTimeString()转换时间
let time = new Date().toLocaleTimeString()
let element = (
<div>
<h1>现在的时间是{time} </h1>
<h2>这是副标题</h2>
</div>
)
// querySelector找到根节点
let root = document.querySelector('#root');
ReactDOM.render(element,root)
}
clock()
//间隔函数 每隔一秒一变
setInterval(clock,1000)
函数式组件渲染
//父子组件通过props传值
function Clock(props){ return ( <div> <h1>现在的时间是{props.date.toLocaleTimeString()} </h1> <h2>这是函数式组件开发</h2> </div> ) } function run(){ ReactDOM.render( <Clock date={new Date()} />, document.querySelector('#root') ) } setInterval(run,1000)
React JSX
优点：
1、JSX执行更快，编译为JavaScript代码时进行优化
2、类型更安全，编译过程如果出错就不能编译，及时发现错误
3、JSX编写模板更加简单快速
注意：
1、JSX必须要有根节点。
2、正常的普通HTML元素要小写。如果大写默认是组件。
JSX表达式:
1、由HTML元素构成
2、中间如何需要插入变量用{}
3、{}中间可以使用表达式
4、{}中间表达式中可以使用JSX对象
5、属性和html内容一样都是用{}来插入内容
例子：
import React from 'react';
import ReactDOM from 'react-dom';
import './App.css'
let time = new Date().toLocaleTimeString()
let str = '当前时间是：'
let element = (
<div>
<h1>helloworld</h1>
<h2>{str+time}</h2>
</div>
)
console.log(element)
let man = '发热';
let element2 = (
<div>
<h1>今天是否隔离</h1>
<h2>{man=="发热"?<button>隔离</button>:"躺床上"}</h2>
</div>
)
//let man = '发热';
let element4 = (
<div>
<span>横着躺</span>
<span>竖着躺</span>
</div>
)
man = '正常'
let element3 = (
<div>
<h1>今天是否隔离</h1>
<h2>{man=="发热"?<button>隔离</button>:element4}</h2>
</div>
)
let color = 'bgRed'
let logo = 'https://www.baidu.com/img/pc_1c6e30772d5e4103103bd460913332f9.png'
//HTML的样式类名要写className,因为class在js当中是关键词
let element5 = (
<div className={color}>
<img src={logo} />
红色的背景颜色
</div>
)
ReactDOM.render(
element5,
document.getElementById('root')
)
JSX_style 样式
1、Class，style中，不可以存在多个class属性（就是字面意思）
2、style样式中，如果存在多个单词的属性组合，第二个单词开始，首字母大写。或者用引号引起来，否则会报错。
let exampleStyle = {
background:"skyblue",
borderBottom:"4px solid red",
'background-image':"url(https://www.baidu.com/img/pc_1c6e30772d5e4103103bd460913332f9.png)"
}
3、多个类共存的操作
let element2 = (
<div>
<h1 className={"abc "+classStr}>helloworld</h1>
</div>
)
let classStr2 = ['abc2','redBg2'].join(" ")
let element3 = (
<div>
{/* 这里写注释 */}
<h1 className={classStr2} style={exampleStyle}>helloworld</h1>
</div>
)
4、注释
必须在括号的表达式内书写，否则报错：{/* 这里写注释 */}
let classStr2 = ['abc2','redBg2'].join(" ")
let element3 = (
<div>
{/* 这里写注释 */}
<h1 className={classStr2} style={exampleStyle}>helloworld</h1>
</div>
)
标签：学习,root,helloworld,react,let,笔记,JSX,man 来源： https://www.cnblogs.com/changyuyao/p/13863289.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。