React 是一个 JavaScript 库
准备开发环境
1,官方脚手架工具 create-react-app
所需工具:terminal,node(版本大于6.5),npm
npm install create-react-app -g
2,创建项目
create-react-app my-first-react(项目名)
出现如下问题,需要清理缓存,再重新创建项目
npm ERR! Unexpected end of JSON input while parsing near'...o\nVtTUbD09BUh97gjN08'
npm ERR! A complete log of this run can be found in:
npm cache clean --force
create-react-app my-first-react(项目名)
在控制台terminal输入指令
cd my-project 进入项目
cat package.json 查看package文件
npm start 启动本地开发服务器
项目文件说明
Readme :项目说明文档
package.json:项目依赖、命令
public公共文件
index.html:主页 root节点是程序的主入口
src文件
app文件与样式文件
新建组件(使用es6的语法)
1,src文件夹下,创建Welcome.js
2,引入依赖 import
import React from 'react';
3,新建类 extends React.component
class Welcome extends React.Component {
}
4,新建render(){}方法,显示结果
return <h1> Hello React</h1>
5,导出整个类
export default Welcome
class Welcome extends React.Component {
render(){
return <h1> Hello React</h1>
}
}
export default Welcome
6,把Welcome component挂载到节点上
打开index.js,使用ReactDOM进行挂载
- react component 中的 render方法
- ReactDOM.render(jsx-element, real-dom):
- jsx-element --> real-dom
#index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Welcome from './Welcome.js';
ReactDOM.render(
<React.StrictMode>
<Welcome />
document.getElementById('root')
);
serviceWorker.unregister();
jsx:js语法扩展
具有js的全部功能
return <h1>hello react</h1>
//返回的是jsx,既不是js也不是html
jsx的属性className=class;htmlFor=for,为了防止和es6的关键字冲突
基本语法
在花括号内直接添加 JavaScript表达式
表达式是一个产生结果值的式子
JavaScript中的表达式通常由常量、变量和运算符等组成。
表达式的结果值有多种类型,比如数值型、字符串型或布尔型等,因此也有算术表达式、字符串表达式或逻辑表达式之分。比如,1+2*3 //是算术表达式
“abc”+“123” //是字符串表达式
9<10&&3>=2 //是逻辑表达式
表达式是一个相对的概念,在表达式中可以含有若干个子表达式,比如1+23这个表达式中23就是一个子表达式,而且表达式中的一个常量或变量也可以看作是一个表达式。
例:{’String’} 直接输出
{12 + 2}计算后可直接输出
{[1, 2, 3]}类似Repeat
创建一个List实现Repeat
Render(){
const todoList = [‘Learn React’, ‘Learn Redux’]
Return(
<div>
<h1> Hello React</h1>
<ul>
{
todoList.map(item =>
<li>{item}</li>
)
}
</ul>
</div>
)
}
实现三元表达式
Render(){
const isLogin = true
return(
<div>
<h1>Hello React</h1>
{isLogin ? <p>你已经登录</p> :<p>请登录</p>}
</div>
)
}
两个特殊属性
class------className
for------htmlFor
其他属性与HTML属性一致