devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【啊哈】React学习--超详细的React项目创建过程_创建react项目的完整步骤以及代码

作者：2023面试高手 | 2024-06-04 09:26:26

赞

踩

创建react项目的完整步骤以及代码

了解React

学习React之前，我们要了解React 是什么？

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。----React官方文档

创建新的React项目

新建react项目有三种方式
一、通过CDN链接引入React核心文件
（1）先创建一个新的HTML文件
（2）引入React文件

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  • 1
  • 2
  • 3

crossorigin属性：能在 React 16 及以上的版本中有更好的错误处理体验。
（3）在 body 标签中创建 Dom 结构以及 script 标签，这里因为引入了 babel,所以 script 标签的 type 必须是 “text/babel”，然后在 scirpt 标签中写 React 代码

<!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">
    <--引入React-->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <title>react</title>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        //必须添加type='text/bable',否则不能识别JSX语句

		//最简易的 React 示例
        ReactDOM.render(
					  <h1>Hello, world!</h1>,
					  document.getElementById('root')
				);
        //ReactDOM 的 DOM 一定要大写！

    </script>
</body>
</html>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

（4）浏览器打开Index.html，可以看到页面上渲染出Hello, world!

二、通过脚手架创建
（1）使用npx命令

npx —— 是 npm 5.2+ 附带的 package 运行工具。

····· Win+R 打开命令行工具
····· 用cd 命令跳转到放新建项目的文件夹

cd C:\XXX\XXX\react\test2    //cd 后加文件地址

  • 1

····· 执行创建React项目的命令

npx create-react-app my-app   //my-app 是 创建的React的项目名

  • 1

创建完成后

cd my-app  //跳转到my-app文件夹内
npm start  //运行项目，执行完成后浏览器会出现默认的页面

  • 1
  • 2

创建完成的项目结构
····· 在App.js文件中编写React语句

/* 修改了默认的代码，在终端执行
	npm start  命令运行项目
	修改后的页面显示Logo图片以及Hello Word！*/

import logo from './logo.svg';    // 引入Logo图片
import './App.css';    //引用样式

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1>Hello Word!</h1>
      </header>
    </div>
  );
}

export default App;

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

（2）使用npm命令
····· Win+R 打开命令行工具
····· 用cd 命令跳转到放新建项目的文件夹
····· npm 全局安装 create-react-app

	npm install -g create-react-app

  • 1

····· 然后使用 create-react-app 命令来创建项目

	create-react-app <项目名>

  • 1

····· 项目与第一种方式创建的一样
三、使用 webpack、babel、react 来创建 React 项目
（1）打开命令行工具，进入到要创建项目的文件夹，创建一个以项目名命名的文件夹。

mkdir my-app   //创建一个名为my-app的文件夹

  • 1

（2）进入到这个文件夹

cd my-app

  • 1

（3）创建一个src文件夹放React代码

mkdir src

  • 1

（4）初始化项目

npm init -y

  • 1

（5）安装webpack
首先安装 webpack 和 webpack-cli，webpack-cli 包含了 webpack 的众多指令，所以需要安装。

npm install webpack-cil --save-dev

  • 1

（6）安装Bable
进行前端工程化的时候大多数前端工程师都会用到 babel,最开始的 babel 是用来把 es6 的代码编译成 es5 的代码，让前端开发者在使用新的特性的同时不必考虑浏览器兼容问题。虽然现在的主流浏览器已经支持大部分的 es6 的新特性，但是因为 JavaScript 每年都会有一些新的特性被提出，而浏览器不一定能在特性推出后及时实现，或者是有一些还在实验中的语法。使用来 babel 后就可以忽略这些问题，可以放心使用新的 JavaScript 语法，甚至是实验性的语法。
····· 安装

	npm install @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev

  • 1

····· 配置
配置babel
在根目录建立 .babelrc 文件，然后写入以下配置

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

  • 1
  • 2
  • 3

配置webpack
在根目录建立 webpack.config.js 文件，然后写入以下配置

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
	
module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
    ],
  }
};

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

（7）在src文件夹内创建index.html，main.js，App.js文件，用来放React代码。
（8）由于webpack只能打包JS文件，所以必须下载和 html 有关的 loader 和插件来对 html 进行处理。
安装 html-webpack-plugin 和 html-loader

	npm install html-webpack-plugin html-loader --save-dev

  • 1

在安装完成之后我们需要在 webpack.config.js 中进行配置

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      /* 配置代码*/
      {
        test: /\.html$/,
        use: {
          loader: "html-loader"
        }
      }
    ],
    /* 配置代码*/
    Plugins:[
        new HtmlWebpackPlugin({
            title:'react app',
            filename:'index.html',
            template:'./src/index.html'
        })
    ]
  }
};

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

（9）配置完成编写React代码
首先在 index.html 文件中写入以下代码(在一个基本 .html 页面中加一个 id 是 app 的 div)

<!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">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

写 react 代码前需要安装 react 和 react-dom

	npm install react react-dom --save

  • 1

在 App.js 文件中创建一个组件并导出

	import React from 'react'
	
	class App extends React.Component {
	  render() {
	    return(
	      <div>
	        <h1>Hello World</h1>
	      </div>
	    )
	  }
	}
	
	export  default App

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

在main.js中将组件导入并渲染

import React  from "react";
import ReactDOM from 'react-dom'
import App from './App.js'

ReactDOM.render(<App/>,document.getElementById('app'))

  • 1
  • 2
  • 3
  • 4
  • 5

（10）运行项目
在运行前我们还要安装 webpack-dev-server 用来启动一个本地服务器来浏览我们的项目并且可以实现保存自动刷新

	npm install webpack-dev-server --save-dev

  • 1

在根目录的 package.json 中写一个脚本

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    /*脚本代码*/
    "start": "webpack-dev-server --open --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.21.0",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "babel-loader": "^9.1.2",
    "html-loader": "^4.2.0",
    "html-webpack-plugin": "^5.5.0",
    "webpack-cil": "^0.0.1-security",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "webpack": "^4.44.0"
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

（11）运行 npm run start

总结

加油，其实你什么都能学会！

内容参考：如何从零开始创建React项目（三种方式）–C澒

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/671224
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号