React零基础入门01--React入门和环境搭建

最新推荐文章于 2023-07-17 16:18:21 发布

清风夜半～

最新推荐文章于 2023-07-17 16:18:21 发布

阅读量588

点赞数 1

分类专栏： web前端文章标签： react webstorm 前端

本文链接：https://blog.csdn.net/im_dogg/article/details/95994113

版权

web前端专栏收录该内容

16 篇文章 3 订阅

订阅专栏

前沿，我也是一个前端菜鸟，也是自学React，期间大大小小碰到了很多坑，现在将自己碰到的坑积累成经验分享给大家，大神勿喷，希望大家可以指点一下

React简介

React起源于Facebook的内部项目，该公司在开发自己的Instagram网站，想去市面上找一个jsMVC框架进行开发，找找去，都达不到预期的效果。于是他们就自己开发了React框架，后来发现挺好用，经过完善之后就开源了，围绕Reatc的技术栈还有 Reduc, React-Redux ,React-Router，Axios 等
ReactJS官方地址：https://facebook.github.io/react/
GitHub地址：https://github.com/facebook/react
在这里插入图片描述

React特点

性能高: 通过diff算法和虚拟DOM实现视图的高效渲染和更新。
组件化： React可以从功能角度横向划分，将UI分解成不同组件，各组件都独立封装，整个UI是由一个个小组件构成的一个大组件，每个组件只关系自身的逻辑，彼此独立。
单项数据流：React设计者认为数据双向绑定虽然便捷，但在复杂场景下副作用也是很明显，所以React更倾向于单向的数据流动-从父节点传递到子节点。（使用ReactLink也可以实现双向绑定，但不建议使用）
JSX语法：使用JSX语法创建组件，实现组件化开发和UI的函数式编程

搭建开发环境

其实在工程化的项目开发中，是需要搭建React的脚手架开发环境的，但是在学习过程中，为了方便演示，就用最基本的开发环境进行，后期会更新搭建脚手架开发环境

1. 开发工具

个人喜欢用WebStorm和VScode,这里用WebStrom演示(你们肯定很奇怪为什么我的WebStrom是汉化的，后面我会给出汉化教程)

设置ES6开发环境
打开WebStrom,新建一个文件夹React(名字随意，用于学习的文件夹)
依次点击文件->设置->语言&框架->javascript,将javascript language version 改为SCMAscript6，点击右下角的“应用”和“确定”
引入相关文件
这里需要引入三个文件，这里推荐大家使用bootCDN一个在线的免费CDN

react.js  //react核心文件
react-dom.js  //react-dom核心文件
babel.js //用来将react中的高级语法编译成低级语法，因为部分浏览器不支持新的ES6语法和JSX语法

搜索bootCDN
在这里插入图片描述
搜索react,会看到下方react和react-dom

进入react的版本列表。选择https://cdn.bootcss.com/react/16.8.0/umd/react.production.min.js,点击复制连接

以同样的操作进入react-dom版本列表。选择https://cdn.bootcss.com/react-dom/16.8.0/umd/react-dom.production.min.js,点击复制连接

将复制的连接暂时保存起来
在这里插入图片描述

搜索babel官网
在这里插入图片描述
进入官网点击设置->in the brower，复制如图所示的链接，和刚刚的react和react-dom链接保存在一起

4.配置开发的基本html模板
回到WebStrom,在刚刚的React文件夹新建一个01-HelloWorld.html文件,将刚刚保存的链接粘贴到里面,新建一个id为app(名字随意)的div，新加一个script标签，将type属性改为text/babel,格式如下

将type属性改为text/babel是为了使用babel.js将ES6和JSX的高阶语法转为浏览器可以识别的低阶语法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>hello</title>
</head>

<body>

    <div id="app">

    </div>

    <script src="https://cdn.bootcss.com/react/16.8.0/umd/react.production.min.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        		//react代码写在这个标签里
    </script>
</body>

</html>

上面的html文件配置是非工程化开发的基本模板，大家可以保存为快捷代码片段，使用快捷键按回车就能生成一个基本的模板

到此React的基本开发环境就配置完了，后面就是开始撸代码了

请继续看下一篇：JSX语法简介React零基础入门02–JSX语法简介

另外给出WebStorm的汉化教程
WebStorm汉化教程：https://github.com/Hbuilderx/TranslatorX

清风夜半～

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
React零基础入门01--React入门和环境搭建

前沿，我也是一个前端菜鸟，也是自学React，期间大大小小碰到了很多坑，现在将自己碰到的坑积累成经验分享给大家，大神勿喷，希望大家可以指点一下React简介React起源于Facebook的内部项目，该公司在开发自己的Instagram网站，想去市面上找一个jsMVC框架进行开发，找找去，都达不到预期的效果。于是他们就自己开发了React框架，后来发现挺好用，经过完善之后就开源了，围绕Re...
复制链接

扫一扫