Comments (13)
Hi there!
You can get react working very simply by following these steps:
-
Install Node.js
Install node.js, together withnpm
(the Node Package Manager) -
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 .
- 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.
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:
npm create [email protected]
- 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.
We have all commented the same thing 3 times, maybe we can close this?
from react.
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.
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.
I recommend using webpack or vite and if possible then nextjs. and create-react-app, I recommend not using an old wallet.
from react.
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.
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.
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.
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.
You can host NextJS on amazon, yes.
from react.
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.
this issue is still open you can close it
from react.
Related Issues (20)
- [DevTools Bug] getCommitTree(): Invalid commit "1" for root "445". There are only "1" commits.
- [eslint-plugin-react-hooks] Missing type declarations HOT 2
- [React 19]
- Bug: useEffect is triggered even if the array as dependency variable wasn't changed. HOT 4
- [DevTools Bug]: React Devtools not working neither on vite or cra project HOT 5
- ..
- Bug: Error Recovery Mechanism Overwriting Initial Rendering Errors in Concurrent Mode HOT 1
- Bug: Empty `style={}` object values cause hydration warnings in React 18.3.1 - Includes solution HOT 1
- [React 19] Cannot assign to readonly property HOT 8
- Unexpected Initial State Jump in 'useEffect" with 'setTimeout' and State Dependencies HOT 3
- React[19] Module '"react"' has no exported member 'useActionState'. HOT 2
- Bug: effect runs with stale state values outside of Concurrent React HOT 1
- Feature Request: ESLint hooks rule for accessing previous state when deriving new state
- Bug: Weird Behavior of useCallback() hook When Variables or States Are defined before and after the Callback (ES5) HOT 5
- Bug: div: `ref` is not a prop HOT 3
- Bug: useFormStatus pending state is reset when component state is updated HOT 5
- [React 19] TEST HOT 1
- `FALLBACK_THROTTLE_MS` slows tests down significantly - could it be configurable? HOT 4
- Unexpected state behavior when updating nested state objects HOT 5
- Make pre-release version naming align with semver 2 HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react.