2024年前端最新React入门：基本环境搭建，2024年最新字节跳动Web前端面试凉凉经

算法刷题

大厂面试还是很注重算法题的，尤其是字节跳动，算法是问的比较多的，关于算法，推荐《LeetCode》和《算法的乐趣》，这两本我也有电子版，字节跳动、阿里、美团等大厂面试题（含答案+解析）、学习笔记、Xmind思维导图均可以分享给大家学习。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

写在最后

最后，对所以做Java的朋友提几点建议，也是我的个人心得：

1. 疯狂编程

2. 学习效果可视化

3. 写博客

4. 阅读优秀代码

5. 心态调整

• 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中展示

// 引入MycContact

import MyContact from ‘./MyContact’;

// …

//在render中使用MyContact组件并传递数据

render() {

return (

)

}

MyContact.js中用props接收数据并处理

import React from ‘react’

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】