Preface
When faced with a new React framework, stay positive and patient. Practice is the key, write small projects to hone your skills. Ask questions, participate in the community, and learn together. Believe in yourself, you can master it! You and I encourage each other!
React official website: React
React Chinese website: React Chinese website
1. Introduction and basic concepts of React
-
What is React : React is an open source JavaScript library developed by Facebook for building user interfaces. It is a front-end library for building reusable, high-performance UI components. By adopting the idea of component development, React splits the user interface into independent components, allowing developers to more easily and flexibly build web applications with strong interactivity and increasing complexity.
-
Virtual DOM : Virtual DOM is a lightweight, in-memory virtual representation that corresponds to actual DOM elements. React compares the difference between the virtual DOM and the actual DOM and minimizes DOM operations to achieve efficient UI rendering and improve application performance and responsiveness.
-
Component development : Component development is one of the core ideas of the React framework. It splits the user interface into independent, reusable components, allowing developers to build complex UIs by combining these components.
-
JSX syntax : It is a syntax extension that combines HTML and JavaScript. JSX allows developers to directly write HTML-like tags in JavaScript code to more intuitively describe the structure of the UI, thus improving the readability and maintainability of the code.
-
One-way data flow : React's data flow is one-way, data is passed from parent component to child component, and child components cannot directly modify the data of the parent component. This one-way data flow simplifies application state management, making the flow of data more controllable and easier to debug.
-
React ecosystem : React's ecosystem is very rich, and there are a large number of third-party libraries and tools that can be used in conjunction with React, such as React Router to handle the navigation of the application, Redux to manage global state, etc. These tools make it easier for developers to build complex front-end applications.
2. Environment setup and creation of the first React application
Setting up a React development environment and creating your first React application are important steps to start learning React. Here are the simple steps to set up a React development environment and create your first React application in your local environment:
1. Install Node.js and npm:
Make sure Node.js and npm (Node Package Manager) are installed on your computer. You can download the installer from the Node.js official website and follow the installation wizard to install it.
npm mirror: npm install -g cnpm --registry=https://registry.npm.taobao.org
2. Create a React application:
Open a command line terminal (or use your favorite terminal program) and navigate to the folder where you want to create your React application.
Run the following command to create a new React application:
npm install -g create-react-app // 全局安装react脚手架
create-react-app -V // 检测脚手架是否安装成功
create-react-app my-react-app // 创建my-react-app的项目This will create a new React application called "my-react-app" using the create-react-app tool. This process may take some time as it downloads and installs the necessary dependencies.
3. Enter the project directory:
After the creation is completed, enter the newly created project directory:
cd my-react-app4. Run the React application:
In the project directory, run the following command to start the React application:
npm start5. Check out the React application:
Now, you should be able to see a simple React application in your browser with a default React welcome page.
6. Edit the React application:
You can use any text editor (for example: VSCode) to open the project folder and edit the files in the src folder to modify the content of the React application. After saving the changes, your application will automatically update and preview the changes in real time in the browser.
At this point, you have successfully set up a React development environment and created your first React application. Now you can further learn about React's component development, state management, etc., and start building more complex and rich React applications.