You can stop the React app at anytime by pressing the ctrl+c keys inside the terminal window. If you grant permissions for React to control Chrome or your browser of choice then a window/tab displaying the initial React app with the React logo should be displayed for you. Type: yarn start and expect the command line to display instructions with the URL to see the app inside a web browser. Let’s make sure everything is set up as expected. Yarn add “next” version identifier helps us get the alpha version of react which at the moment of this writing was 16.7.0-alpha.2. Since Hooks is a feature only found on an alpha version of React (when this guide was written) we need to upgrade our newly created project with a newer React, to do so we enter: When it completes, type: cd todo-app to dive into the newly created application directory. If you’re on an older npm version without npx, follow the steps in the create-react-app installation guide.
Once you’re in the desired parent directory, type: npx create-react-app todo-app to create the initial React app we’ll use as our starting point. (If you’re new to the command line check out this introduction. At the command line, navigate to the directory where you want your React application to live. Now we’re ready to create our React test app. Once Homebrew is installed type: brew install node yarn to install all three tools, if necessary. If you don’t have Homebrew you can find it here. Installing these tools is easy using Homebrew on macOS. You can check which version you have of NPM, Yarn and Node by typing the following on a command line: These were the versions that I had when it all just worked with no issues, something higher or equal to these should be fine: You will need the following tools installed to follow this guide. I included a link to documentation of many of the concepts and tools discussed here to help out as well. Also a good understanding of the command line, JavaScript and React would be advisable. This guide assumes you are running your dev box on macOS however most of the tools mentioned here are usually cross platform or have specific OS versions available. Which is why I created and shared this revised step by step guide for the rest of us to try out and hopefully have no issues aka “forced coffee breaks” 😉 while following it. Building a Todo List with React Hooks useState.Hooks are certainly powerful and definitely simplify code making it more readable and compact. I ran into a few issues while following these good tutorials: This guide will be here at your return and it will be worth your time. Hello there! Hooks is perhaps one of the most exciting new features about to hit the newest version of React this winter and I wanted to have a look at what the React community is raving about and get my feet wet following a few intro tutorials.įirst things first, If you haven’t seen the React 2018 presentation video on Hooks please have a look at it.
0 kommentar(er)
