While creating a React project, I want to create a react project without creating my-app file instead of npx create-react-app my-app.
I saw examples of such projects, but as a result of my research, I could not find how to do this.
npx create-react-app . i tried but that gave result it wouldn't let me create the project
I want all files to be found directly in the file I created of the react project without my-app file. How can I do it?
it's so simple just write at the end of npx create react app dot it will be like this
npx create-react-app .
I am starting with a new code base and I am a little confused. I look in package.json and specialized '.' configuration files and I don't see any configuration. Yet the components return JSX so there is some kind of transpiling happening. The build goes to a specific folder. There is a port assigned that gets assigned on 'npm start'. I could go on and on but the point is all of this seems to be 'normally' configured. But I am not sure where to look for this configuration or how best to modify it. For instance what if I want to modify the 'configuration' to use TypeScript? Or add testing?
These configurations are by default created when you create a react project and the role of the package.json file is to show you the versions that you are using if you will include externals library to use inside your app.
for using typescript or using anything external and including it inside your app then you will include it using npm which is responsible to add your new packages inside the node_modules folder and the version number inside your package.json.
for using test this will be normal files you will create inside your app and use npm run test and it will show for you the results.
for making your project to be typescript then you will use
npx create-react-app my-app --template typescript
# or
yarn create react-app my-app --template typescript
I created a react app using npx create-react-app client-app --use-npm --typescript
I expect to create a project using typescript but after a while it create a project that use index.js and app.js instead of index.tsx and app.tsx.
Is there any problem with my command line?
and file tsconfig.json is not created
thanks
The correct syntax would be npx create-react-app client-app --template typescript.
See https://create-react-app.dev/docs/adding-typescript/#installation.
I am new to React. I cant figure out the following error
JSX doesn't work everywhere as far as I know. You have to create component, so try a
import React from 'react'
class App = () => (<p>first react app</p>);
and then
ReactDOM.render(App, app)
You have to use the babel traspiler to convert your JSX into React code. The easiest way for a beginner to set-up the React environment is to use create-react-app.
I'm assuming that you already have node installed. If not a quick Google search will instruct you how to install nodejs.
After that run the following command in the directory where you want to create the project
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
Then open your browser and go to localhost:3000 and you should see your react template.
More information on create-react-app can be found via the following links
github page
react official documentation
Is it possible to use TypeScript with create-react-app? If so, how would you do it?
You can do it like this:
create-react-app my-app --scripts-version=react-scripts-ts
See https://github.com/wmonk/create-react-app-typescript
No ejecting required for this.
This is the way to go:
# update create-react-app first
npm update -g create-react-app
create-react-app my-app --typescript
Create React App v2.1.0 now supports TypeScript, so you no longer need to eject or use the react-scripts-ts fork;
Or you can add TypeScript to the existing app:
yarn add typescript #types/node #types/react #types/react-dom #types/jest
# or
npm install --save typescript #types/node #types/react #types/react-dom #types/jest
then rename .js files to .tsx files to start using TypeScript.
Note that a tsconfig.json will be created for you when you run the app. You will be able to edit tsconfig.json except for some options.
Credits:
[1] Vincent answer
[2] migrate create react app typescript post
Typescript is available out of the box now, in create-react-app version 2.1!
You can use it now, like this (as shown here):
npx create-react-app#next app-name --scripts-version=2.0.6-next.c662dfb0 --typescript
Here is update about create-react-app --typescript flag
Previously in order to generate new project in typescript with create-react-app we used typescript flag like below
npx create-react-app my-app --typescript
But this typescript flag will be removed in next major release of create-react-app as mentioned in the create-react-app --help
--typescript (this option will be removed in favor of templates in the next major release of create-react-app)
So the new solution will be to use a template as mentioned here
ex:
npx create-react-app my-app --template typescript
I posted a feature request in the github issues for create-react-app and here was the response:
Hi! We're not quite ready to consider TypeScript yet (see #142 for
updates). We have yet to complete our Flow integration (which we will
suggest as first option for type safety).
Additionally, there's really interesting things going on right now.
See babel/babylon#320 and babel/babylon#444. TypeScript may soon be
parsed by Babylon (and compiled by Babel). Microsoft has interest in
seeing this happen, and are working on a WIP themselves, too.
This consideration is probably still a few months out. Sorry!
Though unendorsed by us, there is a fork of CRA which supports
TypeScript. We cannot provide support if it doesn't work for you, but
it should!
Not sure how to square that with levito's response.
Here is the link to the github issue:
https://github.com/facebookincubator/create-react-app/issues/1998#issuecomment-295311100
You can use Facebook's Official Typescript Template for Create React App.
Do
npx create-react-app my-app --template typescript
or
yarn create react-app my-app --template typescript
Also, you can create your app using this starter (https://github.com/vtereshyn/react-typescript-eslint-starter)
It doesn't use create-react-app, so fully customizable and changeable. Because using create-react-app it will be hard to add something in some cases...