i am a begginer of expo and i encountered this in the app.js file
export default class App extends React.Component
Can anyone explain what this line of code actually mean? i cant understand this
You should tag this with react-native instead of react, react-native is used with Expo for creating mobile apps, the 'native' part refers to how it uses native components from either IOS or Android which are written in Swift and Java respectively.
However, I can tell you that what that line of code is doing is exporting the class App so that other files can import it. App extends React.Component which gives the class access to methods and lifecycle hooks. It's basic ES6 Javascript, if you're going to be writing React then you're going to want to start with the basics of Javascript including ES6.
Related
We have a simple setup of Webpack 4 / Babel 7 in a React app.
I would expect if an import is missing in one of the JSX files - Webpack would kill the build
but we came across cases, for example:
export default class SomeClass extends Component {
render() {
return (<Button>click</Button>)
}
Where the build does not give us indication that something is wrong (just the built-in es-list in IntelliJ)
Is there some configuration in Webpack that can prevent this?
After creating a new react project using npx create-react-app new I'm getting functional js code in App.js:
import React from 'react';
import './App.css';
//need to have a class instead of a function here:
function App() {
return (
<div className="App">
</div>
);
}
export default App;
What command do I need to create a none functional react project? If functional is better than none functional please explain why.
If you have install create-react-app for this project, then it is come up with all the new features from react 16.8.6 (latest version of react). The latest react version come up with concept of Hooks. That is why we are getting functional component by default instead of class based component to increase the performance.
If you want class based component by default they you have to come up with older version of create-react-app. Ref
You can migrate react-scripts v3.x to v2.x like so:
npx create-react-app my-app --scripts-version react-scripts#2.1.7
When a new react app is created using create-react-app, it pulls the template from here https://github.com/facebook/create-react-app/tree/master/packages/react-scripts/template
Functional components are preferred than Class components (ES6 class) because, Functional components are usually stateless i.e. without any state and lifecycle methods - check this https://reactjs.org/docs/state-and-lifecycle.html. Their performance is better over class components which have state. Therefore, as a good practice one should always prefer as many stateless components (Functional) over stateful (Class), which is also done in react starter app i.e. create-react-app
Use: create-react-app <project> --scripts-version 2.1.7 to create a new react project that start with a class based App component rather than functional.
There are situations where a developer would prefer the class based design so the --scripts-version argument is good to know about.
I am probably missing a verry basic understanding of loading less files in ReactJS, but I am unable to solve the following issue.
I have created components and created less files for each of them, for example:
import * as React from 'react';
import Row from 'antd/lib/row';
import Col from 'antd/lib/col';
import { NavLink } from 'react-router-dom';
import '../styles/how-it-works-styles.less';
import Icon from 'antd/lib/icon';
class HowItWorksComponent extends React.PureComponent<Props> {
public constructor(props: Props) {
super(props);
}
public render() {
return (
<Row className={'steps-row'}>
Now when I load a page where this component is not at all used, the less file is stilling being loaded into the dom. Could someone explain why this is happening and how i can prevent this from happening?
Your problem is not really about less, but a general problem of how to bundle a web app optimally. Since you're not providing your main app component or your webpack config (assuming you're using webpack for bundling), I obviously don't know the details of your setup. In general however, the standard configuration is to bundle all the components and other imports reachable from the entry point file into one big file. The fact that you use react router or similar to split your app into "pages" doesn't change this, as react router only affects which components are rendered when, not the bundling.
If you need to split your app into multiple bundles (which IMO requires a relatively large app to consider) you can use dynamic imports to make some of your components "Loadable". This means they will be placed in a separate bundle which is only loaded as needed. There is a tutorial in the react router documentation on how to set this up: https://reacttraining.com/react-router/web/guides/code-splitting
Well, recently I've started using the React.js library, and now I'm trying to use it with Firebase Hosting, with the TypeScript language. But, every time I try to write some code using tsx it just doesn't work, for example:
import * as React from "react"; //red underline under "react"
import "./App.css";
import logo from "./logo.svg";
class App extends React.Component {
render() {
return <h1>Hello</h1>; //red underline under <h1> and </h1>
}
}
export default App;
that way I just can't write any jsx code here, because it always appears the issue:
test.tsx(1,1): error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists
Can somebody please help me with this?
How did you create your react application? If you used create-react-app you'll need to use react-scripts-ts as your --scripts-version flag. This should install the #types packages along side React's dependencies, eliminating your problem.
Also, it should get you started with an App.tsx file as the one provided in your snippet is not a valid typescript react component (i.e. the your render() method is not public).
Happy hacking!
I solved this issue by reloading VSCode.
ctrl+shift+P > Developer: Reload Window
I'm following Cory House's Building Applicaiton with React and Redux in ES6 course on Pluralsight. I have done everything exactly the same as he does in the lecture and don't know why the following error occurs when I create the app layout:
Can anyone give me a hint about the reason this might occur please? Thanks a lot!
You have to write
class App extends React.Component
not
class App extends React.Component()