React入门之路

刺骨的言语ヽ痛彻心扉 2022-05-31 13:16 143阅读 0赞

# React入门之路 #

--------------------

## jsx ##

*  注释  
    
    
    >   
    > 1、在标签内部的注释需要花括号  
    > 2、在标签外的的注释不能使用花括号

ReactDOM.render(
        /*注释 */
        <h1>孙朝阳 {
       /*注释*/}</h1>,
        document.getElementById('example')
    );

*  多标签  
    
    
    > 代码中嵌套多个 HTML 标签，需要使用一个标签元素包裹它

## React 组件 ##

写一个Hello World 组件

var HelloMessage = React.createClass({
      render: function() { 
        return <h1>Hello World！</h1>;
      }
    });
    
    ReactDOM.render(
      <HelloMessage />,
      document.getElementById('example')
    );

混合组件

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>菜鸟教程 React 实例</title>
        <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
        <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
        <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
      </head>
      <body>
        <div id="example"></div>
        <script type="text/babel"> var WebSite = React.createClass({ render: function() { return ( <div> <Name name={this.props.name} /> <Link site={this.props.site} /> </div> ); } }); var Name = React.createClass({ render: function() { return ( <h1>{this.props.name}</h1> ); } }); var Link = React.createClass({ render: function() { return ( <a href={this.props.site}> {this.props.site} </a> ); } }); ReactDOM.render( <WebSite name="菜鸟教程" site=" http://www.runoob.com" />, document.getElementById('example') ); </script>
      </body>
    </html>

组件添加事件

## 第01节：构建：create-react-app 快速脚手架 ##

我们可以直接访问它的官网：https://github.com/facebookincubator/create-react-app

### creat-react-app优点 ###

*  无需配置：官方的配置堪称完美，几乎不用你再配置任何东西，就可以上手k开发项目。
 *  高集成性：集成了对React，JSX，ES6和Flow的支持。
 *  自带服务：集成了开发服务器，你可以实现开发预览一体化。
 *  热更新：保存自动更新，让你的开发更简单。
 *  全兼容性：自动处理CSS的兼容问题，无需添加-webkit前缀。
 *  自动发布：集成好了发布成品功能，编译后直接发布，并且包含了sourcemaps功能。  
    create-react-app的安装  
    安装需要在命令行中进行,在安装create-react-app前，你需要安装node。然后在命令行中输入下面的命令：

> windows系统下：

npm install -g create-react-app

> Liunx和Mac电脑下：

sudo npm install -g create-react-app

这里的 -g 是全局安装的意思。

创建React项目  
我们安装好create-react-app之后，就可以创建我们的React目录了，命令如下：

create-react-app my-app  
1  
create-react-app my-app  
这里是有个小坑的，就是你的目录名不要使用大写，这样作只要是为了严谨性，因为在Linux下是严格区分大小写的。

启动服务

直接在命令行中输入：

> npm start

### 第02节：构建：generator-react-webpack ###

react的生态圈非常庞大，第三方的构建工具也有很多种，这节课介绍一个在业内比较流行的构建工具generator-react-webpack，它是需要yeoman的支持的。

### 优点介绍： ###

*  基于webpack构建，可以很容易的配置自己需要的webpack。
 *  支持ES6，集成了Babel-Loader。
 *  支持不同风格的CSS（sass，less，stylus）。
 *  支持PostCSS转换样式。
 *  集成了esLint功能。
 *  可以轻松配置单元测试，比如Karma和Mocha安装  
    安装还是在命令行用npm进行安装，不过在全局安装generator-react-webpack之前，你可以先安装yeoman。命令如下：

npm install -g yo
    npm install -g generator-react-webpack

创建目录  
我们先用命令自行创建一个文件：new-react-demo

> mkdir new-react-demo

用生成器生成我们的项目目录

> yo react-webpack  
> 用npm start就可以查看效果了。

我们在视频中还讲解了目录结构，让你更好的掌握generator-react-webpack.

总结：generator-react-webpack更容易配置webpack，让你适应你的实际项目，并且有很强的扩展功能。一般我们团队都会使用这个脚手架来生产react的目录结构，但也有缺点，就是要依靠yeoman来生成。

## 第05节：路由：Hello React路由 ##

### Router包安装: ###

安装包还是要打开命令行工具，使用npm来进行安装。

npm install --save react-router react-router-dom

react-router：是基本的router包，里边函的内容较多，但是在网页开发中有很多用不到，现在的市面上的课程讲的基本都是这个包的教程。

react-router-dom：随着react生态环境的壮大，后出现的包，这个包比react-router包轻巧了很多。

注意：其实安装了react-router包就不用安装了react-router-dom包了，这里我们只是为了讲课方便所以安装了两个包。在实际开发中，请根据需要进行安装。安装时使用 - -save，因为这是要在生产环境中使用的。

### 复习component ###

> 以前学习过React的组件如何编写，这里简单复习一下。我们作一个A页面的组件（还是接着上节课的程序继续作），我们在/app文件夹下新建一个jspang.js页面。然后引进React包，并编写一个A页面的组件。请看下面的代码。

jspang.js

import React from 'react';
    export default class jspang extends React.Component{ 
        render(){
            return(
                <div>A默认页面</div>
            );
        }
    }
    
    import React from 'react';
    import ReactDOM from 'react-dom';
    import Jspang from './jspang';
    
    ReactDOM.render(
        <Jspang/>,
        document.getElementById("app")
    );

引入完成后，预览可以看到我们写的A页面的组件。通过上边基本的练习，我们有了一定经验，那么接下来我们仿照上面的方法制作两个新组件,Jspangb和JSPangc。代码如下：  
jspangb.js

import React from 'react';
    export default class jspangb extends React.Component{ 
        render(){
            return(
                <div>B页面</div>
            );
        }
    }

jspangc.js

import React from 'react';
    export default class jspangc extends React.Component{ 
        render(){
            return(
                <div>C页面</div>
            );
        }
    }
    ````
    
    
    
    
    <div class="se-preview-section-delimiter"></div>

import React from ‘react’;  
export default class jspangc extends React.Component\{  
render()\{  
return(

C页面

);  
\}  
\}

写完三个页面组件以后，我们把这三个页面都引入到index.js文件里边。
    
    
    
    
    
    <div class="se-preview-section-delimiter"></div>

import Jspang from ‘./jspang’;  
import Jspangb from ‘./jspangb’;  
import Jspangc from ‘./jspangc’;

引入和书写路由
    三个页面都已经作好，现在就需要路由来切换他们了，先用import引入我们的路由包，这里我们用两个模块，一个是Router（我自己叫它路由器），另一个是Route（我自己叫它路由）。
    
    
    
    
    
    <div class="se-preview-section-delimiter"></div>

import \{BrowserRouter as Router , Route\} from ‘react-router-dom’;

然后我们改写文件，增加路由设置。
    
    
    
    
    
    <div class="se-preview-section-delimiter"></div>

ReactDOM.render(

<Route exact path="/" component={Jspang} />
            <Route  path="/Jspangb" component={Jspangb} />
            <Route  path="/Jspangc" component={Jspangc} />
        </div>
    </Router>,
    document.getElementById("app")

);

ReactDOM.render(

);

注意：这里的exact是精确匹配的意思，比如我们有多层路由进行嵌套时，exact可以帮助我们精确匹配到你想跳转的路由。
    
    我们路由已经设置完毕了，但是我们现在还不能进行切换，那我们就做个切换的组件，命名为<nav/>
    
    
    
    
    
    <div class="se-preview-section-delimiter"></div>
    
    ####制作Nav组件
    在app文件夹下新建一个nav.js的文件，先引入React和react-router-dom两个包。
    
    
    
    
    
    <div class="se-preview-section-delimiter"></div>

import React from ‘React’;  
import \{NavLink\} from ‘react-router-dom’;  
import React from ‘React’;  
import \{NavLink\} from ‘react-router-dom’;

编写基本的nav组件，具体解说看视频里会进行讲解。
    
    
    const NavBar = () =>(
    <div>
        <div>
            <NavLink exact to='/'>Jspanga</NavLink> | 
            <NavLink to='/Jspangb'>Jspangb</NavLink> | 
            <NavLink to='/Jspangc'>Jspangc</NavLink>
        </div>
    </div>
    )
    
    export default NavBar;
    
    const NavBar = () =>(
    <div>
        <div>
            <NavLink exact to='/'>Jspanga</NavLink> | 
            <NavLink to='/Jspangb'>Jspangb</NavLink> | 
            <NavLink to='/Jspangc'>Jspangc</NavLink>
        </div>
    </div>
    )
    
    export default NavBar;
    组件编写完成后，引入index.js，并添加<Nav/>标签到代码里。
    
    
    
    
    
    <div class="se-preview-section-delimiter"></div>

import React from ‘react’;  
import ReactDOM from ‘react-dom’;  
import \{BrowserRouter as Router , Route\} from ‘react-router-dom’;  
import Jspang from ‘./jspang’;  
import Jspangb from ‘./jspangb’;  
import Jspangc from ‘./jspangc’;  
import Nav from ‘./nav’;

ReactDOM.render(

<Router>
        <div>
         <Nav/>
            <Route exact path="/" component={Jspang} />
            <Route  path="/Jspangb" component={Jspangb} />
            <Route  path="/Jspangc" component={Jspangc} />
        </div>
    </Router>,
    document.getElementById("app")

);

ReactDOM.render(

);  
“\`  
现在可以进行预览了，也可以顺利的切换页面内容了，说明路由已经起作用了。当然这只是路由最简单的用法，下节课我们会继续学习路由的知识。

### 原文链接jspang.com未完待续》》》 ###

jspang.com