004-React入门概述
一、概述
參考地址：https://reactjs.org/docs/try-react.html
1.1、本地快速體驗(yàn)
<!DOCTYPE html> <html><head><meta charset="UTF-8" /><title>Hello World</title><script src="https://unpkg.com/react@16/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script></head><body><div id="root"></div><script type="text/babel">ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));</script><!--Note: this page is a great way to try React but it's not suitable for production.It slowly compiles JSX with Babel in the browser and uses a large development build of React.To set up a production-ready React build environment, follow these instructions:* https://reactjs.org/docs/add-react-to-a-new-app.html* https://reactjs.org/docs/add-react-to-an-existing-app.htmlYou can also use React without JSX, in which case you can remove Babel:* https://reactjs.org/docs/react-without-jsx.html* https://reactjs.org/docs/cdn-links.html--></body> </html>1.2、完整的開發(fā)環(huán)境
包括linting，測(cè)試和內(nèi)置優(yōu)化;
1.2.1、新建
使用全功能入門工具包創(chuàng)建新應(yīng)用程序。
idea工具方式參看：http://www.cnblogs.com/bjlhx/p/8968382.html
npm命令【node6+】
npm install -g create-react-app create-react-app my-appcd my-app npm start1.2.2、添加一個(gè)已存在
將React添加到構(gòu)建系統(tǒng)或更大的應(yīng)用程序。
idea工具方式參看：http://www.cnblogs.com/bjlhx/p/8968382.html
npm方式：
npm init npm install --save react react-dom目錄結(jié)構(gòu)
node_modules： 這里面包含了react項(xiàng)目中會(huì)用到的一些組件，install的時(shí)候下載下來(lái)的，你可以進(jìn)去看看，有一些如base64之類的我們可能會(huì)用到的組件；
public：里面包含了我們項(xiàng)目中的啟動(dòng)頁(yè)面；
src：里面包含了一些我們自己使用的js文件，css文件，img文件等等
1.3、hello
默認(rèn)啟動(dòng)是一個(gè)圖
編寫Hello word，在 index.js中作如下修改
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; //import App from './App'; import registerServiceWorker from './registerServiceWorker';// ReactDOM.render(<App />, document.getElementById('root')); ReactDOM.render(<h1>Hello, world!</h1>,document.getElementById('root') ); registerServiceWorker();此時(shí)運(yùn)行項(xiàng)目預(yù)覽
1.4、提前熟悉es6語(yǔ)法
熟悉箭頭函數(shù)，類，模板文字，let和const語(yǔ)句。等
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
總結(jié)
以上是生活随笔為你收集整理的004-React入门概述的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 关于POSTSQL 的语言编码问题！
- 下一篇： [react] 在使用react过程中什