Reactjs项目构建

痛定思痛。 2022-12-07 12:51 199阅读 0赞

##### 1.通过node环境创建react工程插件 #####

npm install -g create-react-app

##### 2.指定目录创建React工程 #####

create-react-app <工程名>

##### 3.进入目录启动项目 #####

cd <工程根目录>
    yarn start

##### 4.创建第一个组件 #####

创建welcome.js

import React, { Component} from 'react';
    
    class Welcome extends Component { 
        render() { 
            return <h1> Hello, World! </h1>
        }
    }
    export default Welcome

并将新组件引入到主页面中

import React from 'react';
    import logo from './logo.svg';
    import './App.css';
    import Welcome from './Welcome';
    
    function App() { 
      return (
        <div className="App">
          <header className="App-header">
            <img src={ logo} className="App-logo" alt="logo" />
            <p>
              Edit <code>src/App.js</code> and save to reload.
            </p>
            <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn React
            </a>
            <Welcome/> { /* 引入新组件 */}
          </header>
        </div>
      );
    }
    export default App;

刷新页面

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgyNjM0OQ_size_16_color_FFFFFF_t_70_pic_center]

##### 5.打包 #####

yarn build

个人博客：[Karma‘s Blog][Karma_s Blog]  
源码地址：[传送门][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgyNjM0OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/1cd9d4bd22684dde9c5de0e72aa82801.png
[Karma_s Blog]: http://karma520.com/2020/09/16/22%20Reactjs%E9%A1%B9%E7%9B%AE%E6%9E%84%E5%BB%BA/
[Link 1]: https://github.com/kay-520/React_study

发表评论取消回复

表情：

评论列表（有 0 条评论，199人围观）

还没有评论，来说两句吧...

相关阅读

相关 ReactJS入门

目录一：前端开发的演变二：ReactJS简介三：搭建环境四：React快速入门 -------------------- 一：前端开发的演变到目前

淡淡的烟草味﹌/ 2024年03月30日 12:28/ 0 赞/ 82 阅读

相关 reactJs 基础

react不是一个完整的mvc,mvvm框架。 react跟web components 不冲突背景原理：基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每

不念不忘少年蓝@/ 2023年08月17日 16:20/ 0 赞/ 150 阅读

相关玩转Reactjs第一篇-构建工程(create-react-app)

一、前言前期对vue的使用以及源码做了一些介绍和分析，vue由于其易用易学，性能高等特点，吸引越来越多的前端开发者在使用。作为前端框架的三剑客之一的React

缺乏、安全感/ 2023年07月03日 06:20/ 0 赞/ 121 阅读

相关 Reactjs项目构建

1.通过node环境创建react工程插件 npm install -g create-react-app 2.指定目录创建React工程 cre

痛定思痛。/ 2022年12月07日 12:51/ 0 赞/ 200 阅读

相关 reactJs入门

本文中的react是老版本的，对于新版本只需要改两个地方： <!DOCTYPE html> <html> <head> <me

淩亂°似流年/ 2022年07月16日 03:14/ 0 赞/ 294 阅读

相关【ReactJS】React项目构建的几种方式

前言：构建React项目的几种方式： 1. 构建：create-react-app 快速脚手架 2. 构建：generator-react-webpack 3.

痛定思痛。/ 2022年06月02日 02:51/ 0 赞/ 286 阅读

相关 reactJs项目本地run不能热更新

最近接触一个前端项目，使用的是reactJs框架，本地npm run start后，修改代码、保存，不能自动热更新，要代码生效必须本地重新npm run start才能生效。

Love The Way You Lie/ 2022年05月27日 12:18/ 0 赞/ 193 阅读

相关 SpringMVC项目构建

“好雨知时节，当春乃发生” 最近在学习SpringMVC，看到第一章，使用SpringMVC框架。首先，需要到spring的网站上下载需要依赖的jar包：下载地

￡神魔★判官ぃ/ 2022年05月03日 08:57/ 0 赞/ 283 阅读

相关项目构建思路

项目构建思路项目采用spring MVC的模式来编写。通过编写Dao层实现与数据库的交互通过编写service层实现通过Dao层间接的访问数据库

朱雀/ 2022年03月16日 01:22/ 0 赞/ 333 阅读

相关 React项目构建

React项目构建文章目录 React项目构建项目依赖安装项目整体说明配置文件详解 \\p

叁歲伎倆/ 2021年12月10日 10:04/ 0 赞/ 392 阅读