React函数组件相关知识点

React函数组件相关知识点

1. React环境搭建

第一步：安装node.js

node.js 下载网址： https://nodejs.org/zh-cn/download/

第二步：安装React脚手架

node.js下载网址： https://nodejs.org/zh-cn/download/ 

第三步：创建项目

create-react-app todolist
cd todolist

第四步：启动项目

npm start

2. 创建函数组件并应用

• index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App titel="你吃了吗" hello="你好" />, document.getElementById('root'));

• App.js
  编写函数组件

// 引入react组件
import React from 'react'
// 引入Child组件
import Child from './Component/Child'
// 函数组件
function App(props){
  return (
    <div>
  <h1>App组件: {props.titel}{props.hello}</h1>
  <h1>App组件: {1+1}</h1>
  <hr />
  <Child name="erz" />
  </div>
  )
}
// 导出App
export default App;

• 新建子组件Child.js

// 引入react组件
import React from 'react';
function Child(props){
    return(
        <div>
        在App中引入Child组件
        {/*props用来接收传值 */}
        {props.name}
        </div>
    )
}
// 向外暴露
export default Child;

• 效果
  
  今天就分享到这了！！！