React脚手架安装、基础1、特征

安装react

安装脚手架

npm install create-react-app -g

查看版本

create-react-app --version

创建一个my-app的文件夹，并添加环境

create-react-app my-app

启动应用

npm start

react基础语法

1.基础语法

<script src="js/react.development.js"></script><!--基础库-->
<script src="js/react-dom.development.js"></script><!--拓展库 操作Dom-->
<script src="js/babel.min.js"></script>
<!--可以将JSX 语言解析-->
<!--ES6转化ES5  Babel 是一个转换编译器，它能将 ES6 转换成可以在浏览器中运行的代码-->

ReactDOM.render(
  <h1>hello world</h1>,  //标签嵌套需要遵循w3c标准
  document.getElementById('p1')
);

语法格式 ReactDOM.render(渲染数据，容器);
容器不能为body

2.JSX书写时候只能有一个顶级标签

3.JSX语法
React 使用 JSX 来替代常规的 JavaScript
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展
优势：执行速度快、在编译过程中就能检查错误、模板书写简单

4.React将JSX渲染成虚拟DOM，再转化为真实DOM，渲染到容器标签内
需要
1.引入babel.min.js文件
2.将script类型修改为 text/babel

5.插值表达式

所有需要渲染的数据，JS表达式，数据变量 都可以放在 { } 中渲染

6.循环 - 数组类型数据
通过函数表达式循环数据
在react中 class for 为保留关键字，不能使用，使用className htmlFor代替
此外，条件判断if else也是一样，需要使用三目运算方式代替；如果涉及渲染结构，可以使用条件 && JSX结构

var _data1 = ['张三','李四','王五'];
ReactDOM.render(
    <ul>
        {
            _data1.map(function(item,index){
                return <li key={index}>{item}</li>
            })
        }
    </ul>,
    document.getElementById('p3')
);

同Vue中的v-for循环注意事项相同
每个循环数据嵌入的标签上，需要挂载key属性，且值不能重复
Each child in an array or iterator should have a unique "key" prop.

7.循环 - 对象类型数据

var _data2 = {'a':1,'b':2};
ReactDOM.render(
    <ul>
        {
            Object.keys(_data2).map(function(item,index){
                return <li key={index}>'键名：' {item} '，键值：' {_data2[item]} </li>
            })
        }
    </ul>
    ,
    document.getElementById('p4')
)

8.组件 - 函数类型组件

function Listel(props){
    console.log(props.data)
    return props.data.map(function(item,index){
        return <li key={index}>{item}</li>
    })
}

ReactDOM.render(
    <div>
        <ul>
            <Listel data={data3_1} />
        </ul>
        <ul>
            <Listel data={data3_2} />
        </ul>
    </div>,
    document.getElementById('p5')
)

9.组件 - 构造函数类型

class Listel extends React.Component{
    //render确定组件渲染的效果
    render(){
        console.log(this)
        return this.props.data.map(function(item,index){
            return <li key={index}>{item}</li>
        })
    }
}

ReactDOM.render(
    <div>
        <ul>
            <Listel data={data3_1} />
        </ul>
        <ul>
            <Listel data={data3_2} />
        </ul>
    </div>,
    document.getElementById('p5')
)

10.父子组件之间数据通信
父组件通过props传递参数到子组件

function HelloMessage(props) {
    return <h1>Hello {props.name}!</h1>;
}
 
const element = <HelloMessage name="hello"/>;
 
ReactDOM.render(
    element,
    document.getElementById('example')
);

11.事件处理函数中传参的问题

preventPop(name, e){    //参数写在前面，事件对象e要放在最后
    e.preventDefault();  //不能使用return false阻止默认行为
    alert(name);
}

render(){
    return (
        <div>
            <p>hello</p>
            <a
                href="https://reactjs.org"
                onClick={
                    this.preventPop.bind(this,this.state.name)
                }
            >Click</a>
        </div>
    );
}

React特点

1.数据更新是异步操作的，出于性能考虑，与Vue的数据更新模式类似

this.setState((prevState, props) => ({ 
    //上个状态数据，本次状态数据
    counter: prevState.counter + props.increment 
}))

2.通过setState方式更新数据

3.事件处理函数绑定时候，需要修改事件处理函数中的this指向问题

4.函数类型组件与构造函数类型组件，选择问题
官方推荐我们多多使用函数类型组件，性能更快；
此外鼓励我们将功能拆分越细越好

React脚手架安装、基础1、特征