React -- 脚手架书写react

一、脚手架工具

react也有很多脚手架工具,通过脚手架工具可以快速搭建一个项目应用。
官方推荐脚手架
如果你是在学习 React 或创建一个新的单页应用
Create React App
如果你是在用 Node.js 构建服务端渲染的网站
Next.js
如果你是在构建面向内容的静态网站
Gatsby

二、create-react-app

安装

npx create-react-app react-project

注意是npx,不是npm
安装创建好项目之后,切换到项目就可以运行项目了
运行

cd react-project
npm start

接下来就可以在3000的本地端口打开项目了

三、项目结构

public
这个里面放的是index.html根页面和其他一些静态资源文件
src
这个文件夹下面存放的就是所有的react代码
css初始化代码
现在在src里面的index.js里面创建一个App组件,在里面写入展示内容
注意:下面看起来有点不一样,正常应该是React.Component,但是这里直接写成了Component,原因是将Component作为一个组件引进来了,而不再是React的一个属性

import {Component} from 'react'
class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hello, React!</h1>
      </div>
    )
  }
}

然后就可以将这个组件渲染到root元素里面

ReactDOM.render(<App />, document.getElementById('root'))

四、开发工具

React DevTools开发工具类似于Vue DevTools工具,帮助浏览器调试react代码
React DevTools

五、注意事项

JSX是一种类似javascript的语法,不是HTML语法,所以书写需要注意一下:
1、样式类属性是className,不是HTML的class
2、事件方法是驼峰命名(onClick),而不是HTML中的onclick
3、必须要闭合标签

六、提取组件

一般react项目中index.js作为主组件,其余所有组件都是引入到这个主组件,所以需要将App组件从index.js里面分离出去
App.js

import React, { Component } from 'react'

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hello, React!</h1>
      </div>
    )
  }
}

export default App

index.js

import App from './App'
ReactDOM.render(<App />, document.getElementById('root'))

原文地址:https://www.cnblogs.com/zjh-study/p/10919565.html

时间: 2024-10-09 08:30:46

React -- 脚手架书写react的相关文章

react脚手架搭建1

23:01:17 react脚手架搭建 (个人用的是webstorm,所以分享下webstorm中的创建react脚手架项目的方法) 1.创建新项目(前提是下载nodejs环境) 2.下载好在webstorm中右键自己创建的项目目录,菜单中会出现一个命令行工具,点进去   然后    npm start 开启服务 3.在浏览器中打开 http://localhost:3000/ 可以看见react的默认页面 初步的搭建完成,开始自己写东西 原文地址:https://www.cnblogs.com

React 脚手架应用以及注意事项

在使用React脚手架之前需要通过  create-react-app 快速构建 React 开发环境 , 注意 : create-react-app 自动创建的项目是基于 Webpack + ES6 . 执行以下命令创建项目: $ npm install -g create-react-app $ create-react-app myapps $ cd myapps/ $ npm start 在安装成功后开始使用脚手架 图为安装成功后的目录 在使用React之前需要注意以下三点: 一 .  

react脚手架搭建

react脚手架搭建 [转]https://blog.csdn.net/weixin_41421227/article/details/80875544 由于我们在安装的过程中要使用到npm  因此需要先前安装好node.js 直接到官方下载即可  一般建议大家下载稳定版的(左边那个!) 知道你们懒,咯官网戳→_→  node.js官网:https://nodejs.org/en/ 判断安装成功与否的标志↓ 打开cmd命令行,输入 node -v 和 npm -v 来查看版本号,如果显示则安装完

【webpack系列】从零搭建 webpack4+react 脚手架(四)

经过三个章节的学习,你已经学会搭建了一个基于webpack4的react脚手架.如果要更改配置,比如,你希望把编译后的js文件和css文件等单独放dist下的static目录下,你想想,是不是有点麻烦.你要去浏览webpack的配置文件,找到哪些配置项,然后去更改它,我们希望有个参数配置文件,只要更改参数配置,而无需更改webpack的配置文件. 1 添加参数配置文件 (1)在根目录创建config文件夹,在config文件夹内新建一个index.js文件,文件内容如下: 'use strict

React脚手架中使用less

最近在用react.js 结合蚂蚁金服的 Ant Design Mobile 做一个单页面的应用程序,遇到了一个很棘手的问题——那就是 react脚手架不支持less,看了不少优秀博主如何在react脚手架中使用less,,觉得繁琐且又不能解决实际问题,于是自己弄明白后感觉如此简单,做了这么个教程,避免新手走弯路. 首先声明一下我用的是微软的代码编辑软件VS code,下面的是详细的图文教程. 前期准备: 通过命令 create-react-app react-demo 创建了自己的React应

React 脚手架

React 脚手架,来让我们快速的搭建起来一个 React 的项目 1. 全局安装 React 的脚手架 npm i -g create-react-app 2. 创建项目 create-react-app 项目名 3. 进行项目指令: cd 项目名 4. 运行项目: npm start 这样我们 React 脚手架的项目搭建就完成了 接下来,让我们看看 React 脚手架,给我们下载的目录 现在我们就来看看每个文件的功能: 首先来看 README.md 文件,这里是对我们 React 脚手架的

react 脚手架 及路由和 redux

前提是我们需要下载 nodejs 使用 npm 下载 react 的脚手架,react-router-dom,redux 全局下载 react 的脚手架:npm i create-react-app -g 使用 react 脚手架创建一个 app 的项目:create-react-app app 根据指令进入 app 项目: cd app 下载 react 的路由插件:npm i react-router-dom -S 组件通信的优化: npm i redux -S 以上便是把我们的 react

react脚手架的建立——小白入门

一.介绍:React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站. 做出来以后,发现这套东西很好用,就在2013年5月开源了. 二.React脚手架:create-react-app React 的环境搭建,是比较繁琐的,有很多的依赖:react.react-dom.babel.webpack ... 需要很多的前置知识,很容易让人从入门到放弃. 于是就诞生了 脚手架 这种东西,

React: React脚手架

一.简言 React开发目前已经非常流行,对于如何实现对React项目的管理和维护,React生态圈出现了大量可用的开发工具,例如Browserify.Gulp.Grunt.webpack等.其中,webpack称为CommonJS模块的主流工具之一,它是一个模块绑定器,拥有模块化和网络性能的两大优点,可以将不同类型的文件转换为单个文件,也可以将所有的依赖项打包成单个文件.当然,使用webpack管理React,开发者需要通过命令行去安装webpack和Babel,然后对webpack进行配置.