React编程-开发项目搭建(三)

最新推荐文章于 2024-07-24 11:09:48 发布

无处安放的波澜

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量849

点赞数

分类专栏： React框架实战文章标签： react jsx

本文链接：https://blog.csdn.net/weixin_42533732/article/details/116244054

版权

React框架实战专栏收录该内容

6 篇文章 0 订阅

订阅专栏

React的入门案列

配套视频地址为：http://www.woniuxy.com/course/154

通过前面的学习，我们大概了解了虚拟DOM，和diff算法所带来的性能优化。接下来我们就开始搭建我们的入门程序，本教程我们先从最基本的js文件引入开始搭建项目，后续再引入脚手架的方式来学习。

安装React的包

第一步：
npm install react --save 
或者
npm i react -S

第二步：
npm install react-dom --save
npm i react-dom -S

第三步：
npm install babel-standalone --save-dev
npm i babel-standalone -S-dev

react：这个包是react的核心包

react-dom：提供了针对dom的方法，包括虚拟dom

创建项目引入依赖包

//第一步初始化项目
npm init -y

在项目中创建一个index.html页面

 <script src="./node_modules/react/umd/react.development.js"></script>
 <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
 <script src="./node_modules/babel-standalone/babel.js"></script>
<body>
    //创建一个跟标签，在react中用于渲染内容，有且仅有一个
    <div id="app"></div>
 	// type=text/babel代表在运行代码的时候，要使用babel来转换jsx语法，否则浏览器无法识别   
    <script type="text/babel">
    	// 使用jsx语法来定义一个模板
        let template = <h1>欢迎来到蜗牛</h1>
        // 使用ReactDOM的render来方法来将模板渲染到app对象上面
        ReactDOM.render(template,document.getElementById("app"));
    </script>
</body>

在上面的代码中，我们使用了jsx语法，这个内容在后续的章节里面会继续给大家讲解。现在先简单的了解一下jsx的一些特点：JSX：JavaScript XML 是JavaScript和xml结合的一种语法。

执行的效率更快
类型是安全的，在编译过程中就会发现错误
使用JSX编写模板，上手非常的简单。

测试结果

最终测试后的结果如下，相当于将h1组件放在了app根节点里面。

React脚手架搭建

脚手架: 用来帮助程序员快速创建一个基于库的模板项目

包含了所有需要的配置
指定好了所有的依赖
可以直接安装/编译/运行一个简单效果

react提供了一个用于创建react项目的脚手架库: create-react-app

项目的整体技术架构为: react + webpack + es6 + eslint
使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

create-react-app

搭建react脚手架有几种方式，接下来就给大家介绍一下各种方式：

全局安装脚手架工具
```
//全局安装脚手架工具
npm install -g create-react-app
//使用脚手架工具创建项目
create-react-app reactdemo
```
使用全局安装的方式来创建脚手架工具，这种方式一旦使用，那后续就可以使用本地的脚手架来创建项目。但是需要注意，脚手架工具一旦更新后，全局安装的工具需要自己更新一下
npx临时安装脚手架
```
npx create-react-app reactdemo
```
使用npx来创建脚手架工具，会临时在创建create-react-app工具,当项目创建完毕后，会立即删除create-react-app工具,这种方式创建项目可能会慢一些，但是你能保证你使用的是最新的脚手架工具来创建项目
yarn包管理安装脚手架
```
yarn xxx
```

使用脚手架创建完我们的项目后，我们会看到如下的一些信息。

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
  
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd react02-cli
  npm start

npm start :启动项目的命令，在项目package.json文件中配置的信息
npm run build：完成项目的构建和打包
npm test：测试当前项目
npm run eject：在react中react-scripts是 create-react-app 的一个核心包，一些脚本和工具的默认配置都集成在里面，比如webpack配置文件，babel的配置文件等等信息。eject 命令执行后会将封装在 create-react-app中的配置全部反编译到当前项目，这样用户就能完全取得 webpack 文件的控制权。

接下来我们将项目导入到vscode中使用，目录结果如下图所示：

在这里插入图片描述