React.js 学习

React.js 学习

ReactJS

部分内容版权由TutorialsPoint所有
部分译自TutorialsPoint-Learn ReactJS

React是什么:

React.js是Facebook推出的前端框架,用于处理网页/移动APP等的前端展示层。通过React.js,我们可以创建可复用的UI组件。目前React是最受欢迎的JS库之一,拥有强大的社区支持。

工具链:
  • 环境:NodeJS和NPM
  • 系统:操作系统无关
准备开发环境:
  1. 准备全局NPM包
    在终端(PowerShell/Bash)中执行:npm install -g babel
    安装完成后,执行 npm install -g babel-cli
  2. 准备工作文件夹: 创建一个新文件夹如ReactJSTutorial
    在该文件夹下执行npm init以初始化
  3. 安装依赖项
    我们将在教程中使用WebPack包管理器,因此我们先安装它 在工作文件夹下(后述命令如没有额外说明均在工作文件夹下执行)执行npm install webpack --save。安装完成后执行 npm install webpack-dev-server --save 因为我们要使用React进行开发,因此我们还要安装React
    执行: npm install react --save,然后执行npm install react-dom --save
    安装Babel插件,执行:npm install babel-core 然后npm install babel-loader 最后 npm install babel-preset-react以及npm install babel-preset-es2015
HelloWorld:
  1. 创建文件结构:
    在工作文件夹下新建以下文件index.htmlApp.jsxmain.jswebpack.config.js
  2. 设定编译器、Web服务器和Loader:
    打开webpack.config.js并添加以下代码:
    var config = {
    entry: './main.js',    
    output: {
       path:__dirname,
       filename: 'index.js',
    },    
    devServer: {
       inline: true,
       port: 8080
    },    
    module: {
       loaders: [
          {
             test: /\.jsx?$/,
             exclude: /node_modules/,
             loader: 'babel',                
             query: {
                presets: ['es2015', 'react']
             }
          }
       ]
    }
    }
    module.exports = config;
    
    打开package.json并删除其中的如下段落
    "test": "echo \"Error: no test specified\" && exit 1"
    
    然后在上一级scripts下添加:
    "start": "webpack-dev-server --hot"
    
    现在我们可以使用npm start命令启动程序了。
  3. index.html:
    这就是一个标准的HTML文件。在文件中我们设置一个ID为app的div作为应用的根节点,并添加webpack输出的index.js脚本引用。
    <!DOCTYPE html>
    <html lang = "en">
    <head>
       <meta charset = "UTF-8">
       <title>React App</title>
    </head>
    <body>
       <div id = "app"></div>
       <script src = "index.js"></script>
    </body>
    </html>
    
  4. app.jsx和main.js:
    app.jsx是react组件,该组件将渲染出Hello World!

    import React from 'react';
    class App extends React.Component {
    render() {
       return (
          <div>
             Hello World!
          </div>
       );
    }
    }
    export default App;
    

    我们需要导入该组件并且在div#app下渲染以便能在浏览器中看到它。 main.js:

     import React from 'react';
     import ReactDOM from 'react-dom';
     import App from './App.jsx';
    
     ReactDOM.render(<App />, document.getElementById('app'));
    
  5. 启动服务器: 执行npm start命令,这样webpack服务器就会在指定端口(在此例中为8080)上运行了。
    随后我们就能看到输出的效果,如下图所示
    helloWorld