What is React JS?
Does React work on Windows?
Yes. Windows supports two different environments for developing React apps:
- Install a React development environment on Windows
- Install a React development environment on Windows Subsystem for Linux
For help determining which environment to use, check out Should I install on Windows or Windows Subsystem for Linux?
What can you do with React?
Windows supports a wide range of scenarios for React developers, including:
Basic web apps: If you are new to React and primarily interested in learning about building a basic web app with React, we recommend that you install create-react-app directly on Windows. If you're planning to create a web app that will be deployed for production, you may want to consider installing create-react-app on Windows Subsystem for Linux (WSL), for better performance speed, system call compatibility, and alignment between your local development environment and deployment environment (which is often a Linux server).
Single-Page Apps (SPAs): These are websites that interact with the user by dynamically rewriting the current web page with new data from a server, rather than the browser default of loading entire new pages. If you want to build a static content-oriented SPA website, we recommend installing Gatsby on WSL. If you want to build a server-rendered SPA website with a Node.js backend, we recommend installing Next.js on WSL. (Though Next.js now also offers static file serving).
There are several different ways to install React along with an integrated toolchain that best works for your use-case scenario. Here are a few of the most popular.
- Install create-react-app directly on Windows
- Install create-react-app on Windows Subsystem for Linux (WSL)
- Install the Next.js framework on WSL
- Install the Gatsby framework on WSL
- Install React Native for Windows desktop development
- Install React Native for Android development on Windows
- Install React Native for mobile development across platforms)
<script>tag on an HTML page. Follow the "Add React in One Minute" steps in the React docs.
- Package management - Package managers make it easy to include the functionality of third-party packages in your app, including updating them and managing dependencies. Commonly used package managers include Yarn and npm.
Together, the suite of frameworks that help you create, build, and deploy your app are called a toolchain. An easy toolchain to get started with is create-react-app, which generates a simple one-page app for you. The only setup required to use create-react-app is Node.js.
- For Windows development, follow the instructions to install Node.js on WSL or install Node.js on Windows. For help deciding which to use, check out the article: Should I install on Windows or Windows Subsystem for Linux?.
React Native component directory
The components that can be used in a React Native app include the following:
- Core components - Components that are developed and supported as part of the React Native framework.
- Community components - Components that are developed and maintained by the community.
- Native components - Components that you author yourself, using platform-native code, and register to be accessible from React Native.
The React Native Directory provides a list of component libraries that can be filtered by target platform.
Fullstack React toolchain options
React is a library, not a framework, so may require additional tools to create a more complex app. In addition to using React, you may want to consider using:
- Package manager: Two popular package managers for React are npm (which is included with NodeJS) and yarn. Both support a broad library of well-maintained packages that can be installed.
- React Router: a collection of navigational components that can help you with things like bookmarkable URLs for your web app or a composable way to navigate in React Native. React is really only concerned with state management and rendering that state to the DOM, so creating React applications usually requires the use of a routing library like React Router.
- Redux: A predictable state container that helps with data-flow architecture. It is likely not something you need until you get into more advanced React development. To quote Dan Abramov, one of the creators of Redux: "Don't use Redux until you have problems with vanilla React."
- Mocha: A testing framework that runs on Node.js and in the browser to help with asynchronous testing, reporting, and mapping uncaught exceptions to the correct test cases.
React courses and tutorials
Here are a few recommended places to learn React and build sample apps:
- The React learning path contains online course modules to help you get started with the basics.
- Build a single-page app (SPA) that runs in the browser (like this sample web app that retrieves calendar info for a user with the Microsoft Graph API)
- Build a server-rendered app with Next.js or a static-site-generated app with Gatsby
- Create a user interface (UI) for a native app that runs on Windows, Android, and iOS devices (checkout these native Windows app samples or this sample native app that retrieves calendar info for a user with the Microsoft Graph API)
- Develop an app for Surface Duo dual-screen device
- Create a web app or native app using Fluent UI React components
- Build a React app with TypeScript
Submit and view feedback for