React——使用React、JSX、条件判断与循环

预知：使用命令行工具、node、yarn

• 1. 引入 React and ReactDOM
• 2. 使用 JSX
• 3. 使用 条件判断与循环

1. 引入 React and ReactDOM

使用create-react-app 来构建React 应用。

yarn global add create-react-app 

create-react-app my-app
cd my-app
yarn start		//打开 http://localhost:3000/ 

使用VScode打开 my-app，

我们可以在src/index.js 下输出一下代码

console.log(React)
console.log(ReactDOM)

在这篇文章中，我们只需要用到React.createElement() 来创建React 元素。ReactDOM.render()来把React 元素渲染到页面。

import React from 'react'
import ReactDOM from 'react-dom'

const element = React.createElement('div',null,'hello,world');
ReactDOM.render(element, document.querySelector("#root")); //看一下页面

2. 使用JSX

const element = <div>hello,world,</div>	
//这不是字符串也不是HTML。它就是！ JSX！ JSX可以生成 React元素
//相对于上面还需要写React.createElement()来创建React元素 这个更直观！它们是相等的

//在React官网里提及到推荐使用JSX 不适用上面得。JSX是React.createElement的语法糖。
//生成时还是需要用到React.createElement

• 在JSX里使用“嵌入表达式”

const name = 'your name'
const element = <div>hello,{name}</div>		//合法的JavaScript的表达式都可以放在{} 内

• 在JSX的特定属性

const name = "your name"
const element = <div className="greeting">hello</div> 
//JSX 的语法接近于JavaScript 所以使用小驼峰命名

• 在JSX里的子元素

const element = (<div> <div> </div> </div>) 
// 注意多个元素有时候非了直观会格式化，请使用括号裹住

3. 在React元素里使用条件判断与循环

条件判断
function Hi(){
	return <div> Hi </div>
}	// Hi 是React 组件

function Hello(){
	return <div> Hello </div>
}	// Hello 是React 组件

function Greeting(props){
	return props.greeting === 'hi'? <Hi /> : <Hello />
}	// Greeting 是React 组件
ReactDOM.render(<Greeting greeting="hi" />,document.querySelector("#root"));

//页面会显示 Hi
// 注意：用户自定义组件开头是大写,条件判断使用JavaScript if 或者条件运算符。
// 试一下用条件运算符 写一下

循环
//我们知道使用render来渲染JSX。如何循环多个JSX呢？用map
function Component(props){
	return props.numbers.map((number)=><li>{number}</li>)
}
ReactDOM.render(
	<ul>
    <Component numbers={[1,2,3,4,5]} />
    </ul>,
	document.querySelector("#root")
);
//页面会渲染一个ul, 打开控制台你会看到发生一个报错的信息。我们没有添加 key
//key的存在主要是相邻的兄弟的节点发生了变化怎么去区分。怎么添加key 呢？
<li key={number.toString()}> {number} </li> 即可

下次再见-笑笑