Hello!大家好,今天带来的是React前端JS库的学习,课程来自黑马的往期课程,具体连接地址我也没有找到,大家可以广搜巡查一下,但是总体来说,这套课程教学质量非常高,每个知识点都有一个小案例,最后有一个总的美团外卖案例教学,大家可以看看我这篇文章,如果能够帮到你们,还请多多点赞o( ̄▽ ̄)d支持支持🌹,如果文章中有错误的或者是遗漏信息,可以在评论区指出或者是与我私信。我看到了消息,一定会及时更正过来∠(°ゝ°)。话不多说,直接开学💪⛽️!
本篇教学已完结,具体可查看教程:
1. 一天搞定React(1)——React安装与配置
2. 一天搞定React(2)——JSX语法
3. 一天搞定React(3)——Hoots组件
4. 一天搞定React(4)——Redux
5. 一天搞定Recat(5)——ReactRouter(上)
6. 一天搞定React(5)——ReactRouter(下)
React是一个用来渲染用户界面(UI)的JavaScript库。
注意这里是一个库,而不是框架。这意味着它主要关注于视图层的构建,提供了一个高效的方式来构建组件化的 UI。所以React会比vue框架要更加的灵活
特色:React完全基于JavaScript,只要有JS基础,就可以上手React开发。
环境搭建
React官网地址:https://zh-hans.reactjs.org/
要搭建环境,需要我们的node版本>= 10.16
和 npm版本 >= 5.6
之后打开我们的项目输入以下👇命令创建项目环境:
npx create-react-app 项目名称
项目中看到success!
就是安装成功了。
完成之后我们要进入项目,然后启动项目。
启动项目命令:
//这里有两个命令,任选一个就可以了
yarn start
npm start
项目启动成功🥳
目录介绍
node_modules
:项目的依赖文件public
:保存入口文件index.html
src
:保存源码文件.gitignore
:git配置文件package.json
:项目配置文件yarn.lock
:项目信息文件
清理项目
为了更好的学习,我们可以删去一些不必要的文件。
在src
文件夹下,把所有的文件都删除掉只保留一个index.js入口文件即可,并且将入口文件代码更改如下:
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>hello React!</div>,
document.getElementById('root')
);
安装插件
安装Vscode插件,ES7 React/Redux/GraphQL/React-Native snippets