The create-react-app project aims to provide a canonical manner for initiating a new React app for those that want the benefits of a more complex setup but don't want to deal with the configuration. In this post, we'll explore using create-react-app alongside a Node+Express API server. We’ve seen how to install and configure react-native to develop the app on Mac. Also, We’ve created the app by React Native CLI and executed it to check the environment is configured well. Now, we are ready to develop the app with react-native. Let’s dive to the react-native development world! In this video, 'How to install create-react-app', you will learn how to create a ReactJS app from scratch on MacOS. You will also be guided on how to setup your environment, what the prerequisites. React Native uses wat c hman to detect when you’ve made changes to the code and then automatically build and push the update to your device/simulator without you needing to build it again manually. Brew install node brew install watchman Installing Xcode. Open the App Store, look for Xcode, and click install. Depending on your internet speed.
In this article, you will find a concise step by step guide on how to install React on MacOS. It follows the philosophy of having one IDE to manage most of your web development tasks. That's how you can focus on your task at hand as a developer. However, if you like to compose your development environment with lightweight tools rather than with an full-blown IDE, checkout my personal recommendations for such a setup. Nevertheless, if you just want to find a way for getting started with React on Mac OS quickly, follow the guide below.
Node.js and NPM on MacOS
Since you are going to use JavaScript for your React development on MacOS, there is no way around Node.js and NPM. Node.js is a JavaScript runtime which makes it possible to run JavaScript outside of the browser. The underlying node package manager (NPM) is used to install frameworks and libraries, such as React.js, to your project on the command line. They are called node packages. You will see later on how this works out on the command line for MacOS users installing libraries for React.
In order to install and manage Node.js on your MacOS machine, you can install it from their official website. However, I encourage you to checkout nvm. It's a node version manager that allows you to manage multiple node versions, to upgrade and downgrade node versions and to be flexible in choosing a node version for your project at hand. You can find the installation instructions in the GitHub repository. Installing node will install npm (node package manager) as well. The node package manager is used to install libraries/frameworks (node packages), such as React, on the command line to your project.
Visual Studio Code for React on MacOS
There are plenty of editors and IDEs out there to develop web applications. Depending on your personal, project or company requirements, you can choose from a range of lightweight editors to full-blown IDEs. Visual Studio Code is a solution in between. Many developers, operating on MacOS but also Windows, enjoy using it. That's why my recommendation would be Visual Studio Code to start developing React applications on MacOS. The installation on a MacOS machine is simple: Navigate to the official Visual Studio Code website and download the recent version of VS Code. Afterward, install it and check if everything is working when you open it. That's it for the installation of an editor/IDE on your machine.
If you want to use another editor/IDE, it is up to you. But keep in mind that a couple of the following steps are building up on top of Visual Studio Code. However, it should be possible to substitute these steps for your own editor/IDE.
Node and NPM for React
If you are just getting started with web development, you should create a dedicated folder on your machine to manage all your web development projects. It's up to you to divide the folder into subfolders. For instance, there could be a folder for React applications and another one for plain Node.js applications. Once you have your folder for your projects, open this folder in Visual Studio Code. Plex media app mac.
In Visual Studio Code you should be able to open a tab which is called 'Terminal' at the bottom. That's your integrated command line in Visual Studio Code to install node packages with NPM or to start/test your project. It's up to you to use the integrated terminal or another command line interface (e.g. the built-in command line or something like iterm2) for your MacOS machine.
Sonos connect not working. Now, you should check whether the Node.js installation for MacOS was successful. On the command line, type the following commands. They should output the versions for Node.js and NPM.
create-react-app for React on MacOS
Now you can install your first node package with npm on the command line. You will install it globally with a -g flag. Because of installing it globally, you will always have access to it on the command line. Later on, when you install a node package for your project without the -g flag, you will only have access to the node package (node module) in your project. Now, on the command line (in Visual Studio Code), type the following command to install create-react-app:
create-react-app allows you to bootstrap React applications with zero-configuration. There is no need to get involved too early in toolings with Webpack and Babel. If you are going to read 'The Road to React', you will use create-react-app as well. It's the simplest approach to learn React without worrying about all the tooling around it. You can bootstrap your first React.js application with npx (which comes via npm) on MacOS with create-react-app by passing the name of your application to it on the command line:
Afterward, you can navigate into the project on the command line and start it with npm:
The command line should give you an output where you can find the application in the browser. The default should be localhost:8080. If you are only using Safari on your MacOS machine, I can recommend you to install Chrome as well to access the developer environment and the React Developer Tools which are available as Chrome extension.
![Create Create](/uploads/1/3/3/9/133948166/567053893.png)
If you just want to learn React now, you could start to read The Road to learn React. It's a pragmatic book which guides you step by step through building a React application from scratch. Along the way, you will transition from JavaScript ES5 to JavaScript ES6 and you will lots of exercises to improve your React skills.
Git for Visual Studio Code and MacOS
At some point, you might want to share your projects on GitHub or collaborate with other people via the git version control. If you want to use GitHub as your platform of choice, you should create an account via their official website. GitHub is a social platform where you can follow other people (you could have your first social interaction with me), like (star) their projects or collaborate on open source projects with other people.
In order to have git available on the command line and in Visual Studio Code, you need to install it. You can find all the instructions on the official git website. However, I recommend it via Homebrew. If you want to follow this recommendation, checkout the Homebrew and Git/Github sections over here. After installing it, you should have it available on the command line.
If it doesn't show up in Visual Studio Code, you may have to restart the application. Afterward, you should see that Visual Studio Code already comes with a git integration as well. It's convenient to use git from this integration, but you can also use it from the command line now. That's it for the git installation and the account creation on GitHub. Furthermore, you can check out this essential guide on how to use git and GitHub.
That's everything you need for a React development setup in MacOS. I hope you have everything to get started in React on your machine. Let me know what other tools you are using on MacOS in the comments below. Otherwise, if you are curios about the tools that I am using on my machine, head over to my personal development setup guide.
This tutorial is part 1 of 2 in this series.
- Part 2:How to use Prettier in VS Code
Continue Reading: How to set up React with Webpack and Babel
BLOG How to provide support for React Native apps on the macOS platform
React Native is a framework developed by Facebook that is used to build the application on native platforms. It is preferred by most developers, due to its speed, agility, and ability to build hybrid applications in multiple platforms with an interactive user interface (UI).
By default, React Native has built-in components and supportive packages, accessible through both the mobile native iOS and Android platforms. To access the applications in the macOS platform, Microsoft developed a macOS extension to React Native.
For more information about the macOS implementation, click here. As exhaustive as this resource may be, many React native developers have a tough time understanding it. So, here is a step-by-step guide on how to set up a React Native application on the macOS platform.
Prerequisites
- Create a React Native app.
- Install CocoaPods, a packet management tool to manage the dependencies for iOS development.
- Make sure npm/yarn is installed in your machine. It is the package manager for JavaScript and used for fast and reliable dependency management.
- Make sure the Mac devices are preinstalled with versions Mojave (10.14.6) or newer.
Extending support for React Native apps on macOS
1. Good app for mac to edit photos. Create a react-native app with version 0.61.5 or newer.
2. To support react-native-windows also, migrate the react-native-windows for the version (0.61.5) or newer.
3. Open the terminal and navigate to the React Native project path and execute the following command to install React Native for macOS:
npx react-native-macos-init
4. The above command will create a macOS folder in the project:
5. Navigate to the newly created macos folder and execute the following command to install the pods:
pod install
After the above command is executed successfully, the following message is displayed:
6. Go to the root of the reactnative folder in the terminal and execute the following command to run the React Native app on the macOS platform:
npx react-native run-macos
Using Xcode, open macosreact_native_macos_support.xcworkspace and click the Run button:
7. The build could fail due to certain modules not being supported by the macOS platform. In such cases, you have to remove the unsupported community modules and extensions from the package.
For example, the community modules and extensions, such as react-native-video, modal component from the React Native package, and so on.
If you experience such issues, refer to steps 8 and 9.
8. Remove the node modules folder completely and also delete the derived data using Xcode. Then, open the terminal and navigate to the React Native project path and execute either of the following commands to install all the dependencies:
npm install
or
yarn install
9. Navigate to the newly created ios folder and remove the pod completely and reinstall the pods by using the following commands:
pod cache clean -all
pod deintegrate || rm -rf Pods
pod install
10. Also, make sure that the moduleName mentioned in AppDelegate is the same as the app name.
After the installation is successful, the macOS will load as follows:
Unsupported community modules and extensions
Install Create React App Globally Mac
Some of the unsupported React Native community modules and extensions are:
- React-native-video package, which is available in react-native-community.
- Model component available in the React Native package.
- Repeat and borderRadius properties of the Image component are not supported by the macOS platform.
- Some of the properties of the button are also not supported.
- DatePickerAndroid and DatePickerIOS components are available in the React Native package.
Sample Code Repository Detail:
Install Create React App Yarn
IbrahimSulai/react_native_macos_support
Supporting the React Native App to the macOS platform. Contribute to IbrahimSulai/react_native_macos_support development by…
github.com
For information on how to enable support for React Native apps on the Windows platform, refer to this blog.
This article also appeared on Hackernoon.