react window onresize 问题_React 环境搭建 ---- 1.1 HelloWorld

React 环境搭建 ---- 1.1 HelloWorld

React 简介

官网地址 React

React 官网

React是用于构建用户界面的JavaScript库,相当于MVC 框架中的V,即View

适合人群

• 有一定的 HTML, CSS, Javascript 基础的人
• 热爱前端的,爱折腾新技术的小伙伴

准备工作

• 一台能上网的电脑（Window,Mac都行）

工具

• node下载地址 Node.js

环境搭建

1. 安装好node 之后, window 下按住shift键，点击右键，在此处打开命令窗口
2. 输入命令node -v 和 npm -v 回车
3. 我的显示的是 v8.11.2 版本和5.6.0 版本
4. 考虑到环境搭建对初学者不好搞的问题，我使用简单的脚手架工具,免除一系列复杂的安装配置过程
5. 在控制台输入npm install -g create-react-app安装react 脚手架
6. 新建自己第一个 React APP create-react-app helloworld
7. 等安装后执行cd helloworld 接着执行 yarn start
8. 你可以看到运行在http://localhost:3000/ 的页面

目录分析

项目目录

代码书写

1. 打开 src 下的 App.js 文件
2. 把 <div className="App">中间的代码删除
3. 写入<h1>Hello world</h1>

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hello world</h1>
      </div>
    );
  }
}
export default App;

5. 项目会自动运行刷新，这就是脚手架的方便之处
6. 你会看到http://localhost:3000/ 大大的HelloWorld 字样

代码地址

• helloworld

总结

开始新建一个React 项目,并显示HelloWord字样