I want to avoid using relative pathing when importing other files. For example, I'd like to change something like:
import InputBar from ../../pages/InputBar
to
import InputBar from components/pages/InputBar
Normally I would modify the resolve options in webpack, but I'm using create-react-app and don't have access to it.
I would like to avoid using npm run eject. Is there another way to avoid using relative pathing for imports?
You can use rewired which will give you access to configuring react-scripts to your liking and not having to eject from CRA.
Related
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've a react app created using create-react-app. I recently saw some article saying to add few loaders to webpack config file. But I've no idea where to find the webpack.config.js file inside a react project.
Really appreciate any ideas or suggestions.
Webpack config is not available in CRA. If you want to get one, you have to do an eject (https://create-react-app.dev/docs/available-scripts/), but if you don't need to make eject, or you don't wanna do this, you can use the library which is the wrapper of CRA, for example: CRACO or rewrite
I want to use some third-party packages upon react, which are:
https://ant.design/ - a design system
https://github.com/vazco/uniforms - for generating and validating forms.
I am using create-react-app for as a boilerplate
After installing all packages (with yarn) and running yart start I am getting this error:
How can I add #babel/plugin-proposal-class-properties without running yarn eject to modify .babelrc file?
Or is there any other solution for this problem?
It looks like the only way is to eject. CRA has purposely avoided too much customization. See https://github.com/facebook/create-react-app/issues/167
I am learning React and I have already created a few apps with CRA.
I haven't found a good and easy way to include sass on my react projects so I came up with this:
install node-sass on the src folder
add this to the package.json:
"node:sass": "node-sass src/index.scss src/index.css -w"
then on each component, I would add a sass partial file, so I could keep the style and the js file in the same folder.
is there any problems with doing that?
I've read some tutorials to config webpack to use sass but it sounded to complicated.
Including partials per component is just fine and actually encouraged as a standard. Then you include it in the webpack with the ExtractTextPlugin, which allows you to bundle all your sass files into a single css file that you import in index.html. You can see an example here: https://github.com/ianshowell/react-serverless-kickstart/blob/master/webpack.common.js#L46
For this to work, you also need to include the sass-loader which will let your Js files parse your Sass class names. Feel free to use my starter pack that the above code is linked in to help you figure it all out.
Edit: Also, take a look at this example component to see how importing styles works: https://github.com/ianshowell/react-serverless-kickstart/tree/master/src/components/TodoItem
If you want to use sass in your react app, install chokidar
It will help you:
https://www.npmjs.com/package/react-scripts-sass-chokidar
Create react app v2, support SASS out of the box (https://reactjs.org/blog/2018/10/01/create-react-app-v2.html)
Here a link to read the documentation: https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet#docsNav
All you need is to install node-sass if not already
npm i node-sass --save-dev
And then make sure you import files with scss extension.
If you need to change old css files, change the extension, and so follow with the imports.
I am currently learning react and I have an app using webpack, babel and react. It seems react has two ways of writing it using either required or import. It also seems there is a lot more documentation on using import. How can I change my stack to use the import version?
The import and export statements are an ES6 standard. Right now, your setup is likely using Babel to transpile this into ES5. You can use one or the other, but import/export will soon become the standard, so adopting it is advised.
import is ES6 (or ES2015) standard. To use it, you need to install and activate the preset in babel.
Follow these steps:
Go to your project folder then type this: npm install --save-dev babel-cli babel-preset-env
Create a file named .babelrc (in case you have not created one) and insert this lines:
{
'presets': ['env', 'react']
}
I assume you have setup the webpack to work with babel.