react入门之旅1——脚手架简介及helloworld

最新推荐文章于 2024-06-06 18:30:20 发布

smallfish118

最新推荐文章于 2024-06-06 18:30:20 发布

阅读量265

点赞数

分类专栏： react 文章标签： react 测试工程师

本文链接：https://blog.csdn.net/qq_41470573/article/details/118293907

版权

react 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

通过之前的学习，已经掌握了react最基础的一些概念（真的是最基础，真别说会react）。下面开始react入门学习，希望通过这段时间的学习，自己能够独立搭建一些简单的web页面。多说两句，学习没有捷径，没有所谓的快速入门，有的只是花时间学习罢了，只是大家天赋可能不一样，有点几天就能学会，有的可能需要花几个月，我属于后者，所以只能慢慢学，加油。

书山有路勤为径，学海无涯苦作舟

作为测试人员的我们更应该懂得这个道理，不像开发，他们哪怕不自学，工作中经验积累也能让他们的技能得到提升，而我们测试，都需要自己一步一步的探索，工作中只能自己不断的去发现需求，如果懒，那真的是什么也学不到了，脚本编写那是可有可无的，自动化这个真的就没必要提，真觉得编写自动化用例能提升代码能力，我真想说一句：too young too simple。希望能遇到志同道合的你，我们一起努力

脚手架（cli）

简介：用来帮助前端人员快速创建一个基于各种库的模板项目

包含所有需要的配置
包含所有相关的依赖
包含一个可以直接运行的简单demo

其实脚手架就是框架，相信大家都接触过django，这个python的web框架，给我们提供了大量已经完善的库（django强依赖）。创建react脚手架，就相当于创建一个django项目。PS：推荐大家学习flask，django过于完善，这是它的优势，同样也是它的劣势。作为测试人员，我们并非通过django混饭吃的，而是需要有一些web框架搭建的基本能力，正因为django过于完善，导致学习成本剧增，而不像flask看个几分钟，就可以根据需求吐json了。所以强烈推荐学习flask。

创建并运行的三部曲（突然想起git也是三部曲）

npm i -g create-react-app
create-react-app react_project
切换至项目目录下，npm start

但其实使用了IDE，我用的是webstorm，直接点击创建react项目就可以了，然后在webstorm控制台上输入npm start就可以启动了（yarn start也行）

react脚手架项目结构简介

项目

node_modules——react依赖包

public——静态资源文件夹

favicon.icon——网站页签图标

index.html——主页面

logo192.png——logo图

logo512.png——logo图

manifest.json——应用加壳的配置文件（手机端）

robots.txt——爬虫协议文件

src——源码文件夹

App.css——App组件的样式

App.js——App组件

App.test.js——用于给App做测试

index.css——样式

index.js——入口文件

logo.svg——logo图

reportWebVitals.js——页面性能分析文件（需要web-vitals库的支持）

setupTests.js——组件单元测试的文件（需要jest-dom库的支持）

这是react脚手架的所有文件的作用，但其实真正有用的就标红的三个，其他只需要了解一下即可

index.html解析如下

<!DOCTYPE html>
<html lang="en">
  <head>
		<meta charset="utf-8" />
		<!-- %PUBLIC_URL%代表public文件夹的路径 -->
		<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
		<!-- 开启理想视口，用于做移动端网页的适配 -->
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<!-- 用于配置浏览器页签+地址栏的颜色(仅支持安卓手机浏览器) -->
    <meta name="theme-color" content="red" />
    <meta
      name="description"
      content="Web site created using create-react-app"
		/>
		<!-- 用于指定网页添加到手机主屏幕后的图标 -->
		<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
		<!-- 应用加壳时的配置文件 -->
		<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
		<!-- 若llq不支持js则展示标签中的内容 -->
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

helloworld

import React,{Component} from 'react'
import hello from './index.css'

export default class Hello extends Component{
	render(){
		return <h2 className={hello.title}>Hello,React!</h2>
	}
}

这里涉及了几个js知识点，我也是写到这儿，现学的

import，导入的是对外暴露的接口或者类
export，对外暴露，这样外面才可以使用

smallfish118

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react入门之旅1——脚手架简介及helloworld

通过之前的学习，已经掌握了react最基础的一些概念（真的是最基础，真别说会react）。下面开始react入门学习，希望通过这段时间的学习，自己能够独立搭建一些简单的web页面。多说两句，学习没有捷径，没有所谓的快速入门，有的只是花时间学习罢了，只是大家天赋可能不一样，有点几天就能学会，有的可能需要花几个月，我属于后者，所以只能慢慢学，加油。书山有路勤为径，学海无涯苦作舟作为测试人员的我们更应该懂得这个道理，不像开发，他们哪怕不自学，工作中经验积累也能让他们的技能得到提升，而我们测试，都需要自己一
复制链接

扫一扫

专栏目录