React学习一——webstorm环境搭建和React基础语法

最新推荐文章于 2023-09-17 00:54:55 发布

hcolder

最新推荐文章于 2023-09-17 00:54:55 发布

阅读量2.5k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43896829/article/details/107620841

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

React

一、环境搭建

Node.js+WebStorm+react.js

1.Node.js
官网下载：https://nodejs.org/en/
参考安装方法：https://blog.csdn.net/antma/article/details/86104068

(1) 修改环境变量

计算机->属性->高级系统设置->环境变量->系统变量->path编辑->将安装路径加入其中
在这里插入图片描述

(2) 测试

此时在命令窗口可以执行 node -v 和 npm -v 分别查看node和npm的版本号

(3) 配置npm在安装全局模块时的路径和缓存cache的路径

因为在执行例如npm install webpack -g等命令全局安装的时候，默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中，不方便管理且占用C盘空间。所以这里配置自定义的全局模块安装目录，在node.js安装目录下新建两个文件夹 node_global和node_cache，然后在cmd命令下执行如下两个命令：

npm config set prefix "D:\Program Files\nodejs\node_global"

npm config set cache "D:\Program Files\nodejs\node_cache"

执行成功。然后在环境变量 -> 系统变量中新建一个变量名为 “NODE_PATH”，值为
“D:\Program Files\nodejs\node_modules”（根据自己的安装路径也可以）

最后编辑用户变量里的Path，将相应npm的路径改为：D:\Program Files\nodejs\node_global（根据自己的安装路径也可以）

(4) 内源配置

npm config rm proxy

npm config rm http-proxy

npm config rm https-proxy

npm config set no-proxy .huawei.com

npm config set registry https://registry.npm.taobao.org

完成配置，完成之后安装一个依赖包测试一下，正常安装即配置ok

2.Webstorm

推荐安装方法（破解方法）：https://blog.csdn.net/qingsongzhinv/article/details/80281352

3.安装并测试react

npm install -g create-react-app

create-react-app hello-world

cd hello-world

npm start

浏览器输入地址localhost:3000/ 默认端口3000.
出现以下页面则为成功
在这里插入图片描述

二、入门学习

1.简介

React.js 是一个帮助你构建页面 UI 的库。React.js帮助我们将界面分成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，就成了我们的页面。

注：React.js 不是一个框架，它只是一个库。

附：什么是DOM

DOM即文档对象模型，是指当我们编写前端代码时，会生成一个document对象，通过这个对象我们可以获得页面上的节点，在运行阶段，也会生成DOM树。

2.在webstorm上配置和运行

（1）右上角Add configuration，点击左上角“+”号，点击npm,Scripts设置为run

（2）默认主文件为App.js，可写代码调试

（3）更改程序入口

进入index.js页面，import想要导入的类和地址即可

3.元素渲染

元素是构成 React 应用的最小单位，它用于描述屏幕上输出的内容。

要将React元素渲染到根DOM节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上（每个组件都需要有render方法，用于输出组件）：

示例：

<html>

<head>

<meta charset="UTF-8" />

<title>Hello React!</title>

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>

<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>

<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

</head>

<body>

 

<div id="example"></div>

<script type="text/babel">

const element =<h1>Hello, world!</h1>;

ReactDOM.render(

    element,

    document.getElementById('example')

);

</script>

 

</body>

</html>

4.组件式管理

（1）使用函数定义组件

function HelloMessage(props) {

    return <h1>Hello World!</h1>;

}

（2）使用ES6 class定义一个组件

class Welcome extends React.Component {

  render() {

    return <h1>Hello World!</h1>;

  }

}

（3）向组件传递参数

<body>

<div id="example"></div>

<script type="text/babel">

function HelloMessage(props) {

    return <h1>Hello {props.name}!</h1>;

}

const element = <HelloMessage name="Runoob"/>;

 

ReactDOM.render(

    element,

    document.getElementById('example')

);

</script>

</body>

（4）       多组件合成组件

<body>

 

<div id="example"></div>

<script type="text/babel">

function Name(props) {

    return <h1>网站名称：{props.name}</h1>;

}

function Url(props) {

    return <h1>网站地址：{props.url}</h1>;

}

function Nickname(props) {

    return <h1>网站小名：{props.nickname}</h1>;

}

function App() {

    return (

    <div>

             <Name name="菜鸟教程" />

             <Url url="http://www.runoob.com" />

             <Nickname nickname="Runoob" />

    </div>

    );

}

 

ReactDOM.render(

     <App />,

    document.getElementById('example')

);

</script>

 

</body>

5.State和Props

（1） state：状态（可变）

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）

用来更新和修改数据

（2） props：（不可变）传递数据

6.组件生命周期

（1） Mounting：已插入真实 DOM

（2） Updating：正在被重新渲染

（3） Unmounting：已移出真实 DOM

（4）方法：

componentWillMount 在渲染前调用,在客户端也在服务端。

componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。

componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。

可以在你确认不需要更新组件时使用。

componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

componentWillUnmount在组件从 DOM 中移除之前立刻被调用。

官方文档：https://reactjs.org/docs/react-component.html#lifecycle-methods

7.Refs

可以通过ref来获取组件的引用

class MyComponent extends React.Component {

  handleClick() {

    // 使用原生的 DOM API 获取焦点

    this.refs.myInput.focus();

  }

  render() {

    //  当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs

    return (

      <div>

        <input type="text" ref="myInput" />

        <input

          type="button"

          value="点我输入框获取焦点"

          {this.handleClick.bind(this)}

        />

      </div>

    );

  }

}

ReactDOM.render(

  <MyComponent />,

  document.getElementById('example')

);

学习资料推荐

React官方教程：https://react.docschina.org/tutorial/tutorial.html

Ant官网：https://ant.design/index-cn

入门推荐：http://www.ruanyifeng.com/blog/2015/03/react.html

hcolder

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
React学习一——webstorm环境搭建和React基础语法

React一、环境搭建Node.js+WebStorm+react.js Node.js在rTool上搜索node.js,下载安装包打开安装，除了路径，一路next(1) 修改环境变量计算机->属性->高级系统设置->环境变量->系统变量->path编辑->将安装路径加入其中(2) 测试此时可以执行 node -v 和 npm -v 分别查看node和npm的版本号：(3) 配置npm在安装全局模块时的路径和缓存ca
复制链接

扫一扫

专栏目录