从零开始学习React——(三)：HelloWorld简单组件的编写

万物起源Hello World~

本节开头可以先将src文件夹的文件全部删除，然后通过以下步骤写一个Hello World程序。这个编写过程可以更直观的了解什么是组件化(模块化)编程。

1. 入口文件编写

一个项目，一般从入口文件开始编写，本项目中在src目录下新建一个index.js，然后打开它，开始我们的React之旅。

写入如下代码：

	// 引入React文件
	import React from 'react'
	// 引入React-dom文件包
	import ReactDOM from 'react-dom'
	// 引入组件App
	import App from './App'
	// 渲染组件到页面
	ReactDOM.render(
		<App />,
		document.getElementById('root')
	)

第一步首先我们需要引入react两个必要文件。react 和 react-dom。

• react 是react的核心代码。
• react-dom 是react剥离出来的涉及DOM 操作的部分。

第二步引入了一个App组件，此时该组件还不存在，因为还没有创建。
第三步通过react语法把App模块渲染到id为root的DOM中。root这个id是在public/index.html文件中存在的

2. App组件的编写

首先在src目录下创建一个App.js文件。之后输出Hello World就好。

	// 引入react和组件包
	import React, { Component } from 'react'
	// 以下除return以外都是固定写法
	class App extends Component {
		render() {
			return (
				<div>
					Hello World!
				</div>
			)
		}
	}
	export default App

以上有一个难点：

	import React, { Component } from 'react'

不熟悉es6的朋友可能会比较迷惑，其实就是es6的语法，解构赋值，可以看成如下写法的简写版：

	import React from 'react'
	const Component = React.Component

如果对es6不熟悉的朋友可以去 es6入门教程 看看。

编写完这两个文件之后，可以在终端使用npm start命令来启动项目。

ps: react的主要优势就是组件化编写，这也是目前前端开发的一种基本形式，建议学习时多用这种思想。不断练习，才能得心应手。

最后

以上就是朴实背包为你收集整理的从零开始学习React——(三)：HelloWorld简单组件的编写的全部内容，希望文章能够帮你解决从零开始学习React——(三)：HelloWorld简单组件的编写所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。