专注于
IT技术和业内交流

关于React的初始使用

自2013年Facebook发布以来,React吸引了越来越多的开发者,基于它的衍生技术,如React Native、React Canvas等也层出不穷。

React最初来自Facebook内部的广告系统项目,项目实施过程中前端开发遇到了巨大挑战,代码变得越来越臃肿且混乱不堪,难以维护。于是痛定思痛,他们决定抛开很多所谓的“最佳实践”,重新思考前端界面的构建方式,于是就有了React。

React带来了很多开创性的思路来构建前端界面,虽然选择React的最重要原因之一是性能,但是相关技术背后的设计思想更值得我们去思考。

第一步:引入

react因为采用的是JSX语法来写,所以标签的type属性要设置为text/babel,我们还要引入三个库,分别是react.min.js、react-dom.min.js和browser.min.js,这里附上react的官网,如果要下载这三个文件可以去 react官网下载

第二步:建立package.json

这里把代码复制进去就可以了

{
  "name": "react-demo",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.babel.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "css-loader": "^0.26.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "html-loader": "^0.4.4",
    "html-webpack-plugin": "^2.24.1",
    "webpack": "^1.13.3"
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.16.0",
    "file-loader": "^0.9.0",
    "jsx-loader": "^0.13.2",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "path": "^0.12.7",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7"
  }
}

第三步:安装包

打开cmd,输入命令npm install ,建议使用webpack,如果没有安装webpack就继续输入npm install -g webpack(有webpack就跳过这一步)

第四步:编写

新建一个后缀名为jsx的文件,开始进行代码编写,举个栗子:

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }
    render() {
        return (
            <p>hello world</p>
        );
    }
}
ReactDOM.render(<App />, document.getElementById('root'));

第五步:启动监听

打开cmd找到指定位置输入命令webpack -w启动监听,启动监听后我们修改样式就可以实时的看到页面效果了~,发布的时候用webpack -p就行

未经允许,不得转载本站任何文章:代码山 » 关于React的初始使用

分享到:更多 ()

专注品牌化高端网站建设

商务服务联系我们