react

Posted sunlili

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react相关的知识,希望对你有一定的参考价值。

搭建开发环境

mkdir react-demo

cd react-demo

npm init -y

npm install react react-dom -S

npm install webpack webpack-cli webpack-dev-server babel babel-cli babel-core [email protected] babel-preset-react babel-preset-env babel-preset-es2015 -D (解析jsx和es6语法)

注意:babel 6.x版本必须安装[email protected] babel 7.x 必须安装[email protected]

  • webpack.config.js     

module.exports = {
entry: ‘./main.js‘,
output: {
path: ‘/‘,
filename: ‘index.js‘,
},
module: {
rules: [{
test: /.js?$/,
exclude: /(node_modules)/,
use: {
loader: ‘babel-loader‘,
options: {
presets: [‘env‘, ‘react‘, ‘es2015‘]
}
}
}]
}
}

 

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>React App</title>
</head>

<body>
<div id="root"></div>
<script src="index.js"></script>
</body>

</html>

  • main.js

// React 是 React 库的入口
// React组件可以通过扩展 React.Component来定义
import React, { Component } from ‘react‘;
// react-dom 包提供了 DOM 特定的方法,可以在你的应用程序的顶层使用,如果你需要的话,也可以作为 React模型 之外的特殊操作DOM的接口。 但大多数组件应该不需要使用这个模块。
import ReactDom from ‘react-dom‘;

class App extends Component {
render() {
return <h1> Hello, world! </h1>
}
}

// 渲染一个 React 元素到由 container 提供的 DOM 中,并且返回组件的一个 引用
ReactDom.render(
<App />,
document.getElementById(‘root‘)
)

  • package.json

 "start": "webpack-dev-server --inline --hot --open --port 8090 --mode development"

React开发脚手架工具

npm install -g create-react-app

create-react-app my-testproject

cd my-testproject

npm start or yarn start

React版hello world

import React from ‘react‘;
import ReactDom from ‘react-dom‘;

ReactDom.render(
<h1> Hello, world! </h1>,
document.getElementById(‘root‘)
)










































以上是关于react的主要内容,如果未能解决你的问题,请参考以下文章

前端开发工具vscode如何快速生成代码片段

[React Testing] Use Generated Data in Tests with tests-data-bot to Improve Test Maintainability(代码片段

react简介

react简介

导致资产预编译在heroku部署上失败的代码片段

[react] Module not found: Can't resolve 'schedule' in 'C:Usersadcaldvmtn7myapp (代码片段