README.md

Introduction to React

Running the application

yarn install && yarn start

Open Props example subpage.

New dependencies

• React and bindings for the browser
• React preset for babel (transpilation)
• React plugin for eslint (linting)

Changes to build chain

• Allow importing from node_modules in rollup configuration
• Allow parsing JSX and enable react integration in babel configuration
• Allow parsing JSX and enable react plugin in eslint configuration

React views

React is a library for building views in a declarative and composable manner.

Parent view components can include a number of child components. Parent components can pass data to child components through props - short for properties. The views are defined in standard JavaScript files.

JSX

JSX is an extension to JavaScript language that allows defining React components in an HTML-like syntax. Note that JSX will be transpiled down to JavaScript before it is evaluated in the browser. If one so wishes, hyperscript can be used to define the views instead of JSX. Also, standard JavaScript can obviously be used instead of JSX.

When using JSX, the build chain must be configured to use JSX transforms (learn more) as is done for these examples, or alternatively React must be imported so that JSX can be transpiled to React.createElement expressions.

<MyComponent foo="bar"/>
// would transpile to
React.createElement(MyComponent, {foo: "bar"})

View functions

React views can be defined as functions. The return statement of the function must return a React node.

Components in the example

• App contains all the other components.
• CommentList contains two Comments.
• CommentForm has a button that simulates form submission when clicked.
• Comment renders a Comment, author header and text in a div.

Props and rendering

Note that all props are immutable. Whenever something needs to change, a whole new render cycle with new props objects is performed.