Up and Running with React Hooks inside of a ReasonML
Throughout the last year, the use of React hooks has taken the world of web development. Hooks provide users with an easy way to handle interactivity within ReactJS applications, so it's no surprise that the latest release of the ReasonReact library makes great use of them.
In this lesson, we'll get started using ReasonReact 0.7.x by scaffolding out an application using the BuckleScript command-line tool. Once scaffolded, we'll go through the steps needed in order to properly run our application within a development environment that is ripe for productivity!
Resources
Instructor: [0:00] To get started, we'll need to run npm install -g bs-platform. This is going to give us access to BuckleScript's bsb command. In a moment, we're going to use bsb to scaffold out a new project for us. Once we have that, we can run bsb -init to generate a new BuckleScript project.
[0:25] Here, I'm just saying bsb -init, and my app name is going to be called reason-react app. Following the name of our project is where we're going to specify the theme that we want BuckleScript to follow when creating our template.
[0:40] Here, we're just specifying that we want the React Hooks theme, and as you could see, we've successfully generated a new BuckleScript project inside of this reason-react app directory. Now, before we can actually use this app, though, we'll need to run yarn or npm install in order to install the dependencies that BuckleScript has set it up with.
[1:13] If we navigate into our project, we see that we have various different files that BuckleScript has added to our project for us. If we look inside of our package.json file, we'll see that our scripts object contains various scripts for us to use.
[1:33] We'll use this script to transform our Reason code into JavaScript so that the browser can read it. Having said that, I am now going to execute yarn start or npm run start to kickoff BuckleScript so that it watches and compiles our project and any changes, and also going to open up another terminal and execute yarn run server, which is going to start the web pack server for us.
[2:02] If we go up here, we can grab the port which it's serving at. In this case, it's 8000. We can just plug this right into our browser and see our application coming to live.