GithubHelp home page GithubHelp logo

how to download about react HOT 13 CLOSED

vasanth-code avatar vasanth-code commented on November 4, 2024
how to download

from react.

Comments (13)

eben-vranken avatar eben-vranken commented on November 4, 2024 3

Hi there!

You can get react working very simply by following these steps:

  1. Install Node.js
    Install node.js, together with npm (the Node Package Manager)

  2. create-react-app
    Open a terminal anywhere where you want to create your react project.

  • If you still need to make a folder, run the following command:
    npm create-react-app [your-app-name]

  • If you are already in the folder where you want to create the react app, run the following command:
    npm create-react-app .

  1. After create-react-app is finished, run:
    npm start

After all these steps you should see your React app live in a local development server.

from react.

shubhankarval avatar shubhankarval commented on November 4, 2024 2

Hello, welcome to the React community!

Setting Up a React Project with Vite

Step 1: Install Node.js and npm

Before you begin, make sure you have Node.js and npm (Node Package Manager) installed on your machine. You can download them from the official website: Node.js Downloads.

Step 2: Create a New React Project

Open your terminal, navigate to the right directory and use the following commands to create a new React project with Vite:

npm create vite@latest

I personally prefer this version:

  • Running the command will prompt you to give an name for the project. Best to use PascalCase for naming.
  • Please select React out of the given options.

Step3: Run the React App

# Move into the project directory
cd [project-name]

# Run app
npm run dev 

And you'll have your app running in localhost.
Press Ctrl^C in Terminal to close the app.

Advantages of Using Vite Over Create React App

1. Faster Development Server

Vite is known for its incredibly fast development server. It leverages native ES modules (ESM) to provide near-instantaneous cold server start times. This results in a highly responsive development experience, especially for larger projects.

2. Instant Hot Module Replacement (HMR)

Vite offers instant Hot Module Replacement (HMR) for React components and other assets. Changes you make in your code are reflected almost instantly in the browser without requiring a full page refresh. This speeds up development and enhances productivity.

3. Optimized Build Process

Vite optimizes the build process by leveraging native ES modules, tree shaking, and other modern techniques. This results in smaller bundle sizes, faster loading times, and better overall performance for your production builds.

4. Plugin System

Vite has a flexible plugin system that allows you to extend its functionality easily. You can add plugins for various tasks such as handling CSS, images, and more. This enables you to customize your build process to suit your project's specific requirements.

5. Native Support for CSS Preprocessors

Vite natively supports popular CSS preprocessors like SCSS, Less, and Stylus, making it straightforward to integrate them into your project without additional configuration.

Hope this helped!

from react.

eben-vranken avatar eben-vranken commented on November 4, 2024 2

We have all commented the same thing 3 times, maybe we can close this?

from react.

nawfelsekrafi avatar nawfelsekrafi commented on November 4, 2024 1

I would also recommend going directly to NextJS, but if you have some trouble understanding the workflow it is okay to start with React.

pls could say why you recommend using NextJs over React ?

from react.

eben-vranken avatar eben-vranken commented on November 4, 2024 1

I would also recommend going directly to NextJS, but if you have some trouble understanding the workflow it is okay to start with React.

pls could say why you recommend using NextJs over React ?

NexJS allows for easy implementation of SSR, SSG, easier routing,...

from react.

nhlamdev avatar nhlamdev commented on November 4, 2024

I recommend using webpack or vite and if possible then nextjs. and create-react-app, I recommend not using an old wallet.

from react.

eben-vranken avatar eben-vranken commented on November 4, 2024

I would also recommend going directly to NextJS, but if you have some trouble understanding the workflow it is okay to start with React.

from react.

AuthorProxy avatar AuthorProxy commented on November 4, 2024

I would also recommend going directly to NextJS, but if you have some trouble understanding the workflow it is okay to start with React.

is nextjs support client only environment? without server

from react.

eben-vranken avatar eben-vranken commented on November 4, 2024

I would also recommend going directly to NextJS, but if you have some trouble understanding the workflow it is okay to start with React.

is nextjs support client only environment? without server

If you're talking about hosting locally in a development environment, yes.

from react.

AuthorProxy avatar AuthorProxy commented on November 4, 2024

I would also recommend going directly to NextJS, but if you have some trouble understanding the workflow it is okay to start with React.

is nextjs support client only environment? without server

If you're talking about hosting locally in a development environment, yes.

why only development? My portal in production hosted on amazon, it should be serverless on static hosting, thats why i am asking )

from react.

eben-vranken avatar eben-vranken commented on November 4, 2024

You can host NextJS on amazon, yes.

from react.

shehan2000 avatar shehan2000 commented on November 4, 2024

If you are a beginner i recommend using the traditional way of building react app

You can get react working very simply by following these steps:

Install Node.js
Install node.js, together with npm

Go to the folder you want to create react project

create-react-app
Open a terminal and run above code.this will install create react app

 npx create-react-app  [your-app-name] ,this will create your new react project

you can run the project you created using
npm start

this way is way much easier when you are going to learn react and doing testing using jest, but this way is now fading away

after you get some experience i recommend "vite" to create your react app it is way faster to reload and have lots of advantages,
but when you are going to testing it will give some errors if you are using jest, i recommend "vitest" as the testing library to use with project built using vite.
here is the link to vite doc "https://vitejs.dev/guide/"

from react.

gnaneshwar718 avatar gnaneshwar718 commented on November 4, 2024

this issue is still open you can close it

from react.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.