Scribd
Upload
17 views5 pages

React - and - React - Native Project Setup

This document provides a comprehensive setup guide for React.js and React Native, including installation of Node.js, project creation, and basic project structures. It also covers optional library installations, testing tools, version control with Git, and deployment options for both frameworks. Key commands and examples for creating functional components are included to assist users in getting started with their projects.

Uploaded by

KingStar Oti
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views5 pages

React - and - React - Native Project Setup

This document provides a comprehensive setup guide for React.js and React Native, including installation of Node.js, project creation, and basic project structures. It also covers optional library installations, testing tools, version control with Git, and deployment options for both frameworks. Key commands and examples for creating functional components are included to assist users in getting started with their projects.

Uploaded by

KingStar Oti
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

React.

js and React Native Setup Guide

1. Install Node.js and npm

Ensure Node.js and npm (Node Package Manager) are installed on your system.

# Check Node.js and npm version

node -v

npm -v

Download Node.js from https://nodejs.org if it's not installed.

2. Set Up a React.js Project

# Install Create React App globally (Optional)

npm install -g create-react-app

# Create a new React project

npx create-react-app my-react-app

# Navigate to the project directory

cd my-react-app

# Start the development server

npm start

3. Basic React.js Project Structure


- public/: Contains static files like index.html and images.

- src/: Contains your React components, styles, and logic.

Example of a functional component (App.js):

import React from 'react';

function App() {

return (

<div className="App">

<h1>Hello, React.js!</h1>

</div>

);

export default App;

4. Install Additional Libraries for React.js (Optional)

# React Router

npm install react-router-dom

# Axios for API requests

npm install axios

# Tailwind CSS for styling

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init


Update Tailwind in your CSS file and Tailwind config.

5. Set Up a React Native Project

# Install Expo CLI globally

npm install -g expo-cli

# Create a new React Native project

expo init my-react-native-app

# Navigate to the project directory

cd my-react-native-app

# Start the development server

expo start

6. Basic React Native Project Structure

- App.js: The entry point for your app.

Example of a basic React Native component (App.js):

import React from 'react';

import { StyleSheet, Text, View } from 'react-native';

export default function App() {

return (

<View style={styles.container}>
<Text>Hello, React Native!</Text>

</View>

);

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

},

});

7. Install Additional Libraries for React Native (Optional)

# React Navigation

npm install @react-navigation/native

npm install react-native-screens react-native-safe-area-context react-native-gesture-handler

react-native-reanimated react-native-vector-icons

# Axios for API requests

npm install axios

# React Native Paper for UI components

npm install react-native-paper


8. Testing React and React Native Apps

- React.js: Use tools like Jest and React Testing Library.

- React Native: Use tools like Jest and Detox.

# Install Jest

npm install --save-dev jest

9. Set Up Git for Version Control (Optional)

git init

echo "node_modules/" > .gitignore

git add .

git commit -m "Initial commit"

10. Deployment

- React.js: Use platforms like Netlify, Vercel, or GitHub Pages.

- React Native: Build standalone apps using Expo or tools like EAS Build.

You might also like