React foreword


May 21, 2021 20:00 React


Table of contents


React React foreword React foreword

React is a JavaScript library for building user interfaces.

  • Use it as a UI: Many people think of React as a view in MVC design mode, and when Real becomes your technology master, it can be easily applied to a small feature project.
  • Virtual DOM:React uses a "virtual DOM" to achieve ultra-high performance, with nodeJS can also be implemented on the service side rendering, there is no time-consuming browser dom rendering.
  • Data flow: React is a way to reduce the implementation of reference data streams and to implement data binding more easily than traditional methods.

NEW! Check out our latest project React Native, which uses React and JavaScript to create native APPS.

Learn how to use React in your own projects .


Example

We have several examples on the website . This is the first example:

class HelloMessage extends React.Component{
    render(){
        return <div>Hello {this.props.name}</div>;
    }
}

ReactDOM.render(
    <HelloMessage name="John" />,
    document.getElementById('container')
);

This example will say "Hello John!" Rendered in a container on the page.

You'll notice that we use HTML-like syntax, which we call JSX. R eact doesn't necessarily need to use JSX, but it makes the code more readable and writing it feels like writing HTML. A simple transformation is included in React, which allows JSX to be converted to local JavaScript for browser summary.


Installation

The quickest way to get started is to provide JavaScript from CDN (also available at cdnjs and jsdelivr). ):

<!-- 核心React库 -->
<script src="https://fb.me/react-0.13.3.js" rel="external nofollow" ></script>

<!--浏览器中的JSX变换器,在预编译JSX时删除。 -->
<script src="https://fb.me/JSXTransformer-0.13.3.js" rel="external nofollow" ></script>

We've also made a Getting Started kit If this is your first time using React, this might be useful. It includes a Web page that contains examples of using React with real-time code.

If you want to use bower, it's simple:

bower install --save react

Contribution

The main purpose of this manual is to continue to develop react cores to make them faster and easier to use. I f you are interested in helping, read on. If you don't want to help now it doesn't matter, give us any feedback about using React and we'll appreciate it.

Create a copy about React

We'll .js nodeJs before we use the fact, because you're probably familiar with references to a lot of them.

Prerequisites

  • Your node version should be above v0.10.0 plus (perhaps it can run on a lower version that we haven't tested)
  • You should be familiar with npm and use 'sudo' to ensure that the dependency package is installed globally
  • You should be familiar with git

Build

Once you have a clone of the knowledge base, it's really .js a react.

# grunt-cli is needed by grunt; you might have this installed alreadynpm install -g grunt-clinpm installgrunt build

At this point, you should have a build/directory population of everything you need to use React. Examples should all work.

Grunt

We use Grunt to automate many tasks. R un grunt -h to see most of the full list. Among the important knowledge points:

/*用PhantomJS创建并运行测试程序*/
grunt test
/*在你的浏览器上创建运行*/
grunt test --debug
/*你可以运行一个程序的时候加上'--filter'获得更快的速度。*/
grunt fasttest --filter=ReactIdentity
/*用ESLint保证高质量代码*/
grunt lint
/*销毁创建的目录*/
grunt clean

License

React is a BSD license. We also offer additional patent licensing .

React documentation is a knowledge sharing license.

The examples provided in this repository and documentation are licensed separately .

More...

There's only so much you can learn here, and you need to learn more about the community and the guidelines for submitting requests, read the Help documentation.

Troubleshooting

See troubleshooting guidelines