创建一个简洁的React项目

最新推荐文章于 2024-05-09 18:16:20 发布

后海 0_o

最新推荐文章于 2024-05-09 18:16:20 发布

阅读量267

点赞数

文章标签： reactjs

本文链接：https://blog.csdn.net/weixin_45137565/article/details/115342247

版权

一、创新React项目

打开终端

// 创建react项目
npx create-react-app my-app
// 进入文件目录
cd my-app
// 运行
npm start

这个时候可能会有无法运行的问题

在my-app根目录创建一个名为 .env 的文件,在里面写上：

SKIP_PREFLIGHT_CHECK=true
// 配置环境有问题,需要跳过验证.不然运行不起来

二、简化项目内容

在这里插入图片描述

三、目录结构说明

1、node_modules 项目依赖包

2、public 公共资源文件

⑴、favicon.icon 浏览器tab上图标，也是这个项目的一个标志

⑵、index.html 网页的入口文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- 显示顶部网页的图标 -->
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <!-- 显示顶部网页的标题 -->
    <title>Yuan React</title>
  </head>
  <body>
    <!-- 假如不支持js,这时候会提示这句话 -->
    <noscript>
      <!-- You need to enable JavaScript to run this app. -->
      您的浏览器不支持JS,请打开浏览器支持JS的支持配置项
    </noscript>
    <div id="root"></div>
  </body>
</html>

3、src 项目源码

⑴、App.js 与index.js关联的组件文件

// 通过类的方式定义组件，我们需要继承React.Component
// 第一种实现方法
/* import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div>Hello World</div>
    );
  }
} */

// 第二种实现方法
import React, { Component } from 'react';
// 可以拆分为
// import React from 'react'
// import { Component } from 'react'
// 在react中去取component

// 定义了一个名为 App的类,继承了Component
class App extends Component {
  // render函数,决定了往页面上面渲染什么内容
  render() {
    return (
      // 在js中写HTML标签需要用到单引号将纳入变为字符串的形式传递出去
      // 为JSX语法,需要引入react实现这种语法的解析
      <div>Hello World</div>
    );
  }
}

// 第三种实现方法
/*
function App() {
  return (
    <div>Hello World</div>
  );
} */

export default App;

⑵、index.js 项目的入口文件

// 引入react库
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

// <App />为JSX语法,引入react可以实现这种语法的解析
// 引用了一个App的组件,挂载到页面上,ID = root的标签下
ReactDOM.render(<div>
<App />
</div>, document.getElementById('root') );

4、node_modules 项目依赖

5、package.json 项目或者模块包的描述，里面包含许多元信息。比如项目名称，项目版本，项目执行入口文件，项目贡献者等等

6、package-lock.json 生成的系统当前安装的库的具体来源和版本号，锁定版本

7、README.md 项目说明

四、yarn

**可能存在没有’ paclage-lock.json ‘文件, 而有一个’ yarn.json ’

⑴、删除’ yarn.lock ’ 和node_modules文件夹

⑵、打开终端, 进入my-app,重新安装

npm install

后海 0_o

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
创建一个简洁的React项目

一、创新React项目打开终端// 创建react项目npx create-react-app my-app// 进入文件目录cd my-app// 运行npm start这个时候可能会有无法运行的问题在my-app根目录创建一个名为 .env 的文件,在里面写上：SKIP_PREFLIGHT_CHECK=true// 配置环境有问题,需要跳过验证.不然运行不起来二、简化项目内容三、目录结构说明1、node_modules 项目依赖包2、public 公共资源文
复制链接

扫一扫