Project WebApp — From code to UI - Introduction to React.JS

To use react we need two packages from npm, react itself and react-dom. React takes care of managing a virtual DOM representation and is highly optimized to handle state updates and changes in the virtual DOM tree following the state change. The second part "react-dom" is responsible for bringing the virtual representation of the DOM to the browser and also provides wrapped APIs for browser based stuff like event-handlers on elements.

Because every new beginning starts with a hello-world, here it is in react:

1ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById("root"));

As you can see there is some HTML-like syntax mixed right into the JavaScript-Code, this language extension is called JSX. This extended syntax enables you to write shorter and more readable code, but it must be transpiled to real JavaScript before it can be executed in a browser.

The hello-world as transpiled code looks like this:

1ReactDOM.render(
2  React.createElement("h1", null, "Hello, world!"),
3  document.getElementById("root"),
4);

So every JSX-Tag gets replaced with a call to React.createElement(tag, props, children). That's already a nice to have feature, but JSX starts to shine when you define your own UI components and can use them as new JSX-tags. Components can either be classes extending the React.Component class, or simple functions returning valid JSX elements. There is only one convention based rule, the name of the Component either class or function must start with a capital letter, because all JSX-tags starting with a lowercase letter are interpreted as native browser elements. Now a hello-world with a self defined component:

1const HelloWorld = () => <h1>Hello, world!</h1>;
2ReactDOM.render(<HelloWorld />, document.getElementById("rooot"));

-->

1var HelloWorld = function HelloWorld() {
2  return React.createElement("h1", null, "Hello, world!");
3};
4ReactDOM.render(
5  React.createElement(HelloWorld, null),
6  document.getElementById("root"),
7);

For a better understanding of the JSX syntax and its corresponding JavaScript code the babel REPL is a great tool tp play with.

The HelloWorld component didn't have any parameters but as part as you can see in the React.createElement, there is second parameter null. If you want to provide some information to a component you can define and use the properties like this:

1const HelloName = ({ name }) => <h1>Hello, {name}!</h1>;
2ReactDOM.render(<HelloName name={"Peter"} />, document.getElementById("root"));

-->

1var HelloName = function HelloName(props) {
2  return React.createElement("h1", null, "Hello, ", props.name, "!");
3};
4ReactDOM.render(
5  React.createElement(HelloName, {
6    name: "Peter",
7  }),
8  document.getElementById("root"),
9);

The same component defined as a Component-class looks like this:

1class HelloName extends React.Component {
2  render() {
3    const { name } = this.props;
4    return <h1>Hello, {name}!</h1>;
5  }
6}
7ReactDOM.render(<HelloName name={"Peter"} />, document.getElementById("root"));

But Component-classes are only necessary if you have to manage some state inside of the component, and even this can be done with components providing state-management functions.

The last important bit of information about the JSX syntax is the children property. With children you get access to the information given to you between the opening and closing tag of your component. So you could redefine the HelloName component like this:

1const HelloName = ({ children }) => <h1>Hello, {children}!</h1>;
2ReactDOM.render(<HelloName>Peter</HelloName>, document.getElementById("root"));
3// behaves the same as
4ReactDOM.render(
5  <HelloName children={"Peter"} />,
6  document.getElementById("root"),
7);

But with children you provide other JSX-elements so you could also write:

So that's it, now you know the most important things about JSX and can start to use react.

Tasks

• work through the very fine react tutorial
• when finished with the tic-tac-toe game change the css rules to use flex-box and check if the react-layout code can be simplified