# React, Part I In this unit, you will be introduced to React. The goal of this unit is to introduce you to the popular JavaScript library, React. React will help you build better, scalable front-ends for your website through the creation of components. An overview of ES6 and functional JavaScript concepts will help in your understanding of React. After this unit, you will be able to: - Understand ES6+ and functional JavaScript programming concepts - Know what a Virtual DOM is and how it is used in React - Learn JSX - Build first React components If you are interested in learning more about these topics, here are some additional resources: - [ ] Documentation: [React Documentation: Getting Started](https://reactjs.org/docs/getting-started.html) - [ ] Tutorial: [Intro to React](https://reactjs.org/tutorial/tutorial.html), [codesandbox](https://codesandbox.io/p/sandbox/react-dev-forked-vdyxsc?file=%2Fsrc%2FApp.js%3A5%2C44) - [x] Article: [Thinking in React](https://reactjs.org/docs/thinking-in-react.html) - [x] Article: [What the Fork is the React Virtual DOM](https://maggieappleton.com/react-vdom) - [x] Resource: [Awesome React](https://github.com/enaqx/awesome-react) - [x] Resource: [Create React App](https://github.com/facebook/create-react-app)，[[Create React App 创建 React 应用程序]] - [ ] [Figma to React](https://www.google.com/search?q=figma+for+react&sca_esv=593651714&sxsrf=AM9HkKm4hEeBbB3GxIAtS0KCHWCQsaA2tw:1703546666463&source=hp&ei=Kg-KZf2aGqLL1e8P_c2W8Ac&iflsig=AO6bgOgAAAAAZYodOonBU0ju--2lLYhB4Lnm_Koh5EpG&ved=0ahUKEwj916Tv3auDAxWiZfUHHf2mBX4Q4dUDCAo&uact=5&oq=figma+for+react&gs_lp=Egdnd3Mtd2l6Ig9maWdtYSBmb3IgcmVhY3QyBRAAGIAEMgUQABiABDIFEAAYgAQyBhAAGBYYHjIGEAAYFhgeMgYQABgWGB4yBhAAGBYYHjIGEAAYFhgeMgYQABgWGB4yBhAAGBYYHkiwJlAAWIAjcAB4AJABAJgByQGgAdQNqgEFOC43LjG4AQPIAQD4AQHCAgoQIxiABBiKBRgnwgILEC4YgAQYxwEY0QPCAgUQLhiABMICCBAuGIAEGNQCwgIHEAAYgAQYCsICCBAAGIAEGMsB&sclient=gws-wiz) - [ ] [React Developer Tools](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-front-end-development/tracks/fscj-22-react-part-ii/modules/wdcp-22-components-interacting-218cf398-22f2-4666-97bc-52d6789f0a78/articles/react-developer-tools)：安装在 chrome 浏览器中的插件 - [ ] [React DevTools Sandbox](https://react-devtools-tutorial.vercel.app/) - [Introduction: React, Part I](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-front-end-development/tracks/fscj-22-react-part-i/modules/wdcp-22-introduction-react-part-i-3ff36119-773b-4a18-99e1-8a6b2b84451b/informationals/wdcp-22-introduction-react-part-i) - [Review: React, Part I](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-front-end-development/tracks/fscj-22-react-part-i/modules/wdcp-22-review-react-part-i-3ac1c17a-32bc-47f6-b3ac-f1cd38102144/informationals/wdcp-22-review-react-part-i) - [React](https://react.dev/learn) # React, Part II In this unit, you will dive further into React. The goal of this unit is to dive further into React. You’ll learn how React is useful in passing data between different parts of your front-end using props and state. You’ll also learn about different ways of managing the application state using Hooks. Finally, you’ll learn how to test your React applications using Jest and Enzyme. After this unit, you will be able to: - Understand how components can affect other components - Know how to use props - Know how to manage state - Know how to use Lifecycle Methods - Deploy React applications with Netlify - Know how to pass data between components - Use React Hooks - Test React applications using Jest and Enzyme VS Code中如何实现对React项目的实时预览？ 回答 要在VS Code中实现对React项目的实时预览，您可以考虑使用React Preview插件。以下是详细的步骤： 1. 首先，您需要安装React Preview插件。您可以在VS Code的插件市场中搜索“React Preview”，然后安装它。 2. 安装完成后，您可以在VS Code中打开您的React项目文件夹。 3. 打开React组件文件（.js或.jsx文件），然后单击React Preview插件的图标或使用快捷键来启动实时预览。 4. 这将在VS Code中打开一个实时预览窗口，您可以在其中查看您的React组件的渲染效果。当您对组件进行更改时，实时预览窗口将自动更新以反映这些更改。 通过按照这些步骤，您可以在VS Code中实现对React项目的实时预览，从而更轻松地查看您的组件的渲染效果。