React学习一创建环境,编写第一个React组件程序

搭建环境

在开始学习React之前首先我们要进行搭建环境

下载node

进入http://nodejs.cn，下载符合自己的node安装包，下载完成直接默认安装即可

检查node版本和npm版

进入命令行
node -v：返回node版本说明安装成功
npm -v：返回版本说明按安装成功

安装官方脚手架

npm install -g create-react-app

创建第一个React项目

使用脚手架进行创建文明第一个demo

create-react-app demo01

demo01:表示文明的项目名称

校验是否创建成功

进入我们刚创建好的项目目录,命令行中输入

npm start

会自动启动并打开一个浏览器进入我们会看见我们熟悉的React标志，这说明我们已经成功使用脚手架创建目录成
出现问题应该都是网路问题可以切换一下网路

react是组件化开发，开始编写我们的第一个组件 Hello React

首先我们要创建一个我们组件文件App.js ，在文件中定义我的第一个
react组件 代码片.

// 引入React 和component并复制给Component
import React, {Component} from 'react'

// 定义一个组件App，继承Component表示一个组件
class App extends Component{
    render(){
        return (
            <l1>
                Hello React!
            </l1>
        )
            
    }
}

// 组件定义完成之后我们需要即将组件暴露出出去
export default App;

组件定义完成之后我们需要在外面的入口文件进行进行显示 代码片.

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

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

运行我们的React项目即可展示我们第一个组件。

npm start

注意我们在编写组件的时候必须要有外层包裹，若果没有会报错，我们在编写的时候如果不想使用jsx的语法包裹我们可以引入Fragment进行包裹

代码片

import React, {Component,Fragment} from 'react'

class App extends Component{
    render(){
        return(
            // 所有模块都需要包裹在一个里面，如果我们不需要包裹则使用react的Fragmet进行包裹
            <Fragment>
                 <div><input></input><button>增加服务</button></div>
                 <ul>
                     <li>足底按摩</li>
                     <li>精油推背</li>
                 </ul>
            </Fragment>
        )
    }
}

export default App

自己学习使用，有误勿怪☺！