react 项目搭建步骤

1,创建项目目录
首先,创建一个项目目录,并在终端中进入该目录。

mkdir my-react-app
cd my-react-app


2,初始化项目
使用以下命令初始化一个新的 npm 项目。按照提示,你可以设置项目名称、版本、描述等信息。

npm init


3,安装 React 和 ReactDOM
使用 npm 安装 React 和 ReactDOM,这两个包是构建 React 应用所必需的。

npm install react react-dom

4,安装 Babel
React 使用 JSX 语法,需要通过 Babel 转译成标准的 JavaScript。安装 Babel 相关依赖:

npm install @babel/core @babel/preset-react @babel/preset-env babel-loader --save-dev


5,创建项目文件
在项目目录中,创建一个简单的 React 组件文件和一个 HTML 文件。

在项目根目录创建一个名为 src 的文件夹。

在 src 文件夹中创建一个名为 index.js 的文件,用于编写 React 组件。

在项目根目录创建一个名为 index.html 的文件,用于加载 React 应用。

6,配置 Babel
在项目根目录创建一个名为 .babelrc 的文件,并配置 Babel 的预设:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

7,创建 React 组件
编写一个简单的 React 组件,例如://在这里插入代码片 src/index.js
 

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return 

Hello, React!

; } ReactDOM.render(, document.getElementById('root'));


8,创建 HTML 文件
在项目根目录的 index.html 文件中创建一个容器元素,该元素将用于渲染 React 应用。示例:




  
  React App


  
 

如何创建React项目_-CSDN博客

你可能感兴趣的:(react.js,前端,前端框架)