React入门：基本环境搭建

• 用npx新建react项目

• 删除不必要的文件，创建空的初始页面

• 添加子组件，测试子组件的联通

npx安装

---

如果想要快速方便地搭建项目，可以选择使用npx

• 新建目录，然后在该目录下进入终端敲如下命令：npx create-react-app your-app-name

• 注意项目名不允许大写，如果你要起的名字比较长，需要分界线，可以使用横杆隔开

• 安装需要一些时间。安装完成后进入项目目录并启动：

cd your-app-name

npm start

默认在浏览器开启一个页面，地址：http://localhost:3000

这时本地会有一个新创建的项目文件，大概是这样的：

test是我的项目名称（草率了点，不推荐的命名），

• node_modules文件夹下存放着相关的库文件；

• public文件夹下存放公共资源，其中有一个index.html，是整个项目的总html页面；

• src文件夹是我们编写的代码存放的主要区域

---

创建空的初始页面

---

默认在浏览器打开的页面是一个旋转的react图标，我们可以删除一些不必要的文件，把初始页面置空

如，删去src目录下的App.css、App.test.js、logo.svg、App.js，再新建一个App.js文件

App.js是我们的主组件，这里存放着原始数据，也会分配某些功能让子组件去完成，然后汇总到主组件来，相关操作均围绕App组件展开；也就是：一般主组件不仅仅是展示数据，还会涉及数据的读写，因此这里选择将App组件设置为 类组件（也叫容器组件）

类组件必须有 render函数，render函数是我们的渲染函数，把想要渲染的页面代码放在这里面，然后展示出来

// 引入react

import React, {Component} from ‘react’

// 创建类组件App

class App extends Component {

render(){

return (

)

}

}

// 导出该组件

export default App;

保存修改，再重新看localhost:3000，可以看到页面变成了空白

和容器组件对应的，还有一种组件叫 UI组件，也称为函数组件；这里可以简单地先理解为，它是用于展示数据的

在src文件夹下新建MyContact.js文件，用于展示项目数据，此处先简要地写一下必要框架，用的是UI组件

import React from ‘react’

const MyContact = ()=>{

}

export default MyContact;

---

添加子组件，测试子组件的联通

---

为了展示时能够好看些，我使用了第三方css库materialize：

在public下的index.html中引入该css库，后续使用的样式取自这个库

然后填充主组件，我们用state字段来存储数据：

state = {

Contact: [

{ id: 1, name: “ccy”, age: 24, sex: “female” },

{ id: 2, name: “ccy1”, age: 23, sex: “male” },

{ id: 3, name: “ccy2”, age: 25, sex: “female” }

]

}

将MyContact组件引入到主组件中，把state中的Contact传给MyContact中展示

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！