Only after that, you can start debugging it. To start your React Native app for the first time, you need to do two things: run React Native bundler/packager and then build and launch an app on a simulator or a device using the react-native run-ios or run-android command. In the Run menu, select Edit configurations…, click the + button and select React Native from the list. We’ll need to create a new React Native run/debug configuration. It now gives you much more flexibility in running the bundler and building the app itself. In the steps below we use WebStorm version 2018.2. UPD: In WebStorm 2018.1, we have reworked the React Native configuration. Now that we have our app’s code in the IDE, let’s run it. To do that, right-click on a folder in the Project view and select Mark as Excluded. We recommend that you exclude android and ios folders from the project. Of course you can also open an existing project or check one out from version control. WebStorm will run a project generator and install all the required dependencies. Now you can create a new React Native project right from the IDE Welcome screen: click Create new project, select React Native from the list on the left, enter a project name and click OK. Check out React Native’s Getting Started guide for detailed installation instructions. The list of tools you need to install to get started with React Native depends on your OS and the mobile platform you’re going to target your app at. To install it, run the following command in the Terminal: npm install -g react-native-cli. Make sure you have a React Native CLI installed on your machine. Let’s see how we can set up a workflow for development with React Native in WebStorm. We believe WebStorm can be a great and powerful tool for development with React Native! With WebStorm you can now develop mobile apps with React Native getting all the benefits of WebStorm goodies like code completion for React, Flow support, and a built-in debugger. It’s created by Facebook and used for such well-known apps as Instagram, Airbnb, and now JetBrains’ own YouTrack mobile app (which is open-source, by the way). I’d love to hear from you about this format, these techniques, and whether you’d like more videos that are 80% about a technology with 20% about how our IDEs can help you to speed up your work with it.React Native allows you to develop native mobile apps for iOS and Android using JavaScript and React. Watch this series and let me know what you think with a comment on YouTube, or a nudge on Twitter. Write tests as you develop to get the best tooling experience, and render with Node.js/jsdom instead of the browser. Constantly switching over to the browser to see if your logic works is tedious and disruptive. Need to generate imports? Let the IDE do it for you. When you’re coding, you want to stay in the flow. Use the IDE, and the benefits of TypeScript, to identify mistakes quickly. This 10-part tutorial tries to emphasize a few common ideas: I wanted to both provide some instruction about React and illustrate the fun I was having with the IDE. As I worked on this series, I kept finding places where the IDE helped speed things up. It originated years ago in a simple way: each time I worked with React and TypeScript together, I struggled to find good, accurate tutorials. I really enjoyed writing and recording this tutorial. Along the way, I’ll demonstrate test-driven development and provide you with loads of tips and tricks you can use in your IDE. We’ll take a look at the key steps to becoming comfortable with using the IDE for React projects with TypeScript. In these videos, I show a little about a lot. This series will cover the relationship between React, TypeScript, and TDD, as well as the features JetBrains IDEs offer for working with them. Finding learning materials for them with test-driven development (TDD)? Harder still. But this combination changes quickly, which makes it difficult to find accurate up-to-date learning materials. Over the past few years, the two have been increasingly used together. TypeScript is increasingly popular, and thus increasingly supported. React is wildly popular and thus widely supported.
0 Comments
Leave a Reply. |