Questions tagged [reactjs]

React is a javascript library for building user interfaces.

Declarative

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

Declarative views make your code more predictable and easier to debug.

Component-Based

Build encapsulated components that manage their own state, then compose them to make complex UIs.

Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.

Learn Once, Write Anywhere

We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.

React can also render on the server using Node and power mobile apps using react-native.

Just the UI

Lots of people use React as the V in MVC. React makes no assumptions about the rest of your technology stack, and it's easy to try it out on a small feature in an existing project.

Virtual DOM

React uses a virtual DOM diff implementation for ultra-high performance. It can also render on the server using node.js — a heavy browser DOM isn't required. Further, there is a React-Native offshoot for using React on mobile devices such as ios and android.

Data flow

React implements one-way reactive data flow using props which reduce boilerplate and is easier to understand than traditional two-way data binding.

Example using JSX

class HelloWorldWidget extends React.Component {
    render() {
        return (
            <div>
                Hello World!
            </div>
        );
    }
};

ReactDOM.render(
    <HelloWorldWidget />,
    document.body
);

Example using functional component

const HelloWorldWidget = () => {
    return (
        <div>
            Hello World!
        </div>
    );
};

ReactDOM.render(
    <HelloWorldWidget />,
    document.body
);

Getting started

 npx create-react-app my_app

Advantages

• React creates a virtual DOM so that all the components can be re-rendered individually without the need for the whole page to be repainted by the browser

• A user can update a particular content of the page just by re-rendering only that component

• React's view logic means it can easily render on the server, in the browser or native components

• React can be used in conjunction with frameworks like angular.js and backbone.js

• Separating the declarative view (jsx) and logic make projects easier to read and maintain

Resources:

• Official website
• Getting started
• Awesome React
• JSX Specification
• React conference 2015 videos
• React conference 2016 videos
• React conference 2017 videos
• React conference 2018 videos
• React conference 2019 videos
• CodeSandbox Playground
• DEV’s React community
• Reactiflux on Discord
• Hashnode’s React community
• Reddit’s React community
• Spectrum’s React community
• ReactJS Program
• TypeScript-React-Starter

Books:

• React.js Essentials
• Mastering React
• ReactJS by Example - Building Modern Web Applications with React
• The Road to learn React
• Fullstack React: The Complete Guide to ReactJS and Friends

Related tags:

• react-router
• react-router-dom
• reactjs-flux
• react-native
• redux
• react-redux
• redux-thunk
• redux-form
• react-router-redux
• reactjs-testutils
• react-dom
• isomorphic-javascript
• react-bootstrap
• redux-saga
• react-dnd
• react-vr
• reason-react
• create-react-app
• react-jsx
• formik
• react-hooks
• react-context
• react-fiber
• material-ui

Official Logo:

Versions:

_{Note: The table below provides a summary of changes for each version only. A comprehensive list of changes for each version can be found here.}