react-(2)开发准备

作者: bugWriter_y | 来源:发表于2019-06-18 21:47 被阅读6次

创建项目

  1. 安装nodejs

官网下载地址

  1. 安装create-react-app
npm i -g create-react-app

全局安装create-react-app工具

  1. 创建项目my-app
create-react-app my-app

使用create-react-app工具创建一个react项目,并且下载安装所需相关依赖。

wait wait wait...

  1. 运行项目
cd my-app
npm start

进入到新创建的新项目中,启动项目,自动打开系统默认浏览器localhost:3000

Snipaste_2019-06-15_17-22-39.png

编辑器设置

  1. 安装vscode(推荐)
  2. 安装vscode插件(推荐)
    • simple react sinppets——react代码模板
    • prettier——用于格式化代码
      • 设置保存文件自动格式化
Snipaste_2019-06-15_17-24-33.png Snipaste_2019-06-15_17-25-56.png

认识react项目

Snipaste_2019-06-15_17-34-41.png
public/index.html

这是一个首页文件,项目启动后打开的页面就是这一个index.html。没错react应用只有一个页面就是index.html,这就是SPA(single page application)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

src/index.js

这是react的入口

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();

它的作用是将根组件App渲染到index.html中的<div id='root'></div>处。这样react组件和页面就关联到了一起了。以后我们的主要关注点就在App组件上了

src/App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

App.js就是我们的根组件。

这里采用的是一种组件的简写方式。如果组件没有state也没有方法,只有一个render函数,可以写成这种方式,后面会提到。

jsx语法

App.js中return的代码很像html,但是我们知道js中是不能直接写html的,这个就是所谓的jsx。

但是这种说法也不对,react中返回的并不是html,而是react元素,他们组成了虚拟dom。react创建元素的方法是React.createElement("div"),但是这种方式创建元素明显太复杂,于是使用jsx来代替复杂的元素创建过程。

虽然jsx返回的不是html,但那是就语法而言,对于开发者老说,它,就是html。

安装react-develop-tools for chrome

这个工具能将react应用的组件树展示出来

  1. 去应用商店找react develop tools,并安装
Snipaste_2019-06-15_18-20-40.png
  1. 打开react项目,打开开发者工具,找到react面板
Snipaste_2019-06-15_18-23-58.png

相关文章

  • react-(2)开发准备

    创建项目 安装nodejs 官网下载地址 安装create-react-app 全局安装create-react-...

  • React-组件化开发

    1、组件化定义 整个逻辑其实可以看做一个整体,那么我们就可以将其封装成一个组件:我们说过ReactDOM.rend...

  • react-(1)开发环境搭建

    ①安装react脚手架(安装一次即可) ②创建项目 ③运行项目npm start

  • Angular 2 vs React-开发者忘了什么

    React的目的 react的主要目的是为开发人员提供一个优秀的视图的应用程序,并提供可重用的声明式插件框架的有效...

  • react-native相互通信

    react-native的双向通信 demo项目下载 react->native RNNativeBridgeMo...

  • RN零散知识点汇总

    永久修改默认端口 在Xcode中修改Targets->React->Build Phases->start Pac...

  • Day1 django2.0的教程

    一、准备开发环境 二、 一、准备开发环境 1. 安装python3..6 2. 安装pipenv(虚拟环境) 3....

  • react高阶组件

    title: react-高阶组件date: 2018-07-11 09:42:35tags: web 组件间抽象...

  • 2、GeoTrellis-开发环境准备

    1.Java版本要求 GeoTrellis使用的Java版本,根据官方文档写的必须要大于Java1.7以上的版本,...

  • 2-开发工具准备

    二、开发环境搭建 1. 软件版本,最好保持一致: 后台开发工具 IDEA 2018前台开发工具 Visual St...

网友评论

    本文标题:react-(2)开发准备

    本文链接:https://www.haomeiwen.com/subject/dwaqqctx.html