React基础入门代码步骤

向右看齐 2023-03-06 05:28 25阅读 0赞

# React #

### 下载（引入顺序不能乱！） ###

npm i react --s   核心库
    npm i react-dom --s  提供操作DOM的react扩展库
    npm i babel-standalone --s   es6-->es5  jsx-->js

### 案例 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        
        <script src="node_modules/react/umd/react.development.js"></script>
        <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
        <script src="node_modules/babel-standalone/babel.min.js"></script>
    
    </head>
    <body>
        
        <div id="app"></div>
    
        <script type="text/babel"> let demo =<h1>刘某某</h1> ReactDOM.render(demo,document.getElementById("app")) </script>
    
    </body>
    </html>

### 独立写法 ###

*  html文件

*  js文件

let user = { 
        name: "小刘",
        age: 18
    }
    
    function fun(obj) { 
        return `姓名是:${ obj.name}-----年龄是:${ obj.age}`
    }
    let cc = { color:"green",backgroundColor:"pink"}
    let phone = 4999;
    
    let demo = <div>
        { /* jsx注释 */}
        { /* <p className="aa">jenny</p> */}
        <div style={ cc}>{ fun(user)}</div> 
        <div className="aa">这个手机{ phone}---{ phone>4000?"很贵":"很便宜"}</div>
        </div>
    // 注意在jsx里不能使用 class 这个属性，因为class是js的属性，只能使用className
    ReactDOM.render(demo, document.getElementById("app"));

### 组件三大属性 ###

#### 一、state ####

<body>
        
        <div id="app">
        </div>
        <div id="app2">
        </div>
    
        <script type="text/babel">
            // 1、定义组件
            // 方式一：工厂函数组件(简单组件：没有状态的组件)
            function MyComponent(){ 
                return (<h2>工厂函数组件(简单组件)</h2>)
            }
            // 方式二：ES6类组件(复杂组件)
            class MyComponent2 extends React.Component{ 
                render(){ 
                    return(<h2>ES6类组件(复杂组件)</h2>)
                }
            }
            // 2、渲染组件标签
            ReactDOM.render(<MyComponent/>,document.getElementById("app"))
            ReactDOM.render(<MyComponent2/>,document.getElementById("app2"))
        </script>
    </body>

--------------------

#### 二、Props验证和默认值 ####

##### 默认值：defaultProps #####

##### 验证：propTypes #####

*  npm install --save prop-types
 *

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="node_modules/react/umd/react.development.js"></script>
        <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
        
        <script src="node_modules/prop-types/prop-types.js"></script>
        <script src="node_modules/babel-standalone/babel.min.js"></script>
    
    </head>
    <body>
        
        <div id="app">
        </div>
        <div id="app2"></div>
    
        <script type="text/babel"> /* 需求：自定义用来显示一个人员信息的组件，效果如页面，说明 1.如果性别没有指定，默认为男 2.如果年龄没有指定，默认为18 */ // 1.定义组件 // function Person(props){ // return( // <ul> // <li>姓名：{props.name}</li> // <li>年龄：{props.age}</li> // <li>性别：{props.sex}</li> // </ul> // ) // } class Person extends React.Component { render(){ return( <ul> <li>姓名：{ this.props.name}</li> <li>年龄：{ this.props.age}</li> <li>性别：{ this.props.sex}</li> </ul> ) } } // 指定属性默认值 Person.defaultProps={ sex:'男', age:18 } // 指定属性值得类型和必要性 Person.propTypes={ name:PropTypes.string.isRequired, age:PropTypes.number } // 2.渲染组件标签 const p1={ name :'jenny', age:21, sex:'女' } /* ...的作用 1、打包 2、解包 */ ReactDOM.render(<Person { ...p1}/>,document.getElementById('app')); const p2={ name:'jack' } ReactDOM.render(<Person name={ p2.name} age={ 20}/>,document.getElementById('app2')); </script>
    </body>
    </html>

#### 三、refs ####

--------------------

# React脚手架 #

npm i -g create-react-app
    create-react-app  rproject (rproject为自定义项目名)，最后出现 happy hacking说明创建成功