初始React,创建脚手架

1.概念:

他是用于构建用户界面的 JavaScript 库;

2.官网:

中文:https://reactjs.bootcss.com/

英文:https://reactjs.org/

3.使用:

基础:

ReactDOM 提供了与浏览器交互的 DOM 功能，如：dom 渲染

​ ReactDom.render(element,container,callback)

​ element: 元素(内容);

​ container:内容存放的容器;

​ callback:回调函数(可选)

//引入React.js ReactDOM.js 
<script crossorigin
src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> 
<div id='root'></div>
    <script>
        // React.js  提供了核心代码
        // ReactDOM  提供了与浏览器交互的dom功能 虚拟dom
        ReactDOM.render(
            "今天天气不错",
        document.querySelector('#root') ,
        ()=>{
            console.log('渲染成功')
        }
        
        )
    </script>

React.js 提供了React.js的核心代码 ,比如 虚拟DOM,组件

​ React.createElment(type,props,children)

​ type: 类型,(也就是是什么标签),

​ props:属性

​ children: 子辈的内容

  //引入React.js ReactDOM.js 
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id='root'>  </div>
    <script>
        let h1= React.createElement("h1",null,'我是一个标题');
        let p= React.createElement("p",null,'我是一个p标签');
        let el= React.createElement(
            'header',
            {id:"header"},
            h1,
            p
        );
        ReactDOM.render(
            el,
            document.querySelector('#root'),
            ()=>{
                console.log('渲染成功')
            }
        )
    </script>

babel

babel-standalone.js：在浏览器中处理 JSX
https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js

JSX:

​ Javascript和xml的扩展语法;他可以更加简化代码;

​ 他的使用需要配合babel

​ 注意: script标签里加上type类型为text/babel

//引入React.js ReactDOM.js babel.js
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script  crossorigin src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<div id='root'>
       
    </div>
    <script type='text/babel'>
        //JSX: Javascript和xml的扩展语法
        ReactDOM.render(
            <header>
                <h1>hello react</h1>
                <p>利用JSX来渲染</p>
            </header>,
            document.querySelector('#root'),
            ()=>{
                console.log('渲染成功')
            }
        )
    </script>

插值表达式:

​ 在 JXS 中可以使用 {表达式} 嵌入表达式

​ 各种数据的插值状态:

​ 字符串,数值他们是原样输出

​ 数组是去掉逗号,原样输出;

​ 布尔值,undefined,null 不输出

​ 对象 整个输出会报错,想要输出结果,必须找到对象里面的属性名一个一个输出

//引入React.js ReactDOM.js babel.js
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script  crossorigin src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>

 <div id='root'>
       
    </div>
    <script type='text/babel'>
    let data={
        name:"zhangsan",
        age:14
    }  
    
        ReactDOM.render(
            <header>
                <h1>hello react {data.name}</h1>
                <p>利用JSX来渲染</p>
            </header>,
            document.querySelector('#root'),
            ()=>{
                console.log('渲染成功')
            }
        )
    </script>

条件输出:

​ 三元运算符

​ 与或运算符 && ||

  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script  crossorigin src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<div id='root'>
    </div>
    <script type='text/babel'>
    //条件输出
        // ?:   if---else 
        //||   if(!)   //取反
        //&&   if
        ReactDOM.render(
            <header>
                <h1>{ false ? '成立':'不成立'} </h1>
                <p>{true || '利用JSX来渲染' }</p>
                <p>{true && '正确'}</p>
            </header>,
            document.querySelector('#root'),
            ()=>{
                console.log('渲染成功')
            }
        )
    </script>

列表渲染:

 <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script  crossorigin src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
   <div id='root'>
            <!-- <ul v-for='item in arr'>
                <li>{{item}}</li>
            </ul> -->
    </div>
    <script type='text/babel'>
        let data=[
            "内存1", 
            "内存2",
            "内存3"
        ]
    function toData(){
        let arr=[]
       
        return arr
    }
        ReactDOM.render(
            <ul>
                {
                    data.map(item=>{
                    return  <li>{item}</li> 
                    })
                }
            </ul>,
            document.querySelector('#root'),
            ()=>{
                console.log('渲染成功')
            }
        )
    </script>

JSX 使用注意事项:

​ :基于javascript和xml的扩展语言

	 唯一父级/唯一容器

​ 他可以作为值使用

​ 他并不是字符串

​ 他也不是html,很多属性在编写时不一样;

​ class =====className

​ style ======是一个对象,不是字符串

​ 他可以配合js表达式一起使用

​ 他不可以和js语句一起使用

​ 所有的标签必须是小写

​ 所有的标签必须闭合,哪怕是单标签

​ 每次且只能输出一个标签 (必须要有一个容器)

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
 <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
 <script  crossorigin src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<style>
 .box{
     width:100px;
     height:100px;
     background-color:cyan;
 }
</style>
 <div id='main'>
     <div id='header'></div>
     <div id='container'></div>
     <div id='footer'></div>
 </div>
 <script type='text/babel'>	
         let  style={
             width:'200px',
             height:'200px',
             background:'red'
         }
         let {Fragment}=React;
     ReactDOM.render(
         // <div>
         //     <div className='box' style={ 								{width:'4000px',height:'300px'} }></div>
         // </div>,
         <Fragment>
             <div className='box' style={ style}></div>
             <p>我是一个段落标签</p>
         </Fragment>,
     document.querySelector('#header')
     )
 </script>

create-react-app - 脚手架

安装:

npm

npm i -g create-react-app

yarn

yarn global add create-react-app

查看版本:

npx --version

使用:

安装完成以后，即可使用 create-react-app 命令

create-react-app <项目名称>

进入目录

cd  项目名

运行

npm start

运行 Jest测试

 npm run test

打包应用:

npm run build

组件:

​ 对具有一定独立功能的数据与方法的封装，对外暴露接口，有利于代码功能的复 用，且不用担心冲突问题。

​ 函数式组件

​ 函数的名称就是组件的名称;

​ 函数的返回值就是组件要渲染的内容;

​ 类式组件:

​ 组件类必须继承 React.Component

​ 组件类必须有 render 方法

import React,{Component} from 'react';
class App extends Component {
  render(){
    return (<div>你好</div>)
  }
}


export default App;

案例:

app.js

import React,{Component} from 'react';
import FriendList from "./FriendList";
class App extends Component {

  render(){
    return (<div>
      <FriendList/>
    </div>)
  }
}


export default App;

FriendList.js

import React,{Component} from 'react';
import "./FriendList.css";


export default class FriendList extends Component {


  render (){
    return (
      <div className="friend-list">
        <div className="friend-group">
            <dt>家人</dt>
            <dd>爸爸</dd>
            <dd>妈妈</dd>
        </div>
        <div className="friend-group">
            <dt>朋友</dt>
            <dd>张三</dd>
            <dd>李四</dd>
            <dd>王五</dd>
        </div>
        <div className="friend-group">
            <dt>客户</dt>
            <dd>阿里</dd>
            <dd>腾讯</dd>
            <dd>头条</dd>
        </div>
      </div>
    )
  }


}

friendList.css

.friend-list {
  border: 1px solid #000000;
  width: 200px;
}
.friend-group dt {
  padding: 10px;
  background-color: rgb(64, 158, 255);
  font-weight: bold;
}
.friend-group dd {
  padding: 10px;
  /* display: none; */
}
.friend-group.expanded dd {
  display: block;
}
.friend-group dd.checked {
  background: green;
}

props 和 state

​ props:父组件传递过来的参数

​ state:组件自身的状态

​ setState :修改属性

props 与 state 的区别:

​ props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件，它是外部传进来的配置参数，组件内部无法控制也无法修改

​ state 的主要作用是用于组件保存、控制、修改 自己 的可变状态，在组件内部进行初始化，也可以在组件内部进行修改，但是组件外部不能修改组件的 state

​ state 和 props 都可以决定组件的外观和显示状态。通常，props 做为不变数据或者初始化数据传递给组件，可变状态使用 state

React中的事件:

​ 大小写问题;

​ this问题: 可以用回调函数来解决
总结:
了解React基础,以及创建脚手架,和React的事件