2017-07-25 14:22:31 onegoldensun 阅读数 3609
  • 2019 react入门至高阶实战,含react hooks

    这是2019 react入门到高级新课程 学习react,不仅能带来技术提升,同时提高开发效率和体验,更能带来好的就业机会。 本课程主要分为以下几个部分:  一,前端工程化基础?  主要学习node和npm、yarn的基本用法  二,es6语法 学习必备的es6常用语法 。 三,react基础知识  学习如何搭建react项目,以及react组件,jsx语法、css处理方案、生命周期等基础知识。 并且根据这些知识开发一个个人网站。 四,react进阶知识?? 学习表单的处理,事件处理,Portals的使用,以及数据请求和API管理等进阶知识。 五,react高阶知识?? 学习react高级特性,react hooks,以及整个react生态体系的构成和应用 。 努力学习哟,带你精通react。

    2126 人正在学习 去看看 梁富城

菜鸟教程用的是 jsx ,需要经过 babel-react 过的。


知道它的原理就可以了,
因为


return <div></div>
最终会被babel-react 转换成 类似

return createElement('div')

所以 只需要确保 return 的是一个根节点的,像下方这样的是不行的。

return (<div>111</div><div>222</div>)  // 错误示范


要用一个div括起来

return (<div>

          ******

            </div>)


如果return 后面没有括号,第一行的内容一定要和return 写在一起

(例子截取自return中间的一部分)

正确例:

return (

       <div>

       ******

  {
                    listspace.map(function(item){

return <tr className="click_item">          

                        <td>  
                        <Link to={{pathname:"/listrepo", query:{name:item.name},props:{name:item.name}}}>
                        {item.name}
                        </Link>
                        </td>
                        <td>{item.description}</td>
                        <td>{item.creator}</td>

                      </tr>

})

}

           </div>)

错误例:

return (

       <div>

       ******            

{
                    listspace.map(function(item){

return 

<tr className="click_item">          

                        <td>  
                        <Link to={{pathname:"/listrepo", query:{name:item.name},props:{name:item.name}}}>
                        {item.name}
                        </Link>
                        </td>
                        <td>{item.description}</td>
                        <td>{item.creator}</td>

                      </tr>

})

}

           </div>)



2019-06-14 10:41:26 taoerchun 阅读数 203
  • 2019 react入门至高阶实战,含react hooks

    这是2019 react入门到高级新课程 学习react,不仅能带来技术提升,同时提高开发效率和体验,更能带来好的就业机会。 本课程主要分为以下几个部分:  一,前端工程化基础?  主要学习node和npm、yarn的基本用法  二,es6语法 学习必备的es6常用语法 。 三,react基础知识  学习如何搭建react项目,以及react组件,jsx语法、css处理方案、生命周期等基础知识。 并且根据这些知识开发一个个人网站。 四,react进阶知识?? 学习表单的处理,事件处理,Portals的使用,以及数据请求和API管理等进阶知识。 五,react高阶知识?? 学习react高级特性,react hooks,以及整个react生态体系的构成和应用 。 努力学习哟,带你精通react。

    2126 人正在学习 去看看 梁富城

看下面一个例子,定义一个MyModal组件,渲染hello world字样。

export default class MyModal extends Component {

    constructor(props) {
        super(props);

    };

    render() {
        return(
            <View>hello world</View>
        )
    }
}

一、以下方式则不会渲染任何结果,会报错。如果不是render下的根return不会报错,只是渲染内容为空

1、将“(”大括号换行

return
(
<View>hello world</View>
)

2、取消大括号 View标签换行

return
<View>hello world</View>


二、改成以下方式也是可行的

1、取消大括号,View标签和return同一行

return <View>hello world</View>

 

另外,如果在根组件外部使用js不能用“{}“包裹,但组件内部必须使用“{}“包裹起来

总结

大括号或者元素标签必须跟return在同一行,如果用了大括号则里面的元素标签可任意换行

 

react
2020-02-07 18:49:23 qq471011042 阅读数 4
  • 2019 react入门至高阶实战,含react hooks

    这是2019 react入门到高级新课程 学习react,不仅能带来技术提升,同时提高开发效率和体验,更能带来好的就业机会。 本课程主要分为以下几个部分:  一,前端工程化基础?  主要学习node和npm、yarn的基本用法  二,es6语法 学习必备的es6常用语法 。 三,react基础知识  学习如何搭建react项目,以及react组件,jsx语法、css处理方案、生命周期等基础知识。 并且根据这些知识开发一个个人网站。 四,react进阶知识?? 学习表单的处理,事件处理,Portals的使用,以及数据请求和API管理等进阶知识。 五,react高阶知识?? 学习react高级特性,react hooks,以及整个react生态体系的构成和应用 。 努力学习哟,带你精通react。

    2126 人正在学习 去看看 梁富城

prpos 父子组件数据传递

//props.js
//rcc
import React, { Component } from 'react'

export default class PropsDemo extends Component {
    render() {
        return (
            <div>
                {this.props.title}
            </div>
        )
    }
}

//rfc
import React from 'react'

export default function PropsDemo(e) {
    return (
        <div>
            {e.title}
        </div>
    )
}

//rfc 解构
import React from 'react'

export default function PropsDemo({e}) {
    return (
        <div>
            {title}
        </div>
    )
}


//App.js

import PropsDemo from './PropsDemo'

<PropsDemo title="react"/>

if else

import React, { Component } from 'react'

export default class ConditionLoop extends Component {
    constructor(props) {
        //class 形式需要super
        super(props)
        this.state = {
            showTitle : false
        }
    }
    render() {
        return (
			<div>
				<h1>if for </h1>
                {this.state.showTitle ? <h1>{this.props.title}</h1>:<h1>none</h1>}
			</div>
		)
    }
}

for

import React, { Component } from 'react'

export default class ConditionLoop extends Component {
	constructor(props) {
		super(props)
		this.state = {
			goods: [
				{
					title: 'java',
					prince: 19
				},
				{
					title: 'python',
					prince: 21
				},
				{
					title: 'c',
					prince: 22
				},
				{
					title: 'c++',
					prince: 23
				}
			]
		}
	}
	render() {
		return (
			<div>
				<h1>if for </h1>
				<ul>
					{this.state.goods.map(item => {
						return (
							<li key={item.title}>
								<span>课程名称:{item.title}</span>
								<span>价格{item.prince}</span>
							</li>
						)
					})}
				</ul>
			</div>
		)
	}
}

 

2016-11-04 16:31:48 u010165367 阅读数 172
  • 2019 react入门至高阶实战,含react hooks

    这是2019 react入门到高级新课程 学习react,不仅能带来技术提升,同时提高开发效率和体验,更能带来好的就业机会。 本课程主要分为以下几个部分:  一,前端工程化基础?  主要学习node和npm、yarn的基本用法  二,es6语法 学习必备的es6常用语法 。 三,react基础知识  学习如何搭建react项目,以及react组件,jsx语法、css处理方案、生命周期等基础知识。 并且根据这些知识开发一个个人网站。 四,react进阶知识?? 学习表单的处理,事件处理,Portals的使用,以及数据请求和API管理等进阶知识。 五,react高阶知识?? 学习react高级特性,react hooks,以及整个react生态体系的构成和应用 。 努力学习哟,带你精通react。

    2126 人正在学习 去看看 梁富城

1、安装react-dom

npm i react-dom --save

2、实例

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

// Parent Component
class GroceryList extends Component {
    render() {
        return (
            <ul>
                <ListItem quantity="1" name="Bread" />
                <ListItem quantity="6" name="Eggs" />
                <ListItem quantity="2" name="Milk" />
            </ul>
        );
    }
}

// Child Component
class ListItem extends Component {
    render() {
        return (
            <li>
                {this.props.quantity}× {this.props.name}
            </li>
        );
    }
}

ReactDOM.render(<GroceryList/>,document.getElementById("root"));

3、输出结果
输出结果

2019-05-28 21:05:23 zhm_cc123456 阅读数 52
  • 2019 react入门至高阶实战,含react hooks

    这是2019 react入门到高级新课程 学习react,不仅能带来技术提升,同时提高开发效率和体验,更能带来好的就业机会。 本课程主要分为以下几个部分:  一,前端工程化基础?  主要学习node和npm、yarn的基本用法  二,es6语法 学习必备的es6常用语法 。 三,react基础知识  学习如何搭建react项目,以及react组件,jsx语法、css处理方案、生命周期等基础知识。 并且根据这些知识开发一个个人网站。 四,react进阶知识?? 学习表单的处理,事件处理,Portals的使用,以及数据请求和API管理等进阶知识。 五,react高阶知识?? 学习react高级特性,react hooks,以及整个react生态体系的构成和应用 。 努力学习哟,带你精通react。

    2126 人正在学习 去看看 梁富城

在这里插入图片描述请问我在编写react文件时一直出现这个问题,下面是源代码,求大佬解答

calss Url extends React.component{
render(){
return (

网站地址:{this.props.url}


)
}
}
calss Nickname extends React.component{
render(){
return (

网站地址:{this.props.nickname}


)

}

};
function app(props){
return (






)
};
ReactDOM.render(
<app name={“菜鸟教程”} url={“http://www.runoob.com”} nickname={“Runoob”}/>,
document.getElementById(“example”);
)

react hook

阅读数 158

React 基本语法

阅读数 53

没有更多推荐了,返回首页