I am learning react and not exprienced too much. Whenever I want to create a new react project, the create-react-app command takes a lot of time making one. I have followed CodeSandbox which creates react apps really fast and they are simple and clean unlike ones made by create-react-app, which are too complicated and messy. Is there a boilerplate to help me creating simple react apps quickly?
This is the easiest way to get started
npx create-react-app my-app
cd my-app
npm start
Below is an alternative, but it's a lot more involved.
mkdir my-app // create directory
cd my-app
npm init -y //create package.json
npm install react react-dom //install react and react-dom
touch index.js index.css
You can add your code to index.js. It will looks something like this
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
class App extends React.Component{
render(){
return(
<div>Hello World</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'))
After that you'll need to get your babel
npm install --save-dev #babel/core #babel/preset-env #babel/preset-react webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader html-webpack-plugin
touch webpack.config.js
Configure your webpack
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry : './my-app/index.js',
output : {
path : path.resolve(__dirname , 'dist'),
filename: 'index_bundle.js'
},
module : {
rules : [
{test : /\.(js)$/, use:'babel-loader'},
{test : /\.css$/, use:['style-loader', 'css-loader']}
]
},
mode:'development',
plugins : [
new HtmlWebpackPlugin ({
template : 'my-app/index.html'
})
]
}
Add babel presets and npm command to build (build) and run (dev) your code to package.json
"main": "index.js",
"babel": {
"presets": ["#babel/preset-env", "#babel/preset-react"]
},
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --open"
}
The best and most effiecient way is to first install pnpm package. It's much faster than normal npm install or npm i command due to symlinks and cache implemented in it.
It's better to have a git repository which is initiated by create-react-app, you can install the packages you commonly use in the package.json file. Then each time you want to create a new project, you can clone the repository and install the packages fast by running the following command. It may takes the same time as before, because pnpm needs to cache the packages and re-use them.
pnpm i
I have created a sample repository, you can clone it from this link.
P.S 1:You can read more about pnpm, in this link.
Use
npm init vite#latest
Or
Yarn create vite#latest
It will ask you a question and you have to answer it and it creates and run react apps tooo faster than the original cli
In my opinion use yarn instead npm. I heard it is faster:
npm install --global yarn
Then for making a directory for your projects:
yarn create react-app my-app
For checking version:
yarn --version
One way I do this fast is by running npx create-react-app boilerplate
and then save that directory and push it to github.
then you can just get your new react app by simply cloning that repo.
by running git clone boilerplate and then you can just rename the folder, and the name of the app and other information you need in package.json.
I really only edit the name and the source repo in the package.json
Related
My question is based on installing typescript in existing React project. It is not related to how to create typescript react!
I have cloned a repo from AWS where there is a react app. Now, I need to make an app using typescript. To install the typescript in React I have run a command "npm install --save typescript #types/node #types/react #types/react-dom #types/jest". It is creating typescript in package.json but not creating tsconfig.json file.
My other question is should index.ts file created automatically in React and if it is then how could I convert into lib/index.js within React.
Please consider the article linked in the comments of the post as a guide for migrating from JSreact to TSreact.
For a simple answer, the command below will init a tsconfig.json file
with npm as a manager.
npx tsc --init
for yarn
yarn tsc --init
(for completeness).
I am learning react from an old tutorial, so I have to create a project with the version 1.5.2 of Create React App.
I have installed create-react-app#1.5.2 globally with no problems.
After I executed npx create-react-app it uses the latest version of Create React App.
Is there any way that I could do it, or where can I find the code for a project with that version?
It's no possible because of several reasons:
I installed the package "create-react-app#1.5.2" from here to assure I'm using the correct create-react-app version:
npm init -y
npm install create-react-app#1.5.2
or
yarn init -y
yarn add create-react-app#1.5.2
In the \node_modules\create-react-app folder I executed the command:
node index.js app-folder
And it installed the last version of react without a template because it's an old version of the package, but still the latest version:
Checking the file createReactApp.js I can see it's meant to be that way, even if it's an old version of the builder "create-react-app" it will install the last version of the packages.
Also, if you try this command: node index.js app-folder --scripts-version 1.5.2
It will not found the version you want, instead, it will show a list of available versions of react-scripts.
According to the date, the correct packages are:
react: 16.4.2
react-dom: 16.4.2
react-scripts: 1.1.5
So you can install the version you want with this:
npm init -y
npm install react#16.4.2 react-dom#16.4.2 react-scripts#1.1.5
or
yarn init -y
yarn add react#16.4.2 react-dom#16.4.2 react-scripts#1.1.5
If you're react v18, and you want to go down to the previous non-change breaking version, here's what you can do:
In your package.json replace:
"react": "^18.0.0"
"react-dom": "^18.0.0"
With
"react": "^17.0.2"
"react-dom": "^17.0.2"
Then go to your entry file index.js At the top, replace:
import ReactDOM from 'react-dom/client'
With
import ReactDOM from 'react-dom';
In your index.js file, replace:
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
With
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
Delete your node_modules and run yarn install or npm i --force
After installation, run yarn start or npm start
--------------------------------------OR------------------------
If you want through npx command
npx create-react-app[version] my-app
npx create-react-app#17.0.2 my-app
So i start off with writing my own node.js app and the only thing i want is to include a package for saml.
So i was wondering what is the minimal requirement for my app.
I was just creating a node.js file and then i installed the package by:
node install some-saml-passports-package.
I got this warning after installation:
npm WARN enoent ENOENT: no such file or directory, open '.../mynodeapp/package.json'
I removed the package and created a package.json file. Which results in a parsing error because there was no content inside.
I have read that I only need a package.json when I plan to create my own package. Also I read something about local and global installation of package files in npm. Well, i need a bit of clarification for my doing.
What is the use of package.json?
Do I need it when I only want to create a standalone app in node with one dependency to an existing package?
Is it recommended even if I don't need it at all?
There is no minimum requirement for node.js application. The package.json is only required to manage your application for dependencies, module descriptions , handle npm scripts etc. You can install packages without package.json, just don't use the --save flag with npm install. E.g.:
npm install <package_name> - you can still run your node application without any problem. But I will suggest you to add a package.json file and add following:
{
"name": "<package_name>",
"version": "<version>", //0.0.1 for starters
"description": "",
"main": "<entry point of application>", // example: app.js , index.js etc
,
"author": "<your name>",
"license": "ISC",
"dependencies": {}
}
You can create this by adding it manually or just execute npm init in your project root directory and answer some basic questions in console.
Here are some useful links:
npm init
how to use package.json
The minimal file is:
{
}
Now you can start using commands like npm install web3 --save and they will save onto this file.
Create package.json via npm init command.
Package.json contains data about your project and what is more important for standalone app - it contains dependencies list. You can install all dependencies from package.json with npm install.
If you want to install package and save it in package.json type npm install package-name --save.
I have a small react jsx file that needs to be compiled to js.
I install babel and the presets like so in the directory with the js file
npm -g install babel-cli
npm install babel-preset-es2015 babel-preset-react
My script does this
babel --presets es2015,react input.js -o output.js
Everything works.
Reboot the machine and re-run the build. It fails.
Each time I reinstall babel and the presets to get it to work.
I am not a js dev and looking up the similar questions list and a google search for this issue returns 25 different ways of "fixing" the issue. This seems like a basic task, why is there so much noise around it and what is the right way to add this to a larger non-javascript build process .
You have to install the presets globally.
Do this
Create a new folder and move you input.js to that folder
Do npm init
Do npm i babel without -g
Do npm install babel-preset-es2015 babel-preset-react
Open the console at that location
Run ./node_mudules/.bin/babel --presets es2015,react input.js -o output.js
Please, I just want to start learning React, but I am not sure how to install it. Browserify was recommended but I have never used it before so I am confused.
After this command: npm install --save react react-dom babelify babel-preset-react, what do I do next? How do I create a folder and start using React? And what does this other command mean, browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js?
I just set this up myself on CentOS7, so, I thought I would share the knowledge.
--Install React:
sudo npm install -g create-react-app
--Assign the "Public" Zone to the Network Interface Used by React in Your Firewall:
firewall-cmd --zone=public --add-interface=eth0
--Open the Port for React in Your Firewall for Development Network:
firewall-cmd --zone=public --add-port=3000/tcp --permanent
firewall-cmd --zone=public --add-port=5000/tcp --permanent
Note: 3000 is development version, 5000 is production version.
--Create a React Project:
create-react-app project
--Enter Project Directory and Run NPM:
cd project
npm start
--You will get results like this:
Compiled successfully!
You can now view project in the browser.
Local: http://localhost:3000/
On Your Network: http://192.168.10.10:3000/
Then just load up that URL in a browser.
If you want to learn how to code in React now, then I recommend this tutorial: https://facebook.github.io/react/tutorial/tutorial.html