Web pages with ReasonReact - ReasonML Tutorial

- [Instructor] Reason is very tightly integrated with React a JavaScript framework for building web applications. The webpage you see here is a sample page that you get when you create a new Reason project with the React Hooks theme. Let's do that right now. We'll use bsb to initialize a project called webpage with the React Hooks theme. We'll change to that directory and then say npm install to get all the parts that we're going to be needing. You can then start a process that will monitor your files for any changes that you make. In a new tab we'll run a server process and it says that it is listening in localhost port 8,000 and in a web browser we'll open the URL that was specified and voila there's the webpage. Going into all the details of this webpage is well beyond the scope of this first look course. But we can look at the essentials of ReasonReact the core concept of React is the component. Each of the panels on this page is a component. Components contain a state, in this panel it's how many positive and negative clicks you've done. The visual appearance is part of the component and also the events that it reacts to, namely the button clicks. In ReasonReact you implement each component in its own module, here's the code for the counter component. We'll skip lines five and six for the moment, and get to the heart of the component. We have a record type that contains the component's state, and a variance type that gives a list of all the actions that that component can react to. The initial state is a state record, and we then create a reducer function that takes the component's current state and action and returns a new state depending upon which button was pressed, once we've established the state and actions we get to the implementation that ties them together into a React component. We do this with a function name make that tells React how to create the component. React.useReducer takes the initial state, and the reducer function that we wrote earlier and returns a state variable and a dispatch function that will direct user events to our actions. What's all this then? It looks like we've dropped into HTML all of the sudden? This is JSX, it's a syntax extension that will be translated to Reason code when it's compiled. The code that looks like HTML elements tells how to display the component and anything that's in braces is Reason code. To put text into a component we need to use the React.string function. Here's how we create a style dynamically, the CSS property names become labeled parameters here's where we respond to user events by telling the dispatch function which action to take. Once we have the component we have to put it into a webpage, this webpage has been built dynamically, in Reason by creating elements, and adding divs. This page has been built dynamically by creating styles, and divs and putting them all together. Although you could as well create a normal HTML page for your index. We render or display our component into a div that was dynamically created to hold it. You can see all of the code for this sample page and its components by creating a project using the React Hooks theme. This is admittedly a minimal introduction to ReasonReact covering it completely could be the subject of an entire course, but I hope this small sample gives you an idea of some of the power that ReasonML and React give you when you want to write web applications.