here is the code for customsection.js
import React, { Component } from "react"
class CustomSection extends Component{
render(){
return (
<h1>Hello Custom Section</h1>
);
}
}
export default CustomSection;
then i have the code from the App.js will have the CustomerSection component
import React, { Component } from 'react';
import './CustomSection'
class App extends Component {
render(){
return (
<div>
<h1>Hello World</h1>
<CustomSection />
</div>
);
}
}
export default App;
it looks simple and straight, however when i compile the code in the visual studio terminal
npm run-script build
PS C:\DanAngular\dan-react\my-first-react> npm run-script build
> my-first-react@0.1.0 build C:\DanAngular\dan-react\my-first-react
> react-scripts build
Creating an optimized production build...
Failed to compile.
./src/App.js
Line 28:8: 'CustomSection' is not defined react/jsx-no-undef
Search for the keywords to learn more about each error.
the error stems from this line
we must specific the component name in the import. that is very practice, i really like this checking on the compile time. it will enforce the proper component being reference and will be called.
import CustomSection from './CustomSection'
after i fixed this line, then the project compiled and ran,
my first try on the react is good and running
Happy programming, Cheers
