这里我们通过脚手架的方式来创建一个React项目,具体操作如下:
1、进入项目目录,使用npx create-react-appp my-demo这条命令,会为我们下载react等组件且创建目录文件。
2、成功后,cd my-app
3、启动服务:npm start
import React from ‘react‘; import ReactDOM from ‘react-dom‘; ReactDOM.render( <h1>Hello World</h1>, document.getElementById(‘root‘) );
注意:在上面的代码中我们可以看出是使用了jsx语法,因为html和js混合编写了,其实底层是遇到<>号则当html处理,遇到{}就当作js处理。
import React from ‘react‘; import ReactDOM from ‘react-dom‘; const react = "React" ReactDOM.render( <h1>Hello {react}</h1>, document.getElementById(‘root‘) );
import React from ‘react‘; import ReactDOM from ‘react-dom‘; function tick () { // 注意当存在标签结构,且标签存在换行时需要使用() const element = ( <div> <h1>Hello React</h1> <h2>It is { new Date().toLocaleTimeString() }</h2> </div> ) // 需要实时渲染 ReactDOM.render(element, document.getElementById(‘root‘)) } setInterval(tick,1000)
import React from ‘react‘ // 一种用类的方式创建组件,另一种是Hook形式,下面我们使用类的方式创建组件 class APP extends React.Component { render() { return <h1>Hello React Compent</h1> } } export default APP
import React from ‘react‘; import ReactDOM from ‘react-dom‘; import APP from ‘./app‘ ReactDOM.render(<APP/>,document.getElementById(‘root‘))
import React from ‘react‘ export default class MyNav extends React.Component { render() { // 通过不同的属性props来返回不同的结果 console.log(this.props.nav) return ( <div> { this.props.title } <ul> { this.props.nav.map((element,index) => { return <li key={index}> { element } </li> }) } </ul> </div> ) } }
import React from ‘react‘ import MyNav from ‘./myNav‘ // 一种用类的方式创建组件,另一种是Hook形式,下面我们使用类的方式创建组件 class APP extends React.Component { render() { const nav1 = ["首页","分类","我的信息"] const nav2 = ["Python","Go","Node"] return ( <div> <h1>Hello React</h1> {/* 分别渲染出不同的结果 */} <MyNav nav={nav1} title="路径导航"/> <MyNav nav={nav2} title="学习导航" /> </div> ) } } export default APP
原文:https://www.cnblogs.com/double-W/p/12972428.html