可参考文献：
1.必须先引入的文件。
react.js是 是 React 的核心库；
react-dom.js.是提供与 DOM 相关的功能；
browser.js 将JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
2.react独有的语法是JSX，跟js是互不兼容的，写react的语法是，需要将script是我type设置成 text/babel
<script type="text/babel">
//这里写react的逻辑代码
</script>
3.react的语法：
（1）ReactDOM.render .基本语法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react学习</title>
</head>
<body>
<!-- 在此 div 中的所有内容都将由 React DOM 来管理，所以我们将其称之为 “根” DOM 节点。用React 开发应用时一般只会定义一个根节点 -->
<div id='example'></div>
</body>
</html>
<!-- 1.引用文件 -->
<script src="./react-demos-master/build/react.js"></script>
<script src="./react-demos-master/build/react-dom.js"></script>
<script src="./react-demos-master/build/browser.min.js"></script>
<!-- 2.-->
<script type="text/babel">
ReactDOM.render(
<p>hello react<p>,//这里分隔必须用 逗号 隔开
document.getElementById("example")
)
</script>
上面可以看出，JSX 语法 中， HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写。
JSX语法的基本规则是：
遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。 注意{}和,
<script type="text/babel">
var arr=['你','我','他'];
ReactDOM.render(
<div>
{
arr.map(function(value){
return <p>{value}</p>
})
}
</div>,
document.getElementById('example')
)
</script>
以上也可以这样写：
JSX语法 允许直接在模板插入js变量 ，如果这个变量是一个数组，则会展开这个数组的全部成员
<script type="text/babel">
//var arr=['你','我','他'];
var arr=[<p>hello ni</p> , <p>hello wo</p>]
ReactDOM.render(
<p>{arr}</p>
document.getElementById('example')
)
</script>（2）.React.createClass:生成组件类
React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类;
注意：下面这里的One就是一个组件类 所有组件类都必须有自己的 render 方法，用于输出组件 组件的首字母必须大写 ，组件类只能包含一个顶层标签，否则也会报错。
<script type="text/babel">
var One=React.createClass({
render:function(){
return <p>{this.props.name}</p>
}
})
ReactDom.render(
<One name="xiaojuan" age={18} />,
document.getElementById('example')
)
</script>
<script type="text/babel">
var One=React.createClass({
render:function(){
//当渲染很多内容时，放一个顶层标签（只能放一个）。即组件的返回值只能有一个根元素。
return (
<div>
<p>hello {this.props.name} {this.props.age}</p>
<p> {this.props.age}</p>
</div>
)
}
})
ReactDom.render(
<One name="xiaojuan" age={18} />,
document.getElementById('example')
)
</script>
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
这段代码会在页面上渲染出”Hello,Sara”:
这里注意到：组件的名称是大写的，Welcome
这里还有个注意点：当绑定的是值是字符串时，可以直接name="xiaojuan" 或者name={"xiaojuan"}； 但是如果是数字类型的话，必须用{} 例：age={18}，否则会报错。（3）.Render.createElement()
下面两种代码的作用是完全相同的：
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
4.在 JSX 中使用表达式
可以任意地在 JSX 当中使用 JavaScript 表达式，在 JSX 当中的表达式要包含在大括号里。
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
ReactDOM.render(
element,
document.getElementById('root')
);
JSX 属性
引号来定义以字符串为值的属性：
注意：属性语法是小驼峰命名 ，例如： tabIndex
const element = <div tabIndex="0"></div>;
大括号来定义以 JavaScript 表达式为值的属性：
注意：JSX 标签是闭合式的，那么你需要在结尾处用 />,
const element = <img src={user.avatarUrl} />;
切记你使用了大括号包裹的 JavaScript 表达式时就不要再到外面套引号了。JSX 会将引号当中的内容识别为字符串而不是表达式
JSX 嵌套
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);
React 只会更新必要的部分
React DOM 首先会比较元素内容先后的不同，而在渲染过程中只会更新改变了的部分。5.组件和ReactDOM.render（）的混合使用
function Clock(props){
return (
<div>
<p>hello {props.data.toLocaleTimeString()}</p>
</div>
)
}
function tick(){
var element=<Clock data={new Date()}/>
ReactDOM.render(
element,
document.getElementById("well")
)
}
setInterval(tick,1000)6.react中的事件绑定
React事件绑定属性的命名采用驼峰式写法，而不是小写。
如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM元素的写法)
例如，传统的 HTML：
<button onclick="activateLasers()">
Activate Lasers
</button>
React 中稍稍有点不同：
<button onClick={activateLasers}>
Activate Lasers
</button>
react中的点击事件是大写onClick，驼峰式写法
在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为。你必须明确的使用 preventDefault。例如，传统的 HTML 中阻止链接默认打开一个新页面，你可以这样写：
<a href="#" onclick="console.log('The link was clicked.'); return false">
Click me
</a>
在 React，应该这样来写：
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}
事件处理：
class Popper extends React.Component{
constructor(){
super();
this.state = {name:'Hello world!'};
}
preventPop(name, e){ //事件对象e要放在最后
e.preventDefault();
alert(name);
}
render(){
return (
<div>
<p>hello</p>
{/* Pass params via bind() method. */}
<a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Click</a>
</div>
);
}
}
注意：通过 bind 方式向监听函数传参，在类组件中定义的监听函数，事件对象 e 要排在所传递参数的后面7.条件渲染
function UserGreeting() {
return <h1>Welcome back!</h1>;
}
function GuestGreeting() {
return <h1>Please sign up.</h1>;
}
function Greeting(props){
var login=props.status;
if(login){
return <UserGreeting />
}else{
return <GuestGreeting />
}
}
ReactDOM.render(
<Greeting status={false} />,
document.getElementById('well')
)
//最后页面输出的是 Please sign up.
通过运算符 &&一起使用
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
</div>
);
}
const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
<Mailbox unreadMessages={messages} />,
document.getElementById('root')
);
三目运算符
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
</div>
);
}8.列表,渲染多个组件
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li>{number}</li>
);
ReactDOM.render(
<ul>{listItems}</ul>,
document.getElementById('root')
);
基础列表组件---->将上面的情况，改成一个组件渲染的方式
var list=[1,2,3,4,5];
function Render(props){
var number=props.number;
var listItem=number.map((num)=><li>{num}</li>)
return <ul>{listItem}</ul>
}
ReactDOM.render(
<Render number={list} />,
document.getElementById('root')
)
当我们运行这段代码，将会看到一个警告 a key should be provided for list items ，意思是当你创建一个元素时，必须包括一个特殊的 key 属性
//这里来解决这个警告，给每一个li一个单独的key值
var list=[1,2,3,4,5];
function Render(props){
var number=props.number;
var listItem=number.map((num)=><li key={num}>{num}</li>)
return <ul>{listItem}</ul>
}
ReactDOM.render(
<Render number={list} />,
document.getElementById('root')
)
元素的key只有放在其环绕数组的上下文中才有意义。
比方说，如果你提取出一个ListItem组件，你应该把key保存在数组中的这个<ListItem />元素上，而不是放在ListItem组件中的<li>元素上
正确的使用键的方式:
function ListItem(props) {
// 对啦！这里不需要指定key:
return <li>{props.value}</li>;
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// 又对啦！key应该在数组的上下文中被指定
<ListItem key={number.toString()}
value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
键（key）只是在兄弟之间必须唯一
数组元素中使用的key在其兄弟之间应该是独一无二的。然而，它们不需要是全局唯一的。当我们生成两个不同的数组时，我们可以使用相同的键
key会作为给React的提示，但不会传递给你的组件。如果您的组件中需要使用和key相同的值，请用其他属性名显式传递这个值
const content = posts.map((post) =>
<Post
key={post.id}
id={post.id}
title={post.title} />
);
上面例子中，Post组件可以读出props.id，但是不能读出props.key
扫一扫
313
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
