React脚手架

Qiuxuntao

已于 2022-04-24 21:37:46 修改

阅读量839

点赞数

分类专栏： react 文章标签： react 前端

于 2022-04-24 21:22:24 首次发布

本文链接：https://blog.csdn.net/qiuxuntao/article/details/124378773

版权

react 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

本文介绍了如何利用create-react-app脚手架创建React应用，包括项目的创建、启动和基本结构。通过创建组件Hello和Welcome，展示了React组件的导入和使用方法，以及组件样式的设置。最后，文章提到了npm start启动项目后的效果。

摘要由CSDN通过智能技术生成

一、使用create-react-app创建react应用

1.1、react脚手架

a、xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
1.包含了所有需要的配置（语法检查、jsx编译、devServer…）
2.下载好了所有相关的依赖
3.可以直接运行一个简单效果

b、react提供了一个用于创建react项目的脚手架库: create-react-app
3.项目的整体技术架构为: react + webpack + es6 + eslint
4.使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

1.2、创建项目并启动

(1)、第一步，全局安装：npm i -g create-react-app（如果没有安装npm,先去安装npm）
(2)、第二步，切换到想创建脚手架项目的目录，使用创建脚手架命令：create-react-app 项目名字
(3)、第三步，进入项目文件夹：cd 项目名字
(4)、第四步，启动项目：npm start

在这里插入图片描述

1.3、脚手架项目结构

public ---- 静态资源文件夹
		favicon.icon ------ 网站页签图标
		index.html -------- 主页面
		logo192.png ------- logo图
		logo512.png ------- logo图
		manifest.json ----- 应用加壳的配置文件
		robots.txt -------- 爬虫协议文件
src ---- 源码文件夹
		App.css -------- App组件的样式
		App.js --------- App组件
		App.test.js ---- 用于给App做测试
		index.css ------ 样式
		index.js ------- 入口文件
		logo.svg ------- logo图
		reportWebVitals.js
			--- 页面性能分析文件(需要web-vitals库的支持)
		setupTests.js
			---- 组件单元测试的文件(需要jest-dom库的支持)

二、组件的导入和简单使用

src/index.js 是项目入口文件、引入react核心库、
引入ReactDOM、引入App组件、渲染App组件到public/index.html页面

2.1、src/index.js

//引入react核心库
import React from 'react';

//引入ReactDOM
import ReactDOM from 'react-dom/client';

//引入App组件
import App from './App.js';

//渲染App组件到页面
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App/>
);

2.2、src/app.js

导入核心库,创建外壳组件并暴露把组件hello、welcome导入，并且渲染出来

//导入核心库 创建外壳组件并暴露 把组件hello、welcome导入，并且渲染出来
import React, { Component } from "react";

import Hello from "./components/Hello/Hello.js";
import Welcome from "./components/Welcome/welcome.js";

//创建外壳组件并暴露 把组件hello、welcome导入
export default class App extends Component {
  render() {
    return (
    
      <div>
       3<Hello />
        <Welcome />
      </div>
    );
  }
}

2.3、src/components

创建src/components文件夹，里面存放组件和css文件，更加清晰规范
在这里插入图片描述

2.4、src/components/Hello/Hello.css

.title{
    background-color: aqua;
}

2.5、src/components/Hello/Hello.js

import React,{Component} from 'react'
import './Hello.css'
export default class Hello extends Component{
    render() {
        return <h1 className='title'>hello,react!!!!</h1>
    }
}

2.5、src/components/Welcome/welcome.css


.qxt{
    background-color:pink;
}

2.6、src/components/Welcome/welcome.js

import React,{Component} from 'react'

import './welcome.css'
export default class Welcome extends Component{
    render() {
        return <h1 className='qxt'>好好学习 天天向上</h1>
    }
}