React-学习笔记（5-React脚手架的安装和简单使用）

最新推荐文章于 2024-04-20 03:20:13 发布

bodyHealthy

最新推荐文章于 2024-04-20 03:20:13 发布

阅读量990

点赞数 2

分类专栏： React.js 文章标签： react.js 前端前端框架 javascript 学习

本文链接：https://blog.csdn.net/hao_13/article/details/130308719

版权

React.js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章详细介绍了在Windows系统下如何安装React脚手架create-react-app，包括全局安装、创建项目和启动项目的过程。接着，通过编写HelloTitle和Message组件，以及App.js和index.js文件，展示了React项目的简单使用方法，强调了项目的基本文件结构和组件化编程思想。

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

1、安装 React 脚手架（win）

（1-0）为自己的电脑全局安装 create-react-app。（只需一次即可）

（1-1）创建项目脚手架（每次创建项目脚手架时需进行）

（1-2）启动\运行项目

2、简单使用

先准备一个 index.html 文件在 public 目录下

编写 HelloTitle 组件：

编写 Message 组件：

编写 App.js 文件：

完成 src 目录下 index.js 入口文件的编写。（注意18版本之前和当前18版本的写法）

1、安装 React 脚手架（win）

（1-0）为自己的电脑全局安装 create-react-app。（只需一次即可）

win+R ——> cmd ——> npm i create-react-app - g

（1-1）创建项目脚手架（每次创建项目脚手架时需进行）

进入到准备用来存放项目文件夹的目录下，

按住Shift + 鼠标右键，选择 在此处打开 Powershell 窗口，

在窗口中输入：create-react-app 项目文件夹名称

回车执行

（注意，项目文件夹名称不能有中文或特殊字符，不要使用大小的英文字母）

（1-2）启动\运行项目

进入到该目录下

打开控制台窗口

npm start 或 yarn start

默认运行到本地3000端口，自动打开默认浏览器

关键的文件有三，即 public 目录下需要有一个主页面文件（index.html），src 目录下需要有一个 index.js 入口文件和 App.js 外壳组件。

没有主页面文件和入口文件，项目是无法成功编译和运行的。

2、简单使用

先删除掉脚手架文件 public 目录和 src 目录下的全部内容（暂且留下 public 目录下的 favicon.ico 图标文件），重新开始创作。

先准备一个 index.html 文件在 public 目录下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- %PUBLIC_URL% 表示 public 文件夹的路径 -->
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React-脚手架-1</title>
</head>
<body>
    <!-- 根容器 -->
    <div id="root"></div>
</body>
</html>

在 src 目录下创建一个新的目录 components，专门用来存放组件。

components 目录下又是若干个目录（有多少个组件，就应该有多少个这样的目录），每个目录存放着与该组件相关的资源，至少应该有一个 js 文件或 jsx 文件（React 脚手架项目中所有js文件后缀都可以写成 jsx 后缀，这没有关系）。

编写 HelloTitle 组件：

// HelloTitle.jsx
import React from 'react';
import './HelloTitle.css';

export default class HelloTitle extends React.Component{
    render(){
        return(
            <h1 className="hello-title">
                Hello React
            </h1>
        )
    }
}

/* HelloTitle.css */
.hello-title{
    color:brown;
    border: 2px solid brown;
}

编写 Message 组件：

// Message.jsx
import React from 'react';
import './Message.css';

export default class Message extends React.Component{
    render(){
        return(
            <div className='container'>
                <p className='passage'>
                    Learning React make me happy?
                </p>
            </div>
        )
    }
}

/* Message.css */
.container{
    padding: 20px 10px;
    background-color: bisque;
}
.passage{
    color: palevioletred;
}

编写 App.js 文件：

// App是外壳组件，首字母大写以表达组件的意思
import React from 'react';

// 引入要使用到的两个组件
import HelloTitle from './components/HelloTitle/HelloTitle';
import Message from './components/Message/Message';

export default class Title extends React.Component{
    render(){
        return(
            <div>
                <HelloTitle/>
                <Message/>
            </div>
        )
    }
}

完成 src 目录下 index.js 入口文件的编写。（注意18版本之前和当前18版本的写法）

// 渲染外壳组件 App 到页面

/*
    以下为 React 18 版本以前的写法,18 版本不再支持

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

    // 引入App组件 若为js或jsx后缀，则可以不用写后缀
    import App from './App'

    // 渲染App组件到页面
    ReactDOM.render(<App/>, document.querySelector('#root'));
*/

// 以下为 React 18 版本的写法
import {createRoot} from 'react-dom/client';

import App from './App';

const root = createRoot(document.querySelector('#root'));

// 将外壳组件添加到根容器中渲染
root.render(<App/>);