Reactjs学习-环境和引入

本篇是关于React的简介

ReactJS是Facebook推出的一款前端框架,2013年开源,提供了一种函数式编程思想,拥有比较健全的文档和完善的社区,在React16的版本中对算法进行了革新,称之为React Fiber。

我理解的原理:  类似于一个黑箱子, 对外暴露一个静态的Html,浏览器根据这个Html可以渲染页面,react可以构建盒子内部的东西,然后通过react-dom挂载到html中

  • 开发环境搭建
    需要nodeJS解析器,以及npm(node的包管理工具)
    可以根据nodejs官网的下载指导来操作,当你输入下面的命令,能输出版本号,说明安装成功。
    node -v
    npm -v

     



  • 如何引用React
  1. 1. 使用.js来引入(js文件引入容易遗忘,不推荐)

 

  1. 2. 借助脚手架工具( 方便维护,推荐)


react当前最新版本是18,16和17版本基本推荐Create-react-app框架来搭建项目,在最新的18版本中,则推荐了NextJS, Remix, Gatsby,Expo(原生应用)这几个框架来搭建项目
我们可以来看一下用不同框架搭建的项目的工程目录

  1. 1. 1 这是用Create-react-app搭建的


其中

  • node_modules 是当前项目用到的所有依赖模块包
  • public文件夹中是一些静态文件(  image / font / ico等,还有html模板文件)
  • src 文件夹中是我们的源代码文件(入口文件index.js ,js和css )
  • package.json 文件对当前脚手架安装的项目有介绍,比如项目名称,项目依赖
  • yarn.lock 文件对项目依赖的安装包做了限制( 轻易不要动)
  • gitignore是当你用Git版本控制工具时,上传代码需要忽略的一些文件

 

  1. 1. 2 这是用NextJS搭建的



posted @ 2023-07-17 14:54  芋圆小宝  阅读(120)  评论(0)    收藏  举报