Webpack + React ---React实战

配置jsx运行环境

1.下载react和react-dom包

npm install react react-dom -S

• react:专门用于创建组件，虚拟DOM，组件的生命周期
• react-dom:专门进行DOM操作，把创建好的虚拟DOM和组件放在页面展示

2.配置babel

babel是一个转码器，可以将es5,es6等语法转为浏览器可以识别的代码

npm install babel-core babel-loader babel-plugin-transform-runtime -D
npm install babel-preset-env babel-preset-stage-0 -D
npm install babel-preset-react -D

3.配置webpack.config.js，因为webpack只默认处理js文件，因此要配置第三方loader

exclude是排除的意思，使用babel-loader必须要排除node_modules

image.png

4.在项目根目录下新建.babelrc文件

image.png

5.运行npm run dev

此时如果报错的话，请安装npm install babel-loader@7.1.5，如果babel-core版本是6.x，而babel-loader是8.x会报错，具体原因可查看webpack官方文档

DOM元素的创建和渲染

1.React.createElement(param1,param2,param3)

• param1：字符串类型，表示要创建的的标签名称
• param2：对象类型或null，表示要创建的元素的属性
• param3：子节点

2.ReactDOM.render(param1,param2)

• param1：要渲染的虚拟dom元素
• param2：指定页面的元素，当作容器，不能直接放容器元素的id字符串

JSX语法

在jsx语法中，js代码会被写到{}里

1.数字

• 直接引用

const element = <div>123</div>
ReactDOM.render(element,document.getElementById('app'))

• 间接引用

let a=121
const element = <div>{a+2}</div>//123
ReactDOM.render(element,document.getElementById('app'))

2.字符串

let str = "中国"
const element = <div>{str+"我爱你"}</div>
ReactDOM.render(element,document.getElementById('app'))//"中国我爱你"

3.布尔值

let bool = true
const element = <div>{bool.toString()}</div>
ReactDOM.render(element,document.getElementById('app'))//true

let bool = true
const element = <div>{bool? '条件为真':'条件为假'}</div>
ReactDOM.render(element,document.getElementById('app'))//true

4.为属性绑定值

let title='aa'
let ele = <div> <p title={title}>this is p</p></div>
ReactDOM.render(ele,document.getElementById('app'))

5.渲染jsx元素

let h1= <h1>您好</h1>  
let ele =  <div>{h1}</div>
 ReactDOM.render(ele,document.getElementById('app'))

6.渲染jsx数组

const arrStr = ['123','456','789']
{arrStr}

7.注释

/**/ ---推荐

8.class ->className html ->htmlFor(label)

9.jsx语法中，标签必须是成对出现，如果是单标签，必须自闭