Reactjs项目构建

痛定思痛。 2022-12-07 12:51 180阅读 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 条评论，180人围观）

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

相关阅读

相关 reactJs 基础

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

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

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

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

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

相关 ReactJs快速入门

ReactJs介绍: ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG

布满荆棘的人生/ 2023年06月11日 07:23/ 0 赞/ 57 阅读

相关 Reactjs项目构建

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

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

相关 ReactJs实战感悟

写这篇博文之前，不免先自我介绍一下，作为一个在编码一线搬砖多年，涉猎过C、C++、Java、C\、Javascript等多种语言，从前台到后台，从工程到理论，从Coder到Ma

系统管理员/ 2022年09月21日 13:26/ 0 赞/ 188 阅读

相关 reactJs入门

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

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

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

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

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

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

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

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

相关 SpringMVC项目构建

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

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

相关 ReactJs 注意点

注意点：1.在react创建之初，使用的是React.createClass方法来创建组件类，这种方式下，通过定义组件类的一个getInitialState方法来获取初始值，但

红太狼/ 2021年10月01日 03:24/ 0 赞/ 445 阅读