Developer Blog

Tipps und Tricks für Entwickler und IT-Interessierte

ReactJS | Cookbook

by Ralph React, ReactJS

General Readings

Create App

Run the following commands to create a new React Native project called “app-getting-started”:

npx create-react-app  app-getting-started
cd app-getting-started

Start App

npm start

Add Typescript Support

yarn create react-app app-getting-started-with-typescript --folder-name
cd app-getting-started-with-typescript
yarn add typescript @types/node @types/react @types/react-dom @types/jest

Testing: Tools and Frameworks

ReactJS related

  • React Testing Utilities – Home
  • Jest – Delightful JavaScript Testing Framework with a focus on simplicity – Home
  • Jasmine – Home | Github
  • Enzyme – Home | Github

Others

ReactJS | Getting Started

by Ralph React, ReactJS

Readings

Learning Path

  • Fundamentals Props and State
    • Create React App
    • JSX
    • Function Components
    • Class Components
    • useState and useEffect Hooks
    • setState and Component Lifecycle Methods
    • Conditional Rendering
    • Lists and Keys
    • Building Simple Forms
  • Advanced Topics
    • Hooks
      • useContext
      • useReducer
      • useRef
      • useMemo
      • useCallback
      • Custom Hooks
    • Context
    • Higher Order Components
    • Render Props
    • Refs
    • Error Boundaries
    • Portals
    • HTTP Requests
      • GET
      • POST
  • Ecosystem
    • State Management
      • Redux/ Mobx
      • Apollo Client
    • Routing
      • React Router
    • Styling
      • Styled Components/ Emotion
      • Tailwind CSS
      • Chakra UI / Material UI / Ant Design
    • Forms
      • Formik
      • React Hook Form
    • Testing
      • Jest + React Testing Library
      • Cypress
    • Misc
      • TypeScript
      • React i18Next
      • Storybook
      • Firebase
      • Practical React Libraries
    • Next Steps
      • Gatsby
      • Next.js
      • React Native

Topics

  • Create React App
  • Functional Components
  • Class Components
  • JSX
  • Props And State
  • useState and useEffect Hooks
  • setState and Component Lifecycle Methods
  • Conditional Rendering
  • Lists and Keys
  • Building Simple Forms

Get Started

Create App

Run the following commands to create a new React Native project called “app-getting-started”:

npx create-react-app  app-getting-started
cd app-getting-started

Start App

npm start

React Native | Getting Started

by Ralph React, React Native, ReactJS

General Readings

Create App

Expo CLI Quickstart

Assuming that you have Node 12 LTS or greater installed, you can use npm to install the Expo CLI command line utility:

npm install -g expo-cli

Then run the following commands to create a new React Native project called “GettingStarted”:

expo init app-getting-started
cd app-getting-started
npm start # you can also use: expo start

React Native CLI Quickstart

npx react-native init app-getting-started

or create new project based on a template

npx react-native init app-getting-started--template react-native-template-typescript

Start App

Step 1: Start Metro

First, you will need to start Metro (Docs), the JavaScript bundler that ships with React Native. Metro “takes in an entry file and various options, and returns a single JavaScript file that includes all your code and its dependencies.”

npx react-native start

Then, visit the Website or the Metro Page (http://localhost:8081/)

Step 2: Start your application

Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following:

# For running app on iOS
npx react-native run-ios

# For running app on Android
npx react-native run-android