React脚手架

最新推荐文章于 2024-09-11 18:20:25 发布

#秃头小牛

最新推荐文章于 2024-09-11 18:20:25 发布

阅读量102

点赞数

分类专栏： React 文章标签： react.js

本文链接：https://blog.csdn.net/qq_46015513/article/details/120068498

版权

React 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

4.3、父子组件传值(props[只读属性])

4.3.1、函数组件接收 (函数是通过形参的方式传递过来的 )

4.3.2、类组件接收 ( 类是通过成员属性去得到 )

学习目标:

能够使用react脚手架完成react项目构建
掌握函数组件和类组件的定义
能够实现父子组件传值

三、React脚手架

React团队主要推荐使用create-react-app来创建React新的单页应用项目的最佳方式。

React脚手架(create-react-app)意义

脚手架是官方推荐，零配置，无需手动配置繁琐的工具即可使用
充分利用 Webpack，Babel，ESLint等工具辅助项目开发
关注业务，而不是工具配置

create-react-app会配置你的开发环境，以便使你能够使用最新的 JavaScript特性，提供良好的开发体验，并为生产环境优化你的应用程序。你需要在你的机器上安装 Node >= 8.10 和 npm >= 5.6。

建议可以安装 js包管理工具 yarn （facebook开发的） --- 速度会快一些

npm i -g yarn

3.1、创建React项目

npx create-react-app myapp     // 创建项目，时间会有点的久

cd myapp   // 进入到安装项目中

npm start   // 启动项目

四、React 组件

4.1、简介

组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。从概念上类似于 JavaScript 类或函数。它接受任意的入参(props)，并返回用于描述页面展示内容的 React元素(jsx)。 定义好的组件一定要有返回值

react中定义组件的方式2种:

函数组件(无状态组件/UI组件)
类组件(状态组件/容器组件)

4.2、组件的创建方式

4.2.1、函数创建组件

函数组件(无状态组件)：使用JS的函数创建组件
函数名称必须以大写字母开头，
函数组件必须有返回值(jsx)，表示该组件的结构，且内容必须有顶级元素

import React from 'react'

// 函数名首字母必须大写

function Hello() {

    return (

        <div>这是第一个函数组件</div>

    )

}

4.2.2、类组件创建

使用ES6语法的class创建的组件(状态组件)
类名称必须要大写字母开头
类组件要继承React.Component父类，从而可以使用父类中提供的方法或者属性
类组件必须提供 render 方法，用于页面结构渲染，结构必须要有顶级元素，且必须return去返回

import React from 'react'

// 创建class类，继承React.Component，在里面提供render方法，在return里面返回内容

class Hello extends React.Component{

    render(){

        return (

            <div>这是第一个类组件</div>

        )

    }

}