⚠️ This lesson is retired and might contain outdated information.

Up and Running with React Hooks inside of a ReasonML

Thomas Greco
InstructorThomas Greco
Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 2 years ago

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.

egghead
egghead
~ 16 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today